Leaflet 1.7 | GeoJSON

by jpeter06

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.2/heatmap.min.js"></script>
<script src="https://unpkg.com/[email protected]/leaflet-heatmap.js"></script>
<div id="map" class="map"></div>
<script>
var ta = `
{
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
  },
  "features": [{
    "type": "Feature",
    "properties": {

    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [-5.61, 50.11],
          [-2.73, 51.42],
          [-4.90, 51.82],
          [-4.00, 53.37],
          [-2.51, 53.39],
          [-3.22, 54.87],
          [-1.89, 55.63],
          [0.56, 52.85],
          [1.98, 52.59],
          [0.81, 51.44],
          [1.91, 51.34],
          [-5.61, 50.11]
        ]
      ]
    }
  }]
}
`;
var taj = JSON.parse(ta);
var tt =...

CSS

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

.map {
  height: 100%;
  width: 100%;
}

JavaScript

var testData = {
  max: 8, //IMPORTANTE coincide con rojo
  data: [{lat: 40.4167, lng:-3.70, count: 8},//Madrid
  {lat: 41.387, lng:2.16992, count: 6}, //Barcelona
  {lat: 36.7196, lng:-4.42002, count: 3}, //Málaga
  {lat:  37.8847, lng:-4.77915, count: 6}, //Cordoba
  {lat: 40.0321, lng:-3.60329, count: 4}, //Aranjuez
  {lat:39.8568, lng:-4.02448, count:4}, //Toledo
  ] 
};

for(var i=0;i<76; i++){
	testData.data.push({
  	lat:37 + 6 * Math.random(),
    lng: -6.5 + 6 * Math.random(),
    count: 8 * Math.random()
  })
}
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": 24,
  "maxOpacity": .8,
  // scales the radius based on map zoom
  "scaleRadius": false,
  // 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": false,
  // 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);
const map = L.map('map', {
  center: [40.4167, -3.70],
  zoom: 6,
  layers: [ heatmapLayer],
  zoomControl: false
});

heatmapLayer.setData(testData);


//L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png').addTo(map);

L.geoJson(ttj).addTo(map);