Question 104676 in Azure Question posted in
The official documentation to get you started can be found here.

Azure heat map not rendered from GeoJson datasource

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

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


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search