4

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.

2
  • 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
    Commented Aug 21, 2016 at 13:42
  • BTW, does it work at least with an L.layerGroup() instead of L.markerClusterGroup()?
    – ghybs
    Commented Aug 21, 2016 at 13:53

1 Answer 1

4

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.

1
  • 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
    Commented Aug 23, 2016 at 21:14

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