markercluster

I’m using this plugin with markercluster and zoomhome like following. It works for me. I’m using php to get marker latitudes, longitudes, text from a mysql database.

See https://github.com/Leaflet/Leaflet.markercluster:
> MarkerCluster.css
> MarkerCluster.Default.css
> leaflet.markercluster.js
Copy these three files to the directory “/cluster”.

See https://github.com/torfsen/leaflet.zoomhome:
Copy leaflet.zoomhome.min.js and leaflet.zoomhome.css from the dist
to the directory “/leaflethome”.

Put in your function.php following code:

function load_markercluster(){
	wp_enqueue_script('markercluster','/cluster/leaflet.markercluster-src.js',array('leaflet_js','leaflet_map_construct'));
	wp_enqueue_style('clusterstyle','/cluster/MarkerCluster.css',array('leaflet_stylesheet'));
	wp_enqueue_style('clusterdefaultstyle','/cluster/MarkerCluster.Default.css',array('leaflet_stylesheet'));
	wp_enqueue_style('homestyle','/leaflethome/leaflet.zoomhome.css',array('leaflet_stylesheet'));
	wp_enqueue_script('leaflethome','/leaflethome/leaflet.zoomhome.min.js',array('leaflet_js','leaflet_map_construct'));
}
add_action('wp_enqueue_scripts','load_markercluster');

Create a file /path/to/cluster.php:

<?php
echo "<script>
WPLeafletMapPlugin.add(function () {
	previous_map = WPLeafletMapPlugin.getCurrentMap();
	var clmarkers = L.markerClusterGroup({
		maxClusterRadius: function(zoom) { return 50; },
		disableClusteringAtZoom: 14,
	});
	for (var i = 0; i < WPLeafletMapPlugin.markers.length; i++) {
		var a = WPLeafletMapPlugin.markers[i];
		clmarkers.addLayer(a);
		previous_map.removeLayer(a);
	}
	clmarkers.addTo( previous_map );
	WPLeafletMapPlugin.markers.push( clmarkers );
	//
	var zoomHome = L.Control.zoomHome();
	zoomHome.addTo(previous_map);
}); // end add function
</script>";
?>

Put on your target page: (I’m using the “Insert PHP”-Plugin.)

[leaflet-map height=500px zoomcontrol="0"]

[insert_php]
$minlat=999999;$maxlat=-999999;$minlon=999999;$maxlon=-999999;
$markers=array();
$markers[]=array('lon' => '....','lat' => '...','text' => 'any text');
$markers[]=array...
....
foreach ($markers as $marker) {
    $minlat= $minlat < $marker['lat'] ? $minlat : $marker['lat'];
    $maxlat= $maxlat > $marker['lat'] ? $maxlat : $marker['lat'];
    $minlon= $minlon < $marker['lon'] ? $minlon : $marker['lon'];
    $maxlon= $maxlon > $marker['lon'] ? $maxlon : $marker['lon'];
    echo '[leaflet-marker lat='.$marker['lat'].' lng='.$marker['lon']."]";
    echo $marker['text'];
    echo "[/leaflet-marker]";
}
echo '[leaflet-line latlngs="'.$minlat.','.$minlon.';'.$maxlat.','.$maxlon.'" fitbounds=true stroke=0]';
include "/path/to/cluster.php";
[/insert_php]

• This topic was modified 7 years, 2 months ago by Anonymous User 15652998.
• This topic was modified 7 years, 2 months ago by James Huff.