custom heatmap leaflet plugin

Question

in index.html I woluld like to add two Heatmaps users can see by checkbox in menu top right corner. menu show other stuff by code like this

layerControl.addOverlay(geojson, "H2OpenMap");

in this portion of the page (line 383 to line 397)

$.getJSON('api.php', {'wells': '1'}, function(remoteData){
  var geojson = L.geoJson(remoteData, {
      pointToLayer: function (feature, latlng) {
        var icon = chooseIcon(feature['properties']);
        var marker = L.marker(latlng, {icon: new h2icon( {iconUrl: icon} )} );
        var markerText = buildPopup(feature, true, latlng);
        marker.bindPopup(markerText);
        return marker;
    }
  }).addTo(map);

layerControl.addOverlay(geojson, "H2OpenMap");

map.fitBounds(geojson.getBounds(), {'padding': [10,10]});
});

First heat should use data from the same code before, selected by

if(feature['drinking_water'] == 'yes' ) {...
    }

Second heat should use data from the same code before, selected by

if(feature['drinking_water'] == 'no' ) {...
    }

The goal is to have two heat maps, one for clean water resources the other for not clean water resources, both can be selected by ratio button.

I've find this code looks good but I'm not able to give him data to use to create heatmap.....

//--------------------https://www.patrick-wied.at/static/heatmapjs/plugin-leaflet-layer.html-----------//
$.getJSON('api.php', {'wells': '1'}, function(remoteData){
  var geojson = L.geoJson(remoteData, {
      pointToLayer: function (feature, latlng) {
        var heatData = L.marker(latlng);
        console.log(heatData);
        //var heatData = L.marker([{lat: new latlng(lat), lng: new latlng(lng)}]);
    }})});

/*var testData = {
  max: 8,
  data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}, ...]
};*/

var cleanWater = heatData;// mettere in un array solo la posizione degli elementi che rispettano la seguente condizione: feature['drinking_water'] == 'yes'
var cfg = {
  // radius should be small ONLY if scaleRadius is true (or small radius is intended)
  // if scaleRadius is false it will be the constant radius used in pixels
  "radius": 2,
  "maxOpacity": .8, 
  // scales the radius based on map zoom
  "scaleRadius": true, 
  // if set to false the heatmap uses the global maximum for colorization
  // if activated: uses the data maximum within the current map boundaries 
  //   (there will always be a red spot with useLocalExtremas true)
  "useLocalExtrema": true,
  // which field name in your data represents the latitude - default "lat"
  latField: 'lat',
  // which field name in your data represents the longitude - default "lng"
  lngField: 'lng',
  // which field name in your data represents the data value - default "value"
  valueField: 'count'
};

var heatmapLayer = new HeatmapOverlay(cfg);

var map = new L.Map('map-canvas', {
  center: new L.LatLng(25.6586, -80.3568),
  zoom: 4,
  layers: [baseLayer, heatmapLayer]
});

heatmapLayer.setData(cleanWater);

//------------------------//--------------------//--------------------//--------------------//--------------------*/

in the root project it's following file with complete code: https://github.com/H2OpenMap/map/blob/master/index_heat_test.html

Cesare Cesare · Accepted Answer · 2016-05-23T14:55:45

Simplifying your problem I try to suggest you this example ...

http://bl.ocks.org/d3noob/raw/8973028/

This a simple code that implements a Leaflet heat map.

If you see at the source code ...

<!DOCTYPE html>
 <html>
  <head>
   <title>Simple Leaflet Map with Heatmap </title>
   <meta charset="utf-8" />
   <link 
    rel="stylesheet" 
    href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
   />
 </head>
  <body>
   <div id="map" style="width: 600px; height: 400px"></div>

   <script
    src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
   </script>

   <script
     src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js">
   </script>
   <script src="2013-earthquake.js"></script>
   <script>

    var map = L.map('map').setView([-41.5546,174.146], 10);
    mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
    }).addTo(map);

    var heat = L.heatLayer(quakePoints,{
        radius: 20,
        blur: 15, 
        maxZoom: 17,
    }).addTo(map);

   </script>
  </body>

.... you'll find that the data is simulated with a coordinate array that you can see here ...

http://bl.ocks.org/d3noob/raw/8973028/2013-earthquake.js

I think that you've to convert your geojson data in this format and all will work!

Cesare

custom heatmap leaflet plugin

1 Answers