I am using leaflet-markercluster plugin for cluster my point data. I already loaded my geojson data named as 'street' into map. this data having around 40 points with their respective attributes. I want to cluster these points in leaflet map. But even markers are not showing in my map. Please help me to find out the error. My code is here:
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var street = {...my_geojson_data...}
var s_light_style = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
var markers = L.markerClusterGroup();
L.geoJSON(street, {
onEachFeature : function(feature, layer){
var popupContent = '<h4 class = "text-primary">Street Light</h4>' +
'<div class="container"><table class="table table-striped">' +
'<thead><tr><th>Properties</th><th>Value</th></tr></thead>' +
'<tbody><tr><td> Name </td><td>'+ feature.properties.Name +'</td></tr>' +
'<tr><td>Elevation </td><td>' + feature.properties.ele +'</td></tr>' +
'<tr><td> Power (watt) </td><td>' + feature.properties.Power_Watt + '</td></tr>' +
'<tr><td> Pole Height </td><td>' + feature.properties.pole_hgt + '</td></tr>' +
'<tr><td> Time </td><td>' + feature.properties.time + '</td></tr>';
layer.bindPopup(popupContent)
},
pointToLayer: function (feature, latlng) {
return markers.addLayer(L.marker(latlng))
}
}).map.addTo(markers);
replace the code by
L.geoJSON(street, {
onEachFeature : function(feature, layer){
var popupContent = '<h4 class = "text-primary">Street Light</h4>' +
'<div class="container"><table class="table table-striped">' +
'<thead><tr><th>Properties</th><th>Value</th></tr></thead>' +
'<tbody><tr><td> Name </td><td>'+ feature.properties.Name +'</td></tr>' +
'<tr><td>Elevation </td><td>' + feature.properties.ele +'</td></tr>' +
'<tr><td> Power (watt) </td><td>' + feature.properties.Power_Watt + '</td></tr>' +
'<tr><td> Pole Height </td><td>' + feature.properties.pole_hgt + '</td></tr>' +
'<tr><td> Time </td><td>' + feature.properties.time + '</td></tr>';
layer.bindPopup(popupContent)
},
pointToLayer: function (feature, latlng) {
return markers.addLayer(L.circleMarker(latlng, s_light_style))
}
})
map.addLayer(markers);
In above code i specify the map.addTo(markers). But actually I have to replace "addTo" keyword with "addLayer". I have to add the layer. In this way I solved the geojson markerCluster problem.