1

The following code displays clusters correctly. However, it also displays all the points as well as the clusters, which I don't want. What have I done wrong? Apologies that I cannot simplify the example very much - it's generated code, not handwritten.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="css/leaflet.css" />
    <link rel="stylesheet" type="text/css" href="css/qgis2web.css">
    <link rel="stylesheet" href="css/label.css" />
    <link rel="stylesheet" href="css/MarkerCluster.css" />
    <link rel="stylesheet" href="css/MarkerCluster.Default.css" />
        <script src="js/leaflet-hash.js"></script>
        <script src="js/label.js"></script>
        <script src="js/Autolinker.min.js"></script>
    <script src="./resources/Autolinker.min.js"></script>
        <script src="js/leaflet.markercluster.js"></script>
    <title></title>
  </head>
  <body>
    <div id="map">

    </div>

        <script src="data/json_point.js"></script>
        <script>
        var map = L.map('map', {
            zoomControl:true, maxZoom:28, minZoom:1
        }).fitBounds([[47.7952180701,1.50842980734],[52.7080065978,20.0920555596]]);
        var hash = new L.Hash(map);
        var additional_attrib = '<a href="https://github.com/tomchadwin/qgis2web" target ="_blank">qgis2web</a>';
        var feature_group = new L.featureGroup([]);
        var bounds_group = new L.featureGroup([]);
        var raster_group = new L.LayerGroup([]);
        var layerOrder = new Array();
        function stackLayers() {
            for (index = 0; index < layerOrder.length; index++) {
                map.removeLayer(layerOrder[index]);
                map.addLayer(layerOrder[index]);
            }
        }
        function restackLayers() {
            for (index = 0; index < layerOrder.length; index++) {
                layerOrder[index].bringToFront();
            }
        }
        map.on('overlayadd', restackLayers);
        layerControl = L.control.layers({},{},{collapsed:false});
        function pop_point(feature, layer) {
            var popupContent = '<table><tr><th scope="row">osm_id</th><td>' + (feature.properties['osm_id'] !== null ? Autolinker.link(String(feature.properties['osm_id'])) : '') + '</td></tr><tr><th scope="row">name</th><td>' + (feature.properties['name'] !== null ? Autolinker.link(String(feature.properties['name'])) : '') + '</td></tr><tr><th scope="row">type</th><td>' + (feature.properties['type'] !== null ? Autolinker.link(String(feature.properties['type'])) : '') + '</td></tr><tr><th scope="row">population</th><td>' + (feature.properties['population'] !== null ? Autolinker.link(String(feature.properties['population'])) : '') + '</td></tr></table>';
            layer.bindPopup(popupContent);
        }

        function doStylepoint() {
            return {
                radius: 2.0,
                fillColor: '#843768',
                color: '#000000',
                weight: 0.0,
                opacity: 1.0,
                dashArray: '',
                fillOpacity: 1.0
            }
        }
        function doPointToLayerpoint(feature, latlng) {
            return L.circleMarker(latlng, doStylepoint())
        }
        var json_pointJSON = new L.geoJson(json_point, {
            onEachFeature: pop_point, 
            pointToLayer: doPointToLayerpoint
            });
        layerOrder[layerOrder.length] = json_pointJSON;

        var cluster_grouppointJSON = new L.MarkerClusterGroup({showCoverageOnHover: false});
        cluster_grouppointJSON.addLayer(json_pointJSON);

        bounds_group.addLayer(json_pointJSON);
        cluster_grouppointJSON.addTo(map);
        raster_group.addTo(map);
        //feature_group.addTo(map);
        stackLayers();
    </script>


  </body>
</html>
2

The very last instruction stackLayers() adds all layers in layerOrder array to the map.

Since json_pointJSON is added into layerOrder instead of the cluster_grouppointJSON it is embedded in, both Layer Groups appear on the map at initialization. If you zoom in until clustering stops, and zoom back out, the circle markers disappear as expected.

If your code generation tool can register cluster_grouppointJSON into layerOrder instead of json_pointJSON, it would solve your issue.

Demo: http://plnkr.co/edit/QOIwq5G5qSQjI8iQkYTb?p=preview

Note: strangely, I do not see any script include of leaflet.js in your page, maybe you have stripped it out by mistake?

  • Ah, of course. Let me test that and confirm - it sounds like you are definitely right. stackLayers() is present to try to preserve the z-index of the layers in the map. I'll see if I can get it to add the cluster group to add to layerOrder instead of the layer itself, as you suggest. – Tom Chadwin Jan 6 '16 at 11:51
  • Many thanks - 100% correct, and extremely prompt and helpful. In the code above, adding cluster_grouppointJSON to layerOrder instead of pointJSON solves the issue. – Tom Chadwin Jan 6 '16 at 12:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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