[GIS] OpenLayers HeatMap add customized data

heat mapopenlayers

I want to add HeatMap customized data based in a vector (longitude, latitude, temperature). Currently I have this code:

 data = new ol.source.Vector();   
 map = new ol.Map({
     target: 'map_canvas',
     layers: [
       new ol.layer.Tile({
           source: new ol.source.MapQuest({ layer: 'sat' })
       })
     ],
     view: new ol.View({
         center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
         zoom: 4
     })
 });

 // created for owl range of data
 var coord = [message.latitude, message.longitude];   
 var lonLat = new ol.geom.Point(coord);   
 var pointFeature = new ol.Feature({
     labelPoint: lonLat,
     weight: 20 // e.g. temperature
 });
 data.addFeature(pointFeature);     
// create the layer
 heatMapLayer = new ol.layer.Heatmap({
     source: data,
     radius: 50
 });
 // add to the map
 map.addLayer(heatMapLayer);

After all these steps I cannot see any changes in the map.

Can someone help me this issue?

Best Answer

You have missed out only one aspect in creating the feature object.

Working fiddle: http://jsfiddle.net/GFarkas/61dafv93/.

var pointFeature = new ol.Feature({
    labelPoint: lonLat,
    weight: 20 // e.g. temperature
});

You defined the labelPoint property of your feature, which isn't a default observable property and is used to label a multidimensional feature on one specific point. You have to use geometry instead, to pass your point's coordinates to the pointFeature object.

var pointFeature = new ol.Feature({
    geometry: lonLat,
    weight: 20 // e.g. temperature
});
Related Question