How to include Leaflet plugin Leaflet.heat

Leaflet Plugin Leaflet.heat: A tiny, simple and fast Leaflet heatmap plugin.

Example with 500 leaflet-marker

Example with over 5000 marker in a leaflet-geojson

Preparation

Download leaflet-heat.js and put in upload directory (e.g. /wp-content/uploads/leaflet-plugins/heat/).

Code

Use e.g. WPCode and configure this as a PHP snippet in Frontend only.

<?php
function leafext_enqueue_heatmap() {
	wp_enqueue_script(
		'heatmap',
		'/wp-content/uploads/leaflet-plugins/heat/leaflet-heat.js',
		array( 'wp_leaflet_map' ),
		1,
		false
	);
	leafext_enqueue_markercluster();
}
function leafext_heatmap_script() {
	$text = '
  <script>
	window.WPLeafletMapPlugin.push(
		function () {
			var map             = window.WPLeafletMapPlugin.getCurrentMap();
			var clmarkers       = L.markerClusterGroup();
			const addressPoints = [];
			var heat            = L.heatLayer( addressPoints ).addTo( map );
			var overlayMaps     = {
				"heatmap": heat,
				"cluster": clmarkers
			};
			var layerControl    = L.control.layers( null, overlayMaps ).addTo( map );

			// geojsons
			var geojsons = window.WPLeafletMapPlugin.geojsons;
			if (geojsons.length > 0) {
				var geocount = geojsons.length;
				for (var j = 0, len = geocount; j < len; j++) {
					var geojson = geojsons[j];
					geojson.on(
						"ready",
						function () {
							this.layer.eachLayer(
								function (layer) {
									if (layer.feature.geometry.type == "Point" ) {
										addressPoints.push( [layer.getLatLng().lat,layer.getLatLng().lng] );
										map.removeLayer( layer );
										clmarkers.addLayer( layer );
									}
								}
							);
							heat.redraw();
						}
					);
				}
			}

			// markers
			if ( WPLeafletMapPlugin.markers.length > 0 ) {
				var markercount = WPLeafletMapPlugin.markers.length;
				for (var i = 0, len = markercount; i < len; i++) {
					addressPoints.push( [WPLeafletMapPlugin.markers[i].getLatLng().lat,WPLeafletMapPlugin.markers[i].getLatLng().lng] );
					map.removeLayer( WPLeafletMapPlugin.markers[i] );
					clmarkers.addLayer( WPLeafletMapPlugin.markers[i] );
				}
			}
		}
	);
  </script>';
	return "\n" . $text . "\n";
}
function leafext_heatmap_function() {
	leafext_enqueue_heatmap();
	return leafext_heatmap_script();
}
add_shortcode( 'heatmap', 'leafext_heatmap_function' );

Shortcode

User either leaflet-marker or leaflet-geojson, not both. If you zoom out the second map, you see why.

[leaflet-map fitbounds height=300px]

[leaflet-marker lat=... lng=... ...]
[leaflet-marker lat=... lng=... ...]
…
//or
…
[leaflet-geojson src=".../file.geojson"]
[zoomhomemap]
[heatmap]