I have created gejson layers and I want to use MarkerCluster option in one of them. But I don't know what am I doing wrong and where in my code is a problem. I tried something like this:
Scripts:
<link rel="stylesheet" href="MarkerCluster.css" />
<link rel="stylesheet" href="MarkerCluster.Default.css" />
<script src="leaflet.markercluster-src.js"></script>
And code with the layer which should MarkerClustered:
var controlLayers = L.control.layers().addTo(map);
$.getJSON("data/Fotografie.geoJSON", function(geojson) {
var Fotografie = L.geoJson(geojson, {
pointToLayer: function(feature, latLng) {
return new L.Marker(latLng, {
icon: new myIcon({
iconUrl: 'icons/accessdenied.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -37]
})
})
},
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.Name, {
maxWidth: "auto"
}) //popup dostosowany do wielkosci zdjecia http://stackoverflow.com/questions/38170366/leaflet-adjust-popup-to-picture-size
}
});
var clusters = L.markerClusterGroup();
clusters.addLayer(Fotografie);
map.addLayer(clusters);
controlLayers.addOverlay(geojsonLayer, 'Fotografie');
});
When I put my code like this the "Fotografie" layer don't even show up. Help.
It's the whole code. I don't know which version of MasterCluster I have.
div id="map" style="width:1000px;height:800px"> link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css"/> link rel="stylesheet" href="MarkerCluster.css" /> link rel="stylesheet" href="MarkerCluster.Default.css" /> script src="leaflet.markercluster-src.js"> script src="http://code.jquery.com/jquery-1.12.0.min.js"> script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"> script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"> script type="text/javascript"> var map = L.map('map'); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map); map.attributionControl.addAttribution("Dane: OpenStreetMap"); var controlLayers = L.control.layers().addTo(map); $.getJSON("data/Zabudowa.geoJSON", function (geojson) { var geojsonLayer = L.geoJson(geojson, { style: function (feature) { return { 'weight': 0, 'fillColor': 'brown', 'fillOpacity': 1 } }, onEachFeature: function( feature, layer ){ var popupText = "Numer obiektu: " + feature.properties.OBJECTID + "
Sposob uzytkowania: " + feature.properties.type + "
More info"; layer.bindPopup(popupText); } }).addTo(map); controlLayers.addOverlay(geojsonLayer, 'Zabudowa'); }); $.getJSON("data/Drogi.geoJSON", function (geojson) { var geojsonLayer = L.geoJson(geojson, { style: function (feature) { return { 'weight': 1, 'color': 'red', 'fillOpacity': 0 } }, onEachFeature: function( feature, layer ){ layer.bindPopup ("Nazwa ulicy: " + feature.properties.name + "
Dopuszczalna predkosc: " + feature.properties.maxspeed + "
Numer drogi: " + feature.properties.ref) } }); controlLayers.addOverlay(geojsonLayer, 'Drogi'); }); var myIcon = L.Icon.extend({ iconUrl: 'icons/cemetery-24.png' }); $.getJSON("data/miejsca_pamieci.geoJSON", function (geojson) { var geojsonLayer = L.geoJson(geojson, { pointToLayer: function (feature, latLng) { return new L.Marker(latLng, { icon: new myIcon({ iconUrl: 'icons/cemetery-24.png', iconSize: [24, 24], iconAnchor: [12, 24], popupAnchor: [0, -24] }) }) }, onEachFeature: function( feature, layer ){ layer.bindPopup ("Opis: " + feature.properties.Opis) } }); controlLayers.addOverlay(geojsonLayer, 'Miejsca_pamieci'); }); var myIcon = L.Icon.extend({ iconUrl: 'icons/accessdenied.png' }); $.getJSON("data/Fotografie.geoJSON", function (geojson) { var geojsonLayer = L.geoJson(geojson, { pointToLayer: function (feature, latLng) { return new L.Marker(latLng, { icon: new myIcon({ iconUrl: 'icons/accessdenied.png', iconSize: [32, 37], iconAnchor: [16, 37], popupAnchor: [0, -37] }) }) }, onEachFeature: function( feature, layer ){ layer.bindPopup (feature.properties.Name, { maxWidth: "auto"})//popup dostosowany do wielkosci zdjecia http://stackoverflow.com/questions/38170366/leaflet-adjust-popup-to-picture-size } }).addTo(map); controlLayers.addOverlay(geojsonLayer, 'Fotografie'); }); map.setView([53.07908, 18.22422],12); L.control.scale().addTo(map);
But I want to Cluster only Fotografie layer which is point layer with displayed photo when clicked.
myIcon
for instance), and specify which versions of Leaflet and Leaflet.markercluster you use. Ideally also reproduce your issue on Plunker, JSBin or JSFiddle. BTW, your last line withgeojsonLayer
seems unrelated.L.layerGroup()
instead ofL.markerClusterGroup()
?