[GIS] MarkerCluster don’t work with geojson layer in leaflet

ajaxclusteringgeojsonleaflet

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.

Best Answer

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.

Related Question