Here api won't draw on map using Geojson, can't read property geojson of undefined

Question

I am trying to draw various polygons on a map using geojson files. How do I go about doing this?

I am using version 3 and have copied the example code but it isn't working. I have tried linking more of the javascript source files and even tried making the shape manually with the polygon function but that didn't work either.

var platform = new H.service.Platform({
    app_id: 'xxxxxxxxxxx',
    app_code: 'xxxxxxxxxxxxx',
    useCIT: true,
    useHTTPS: true
})
var defaultLayers = platform.createDefaultLayers()

// Initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
    defaultLayers.normal.map, {
        center: {
            lat: 102
                                lng: 50
        },
        zoom: 9,
        pixelRatio: window.devicePixelRatio || 1
    })
console.log(map)
this.map = map
// Add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize())

var reader = new H.data.geojson.Reader('./path/to/file.json');
reader.parse();
this.map.addLayer(reader.getLayer());
        }

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

I expect the polygon to be drawn on the map like it does on a site like geojson.com, but all I get is this error in the console: ('cannot read property 'geojson' of undefined'). The map and everything else works fine.

I suspect it's something to do with H.data being undefined. But I'm not sure why that would be. Any ideas?

I apologise if this is hard to read, I haven't done one before. Thanks for the help.

Answer 1

If you are going to use HERE Map API Version 3.1, please see below quick start tutorial.

https://developer.here.com/documentation/maps/topics/quick-start.html

You need to use APIKEY instead of APP_CODE and APP_ID.

var platform = new H.service.Platform({
  'apikey': 'API-KEY'
});

Change base layer object to below.

 defaultLayers.normal.map -> defaultLayers.vector.normal.map

You need to put ',' and might to switch lng and lat in center property.

  center: {
      lng: 102,
      lat: 50
   },

I hope this help.