CODEWITHSUNDEEP
here-apiheremaps
Jordi
Jordi

Reputation: 44

Here Maps API (JS): GeoJSON loaded polygons return null value for properties field

My HERE Maps Javascript implementation is loading GeoJSON polygons with the properties fields being set with data (example below). When I load the GeoJSON into a map and attach a click listener ("tap" event) I want to fetch the properties that were set in the GeoJSON. When I inspect the clickevent target, it says the properties field is null, while I'd expect my GeoJSON values there.

A similair, if not the same, issue has been answered nearly 2 years ago: HereMaps GeoJSON Polygon click read properties The provided solution does not seem to work with the V3.1 API of Here Maps.

Example of the GeoJSON I use:

{
"type": "FeatureCollection",
"name": "cities",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "fid": 1234, "buurtcode": "BU123456", "buurtnaam": "Centrum", "wijkcode": "XYZ", "jaarstatcode": "2089" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ .... ] ] ] } },
[and so on]

The Javascript code I'm using:

I setup a GeoJSON reader, parse the data and add it to the map:

var reader = new H.data.geojson.Reader( undefined, {...} );
reader.parseData(myGeoJsonDataVariable); // It's a variable I use, not a (remote) file
map.addLayer(reader.getLayer());

Then I want to attach a click listener to each polygon that was added to the map (used the response from the HERE Maps team from 2 years ago): HereMaps GeoJSON Polygon click read properties

reader.getLayer().getProvider().addEventListener("tap", function(e) {
    if(e.target instanceof H.map.Polygon) {
        
        // This is where the magic should happen:

        // The console.log doesn't show the propertie value from the GeoJSON (e.g. 'fid' or 'buurtcode')
        // Logging e.target.getData() by itself already returns 'undefined'. 
        console.log('Custom property value: ', e.target.getData().properties.customProp);

        // The toGeoJSON method works, but shows the properties, again, as 'null'
        console.log( e.target.toGeoJSON() )
    }
}

The documentation provided by HERE maps states the following about the properties field for GeoJSON:

Auxiliary data that accompanies geometries (the contents of the field properties) is bound to the map object and can be fetched with the method getData() on that object. See H.map.Object#getData.

Source: https://developer.here.com/cn/documentation/maps/hls-chn/topics_api/h-data-geojson-reader.html#h-data-geojson-reader__class-description

I've tried to use that information to explore how this translates to their API, but have been unable to run (for example) getData on the (here) maps object itself. I've also tried to get an Object from the click event target (e.target) but was also unable to get any property values.

Upvotes: 0

Views: 551

Answers (1)

Jordi
Jordi

Reputation: 44

Solution found:

Since the GeoJSON is not a list of Polygons, but instead a list of Features, containg 'MultiPolygons', I first had to find the parent of the clicked element:

Using getParentGroup() will do the trick in the callback of addEventListener:

console.log(e.target.getParentGroup().getData().properties);

The getParentGroup() will make sure you can access the GeoJSON properties. By default, the properties data is not added/copied to child-polygons based on Feature/MultiPolygon GeoJSON data.

For example, in my case, this will fetch the GeoJSON property 'buurtcode' in the click handler:

e.target.getParentGroup().getData().properties.buurtcode

Upvotes: 0

Related Questions