I want to use the Leaflet markerCluster plugin with GeoJSON points pulled from PostGIS. I think the markerCluster plugin needs to have all the data loaded first before it can cluster the points. How do I change the $.GetJSON method to include the markerCluster functionality? I've included a snippet of the code I am using with the markerCluster lines commented out:
//var markers = new L.markerClusterGroup();
// Define point symbol
var lampfaultsdata_Icon = L.icon({
iconUrl: 'icons/lampfaultsIcon.png',
iconSize: [20, 30],
iconAnchor: [12, 28],
popupAnchor: [0, -25]
});
// Define GeoJSON data
var lampfaultsdata = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: lampfaultsdata_Icon,
title: feature.properties.assetname
});
},
onEachFeature: function (feature, layer) {
if (feature.properties) {
var content = '<table border="1" style="border-collapse:collapse;" cellpadding="2">' +
'<tr>' + '<th>Name</th>' + '<td><b>' + feature.properties.assetname + '</b></td>' + '</tr>' +
'<tr>' + '<th>Date reported</th>' + '<td>' + feature.properties.faultdate + '</td>' + '</tr>' +
'<tr>' + '<th>Fault Status</th>' + '<td>' + feature.properties.faultstatus + '</td>' + '</tr>' +
'<tr>' + '<th>View Map</th>' + '<td>' + feature.properties.lamplocation + '</td>' + '</tr>' +
'<table>';
layer.bindPopup(content);
}
}
});
// Get GeoJSON data from PostGIS
$.getJSON("layers/lamp_faults_geojson.php", function (data) {
lampfaultsdata.addData(data);
//markers.addLayer(lampfaultsdata);
//map.addLayer(markers);
}).complete(function () {
map.fitBounds(lampfaultsdata.getBounds());
});
In this case I am wanting to show faulty street lamps and I think I need to do something like this but can't work out where to fit it in:
lampfaultsdata.on('data:loaded', function () {
markers.addLayer(lampfaultsdata);
map.addLayer(markers);
});
lampfaultsdata.on('data:loaded', function () {
map.fitBounds(lampfaultsdata.getBounds());
}.bind());
Any pointers gratefully received.