Add geojson to the readme? about leaflet.heat

[Jmuccigr]

First a function to convert the geojson to a list of coords:

geoJson2heat = function(geojson) {
return geojson.features.map(function(feature) {
return [parseFloat(feature.geometry.coordinates[1]), parseFloat(feature.geometry.coordinates[0])];
});
}

Now create your map as usual (not shown). Then add the heat map as a layer, where geojson_data is the variable declared by the .js file that contains the geojson data:

var geoData = geoJson2heat(geojson_data, 1);

var heatMap = new L.heatLayer(geoData,{radius: 40, blur: 25, maxZoom: 17});

map.addLayer(heatMap);

[sig-pnrnm]

Sorry, but in fact, it was really simple.
Consider that we have a php file obs.php that generate our geojson data :

geoJson2heat = function(geojson) {
return geojson.features.map(function(feature) {
return [parseFloat(feature.geometry.coordinates[1]), parseFloat(feature.geometry.coordinates[0])];
});
}

function addObsToMap(obs, map) {
var geoData = geoJson2heat(obs, 1);
var heatMap = new L.heatLayer(geoData,{radius: 50, blur: 25, maxZoom: 17});
map.addLayer(heatMap);
}

$.getJSON("obs.php", function(obs) { addObsToMap(obs, map); });

In case this is useful to others! ;)

[tomchadwin]

I'd love to see this fully implemented, for qgis2web.

[crosspolar]

World you share your solution here?

[sig-pnrnm]

Sorry, but I try to do it with a GeoJson created by a JQuery request, with no success (but i am a newbie in Javascript).
My GeoJson come from this request :
$.getJSON("geojson_7j.php", function(obs) { addObsToMap(obs, map); });
And its contents are as follows:
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-0.341547,48.528597]},"properties":{ ... ...
As I get lost in the variable names, would it be possible to help me adapt the code proposed previously?
In particular, I do not understand where the geojson_data variable is defined.

[Jmuccigr]

I simply have a file that is a script that creates a variable containing the geojson. I load that script and so create the variable. So it starts out:

var geojson_data =  {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
…

[sig-pnrnm]

Problem is that my geojson is created with PHP from a query on PostGreSQL database
(with echo json_encode($geojson, JSON_NUMERIC_CHECK);)
Do you think it is a good idea to add var geojson_data = dynamically with another PHP file/code ?
Like this :

<?php 
ob_start();
include('geojson_7j.php');
$geojson = ob_get_contents();
ob_end_clean();
echo 'var geojson_data = '.$geojson;
 ?>

[Jmuccigr]

I haven't gotten my heat maps to work with geojson from a mysql database, though I haven't tried too hard either.

[Jmuccigr]

Easy for you! ;-)

But thanks, that got it working for me. Not quite sure what I was doing wrong, but all better now.

PS I did have one problem with my sql query, in that it was returning null values in some cases (because I forgot to include that in my WHERE clause when selecting the data from the database). It would be great if leaflet.heat would ignore null values instead of failing. (I can put this as a separate request, if needed.)

[eliasm123]

When I try to run the code you wrote @Jmuccigr , I get an Uncaught TypeError: Cannot read property 'map' of undefined at geoJson2heat. I am still relatively new to Javascript and coding. Here's the relevant code:

`var crime2010_points = L.geoJSON(crime2010_points)

	geoJson2heat = function(crime2010_points) {
		 return crime2010_points.features.map(function(feature) {                        
                       return [parseFloat(feature.geometry.coordinates[1]), 
                            parseFloat(feature.geometry.coordinates[0])];
		});
	}

	var map = L.map('map').setView([41.75437, -72.71202], 9.5); 
	
		 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		attribution: '&copy; <a 
                   href="http://osm.org/copyright">OpenStreetMap</a> contributors',
		maxZoom: 20
		}).addTo(map);

	var geoData = geoJson2heat(crime2010_points, 1);

	var heatMap = new L.heatLayer(geoData, {radius: 40, blur: 25, maxZoom: 17});

	map.addLayer(heatMap);`

[Jmuccigr]

@eliasm123 Not sure I can be much help. You're loading leaflet first, right?

[eliasm123]

@Jmuccigr Nevermind, I figured it out. Your code works, you just have to change the file extension of the geojson to js.