Return to Question

appended answer 207775 as supplemental

edited Aug 22, 2016 at 1:24

65.5k
29
115
353

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> <>script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <>script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script> <>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); </script> </body>

But I want to Cluster only Fotografie layer which is point layer with displayed photo when clicked.

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> <>script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <>script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script> <>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); </script> </body>

But I want to Cluster only Fotografie layer which is point layer with displayed photo when clicked.

Code formatting + syntax highlighting

Source Link

edited Aug 21, 2016 at 13:38

ghybs

7.3k
23
26

 link rel="stylesheet" href="MarkerCluster.css" /> link rel="stylesheet" href="MarkerCluster.Default.css" /> script src="leaflet.markercluster-src.js">

<link rel="stylesheet" href="MarkerCluster.css" /> <link rel="stylesheet" href="MarkerCluster.Default.css" /> <script src="leaflet.markercluster-src.js"></script>

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'); });

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'); });

 link rel="stylesheet" href="MarkerCluster.css" /> link rel="stylesheet" href="MarkerCluster.Default.css" /> script src="leaflet.markercluster-src.js">

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'); });

<link rel="stylesheet" href="MarkerCluster.css" /> <link rel="stylesheet" href="MarkerCluster.Default.css" /> <script src="leaflet.markercluster-src.js"></script>

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'); });

Source Link

asked Aug 21, 2016 at 10:05

bass

MarkerCluster don't work with geojson layer in leaflet

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">

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.