Load GeoJson using an object instead of an url in Here Maps

709 Views Asked by At

I'm trying to use GeoJson in Here Maps. I'm new to Here Maps API, so I'm following the official example to load a GeoJson and everything works fine if I load the GeoJson from an url. Now I want to load the GeoJson from a JS Object, but the geojson.Reader method seems that only allows to read an url. Is it possible to load an Object?

var myGeoJsonObject = ...

function showGeoJSONData (map) {

var reader = new H.data.geojson.Reader(myGeoJsonObject), {

    style: function (mapObject) {

      if (mapObject instanceof H.map.Polygon) {
        mapObject.setStyle({
          fillColor: 'rgba(255, 0, 0, 0.5)',
          strokeColor: 'rgba(0, 0, 255, 0.2)',
          lineWidth: 3
        });
      }
    }
  });

  reader.parse();

  map.addLayer(reader.getLayer());
}
4

There are 4 best solutions below

7
On

From the docs, it seems that you have two options:

  1. Pass a filepath to the constructor:
const reader = new H.data.geojson.Reader('/path/to/geojson/file.json');
reader.parse();
  1. Or, you can create a new instance and pass nothing to the constructor. You can then call the .parse method on the instance and pass your GeoJSON object. You can still pass an options object to the constructor:
const reader = new H.data.geojson.Reader(null, {
    style: function (mapObject) {
      if (mapObject instanceof H.map.Polygon) {
        mapObject.setStyle({
          fillColor: 'rgba(255, 0, 0, 0.5)',
          strokeColor: 'rgba(0, 0, 255, 0.2)',
          lineWidth: 3
        });
      }
    }
  });

// pass the data here
reader.parse(myGeoJsonObject);
0
On

This is my working example:

                _current_geojson_layer = new H.data.geojson.Reader();
                // pass the data here
                _current_geojson_layer.parseData(_geojson_object);
                // Add layer which shows GeoJSON data on the map
                map.addLayer(_current_geojson_layer.getLayer());

Here is api doc

https://developer.here.com/documentation/maps/3.1.22.0/api_reference/H.data.geojson.Reader.html#parseData

0
On

In this case it is required to use parseData, H.data.geojson.Reader.parseData: https://developer.here.com/documentation/maps/3.1.22.0/api_reference/H.data.geojson.Reader.html#parseData

    const reader = new H.data.geojson.Reader(null, {
    style: function (mapObject) {
      if (mapObject instanceof H.map.Polygon) {
        mapObject.setStyle({
          fillColor: 'rgba(255, 0, 0, 0.5)',
          strokeColor: 'rgba(0, 0, 255, 0.2)',
          lineWidth: 3
        });
      }
    }
 });
// pass the data here
reader.parseData(myGeoJsonObject);
0
On

I faced the same issue and I resolved it by making sure i imported

<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-data.js"></script>

Then I could parse the GeoJson object by

    const reader = new H.data.geojson.Reader(undefined);
    reader.parseData(geojson_object);
    map.addLayer(reader.getLayer());

Hope this helps someone in future!