Azure heat map not rendered from GeoJson datasource-CodePudding

I am new to the azure maps and try to generate a weighted heat map to show population in particular areas. I am using the following code, if I use my GeoJSON as data source, no heat map layer is rendered. If I use the earthquake URL, I can see the heat map layer.

        map.events.add('ready', function () {
            map.events.add('load', function (e) {
                
            datasource = new atlas.source.DataSource();
            map.sources.add(datasource);
            
             //datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson');   
             alert(geoJson);
             datasource.add(geoJson);

             map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
                radius: 50,
                color: [
                    'interpolate',
                    ['linear'],
                    ['heatmap-density'],
                    0, 'rgba(33,102,172,0)',
                    0.2, 'rgb(103,169,207)',
                    0.4, 'rgb(209,229,240)',
                    0.6, 'rgb(253,219,199)',
                    0.8, 'rgb(239,138,98)',
                    1, 'rgb(178,24,43)'
                ]
            }), 'labels');
            });
        });

My GeoJSON is as below:

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "properties":{
            "density":"50"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               51.5570726284386,
               25.3115021617515
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"50"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               51.5570726284386,
               25.3115021617515
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"10"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               51.5570726284386,
               25.391562807081
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"10"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               51.5570726284386,
               25.391562807081
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"10"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               35.4343604091702,
               33.9136459680463
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"10"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               35.5220012295491,
               33.8847298539905
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"40"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               51.4729695383047,
               25.2856697056661
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"20"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               35.4343604091702,
               33.7574366679259
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"50"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               35.4343604091702,
               33.7574366679259
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"10"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               51.4729695383047,
               25.2856697056661
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{
            "density":"10"
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               35.5220012295491,
               33.8847298539905
            ]
         }
      }
   ]
}

Can anyone please check and advise if there's anything wrong in the code or the geoJson?

Thanks.

CodePudding user response：

Using the code you provided and the sample data I'm able to see the heatmap render. If you are adding more code to try and take into account your density property, for example having an option like this in your heatmap:

weight: ['get', 'density']

you might not see much difference since your density properties are strings and not numbers.

That said, your dataset is really small, so heat maps won't look like much to begin with.

CodePudding user response：

I was not parsing GeoJSON, when I changed the following line, it worked.

datasource.add(JSON.parse(geoJson));