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.

  • There does not seem to be any particular issue in the code you posted. You should probably share more code (you do not show what is 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 with geojsonLayer seems unrelated. – ghybs Aug 21 '16 at 13:42
  • BTW, does it work at least with an L.layerGroup() instead of L.markerClusterGroup()? – ghybs Aug 21 '16 at 13:53
up vote 2 down vote accepted

From your above additional code, it looks like you are loading Leaflet.markercluster script before Leaflet script:

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

You should rather load it after:

<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="leaflet.markercluster-src.js">

You should learn to use your browser console (on Windows / Linux browsers, press F12; on Mac OS browsers, press Command ⌘+Option ⌥+i) to look for potential errors.

In your case, I suspect there should be something like "ReferenceError: L is not defined" due to Leaflet.markercluster trying to attach some code to Leaflet's L namespace, but could not find it because it is not loaded yet.

  • Thanks for advices - I'm still green at it. I have replaced scripts as You told and I found out to remove .addTo(map) from code. That helps after all:) – bass Aug 23 '16 at 21:14

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.