CODEWITHSUNDEEP
mapboxmapbox-gl-js
nabelekt
nabelekt

Reputation: 159

Mapbox - Disable Clustering Entirely

I have started playing around with Mapbox, and things are working as I would like, except that I have not been able to figure out how to disable clustering. Here is my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add custom icons with Markers</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

    <style>
        .marker {
            /*display: block;*/
            border: none;
            /*border-radius: 50%;*/
            cursor: pointer;
            padding: 0;
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png');
            background-size: cover;
            width: 20px;
            height: 27px;
            /*border-radius: 50%;*/
            /*cursor: pointer;*/
        }
    </style>

    <div id='map'></div>

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibmFiZWxla3QiLCJhIjoiY2p4ZXVubnQwMGVmcTN6cGU0c3JpZmM2diJ9.peecDCcSljWhChxCknv7AQ';

        var coordinates = [
            [6.73579, 78.72300],
            [2.70886, 11.51694],
            [34.05482, -57.09742],
            [-39.05019, 89.79126],
            [17.44893, 35.57014],
            [23.60105, 168.12674],
            [-4.87631, 72.99334],
            [39.7392, -104.9903],
            [39.79905,-105.78118],
            [39.80266,-105.78692],
            [39.79758,-105.78061],
            [39.80314,-105.78978],
            [39.80313,-105.78999],
            [39.80103,-105.78272],
            [39.80096,-105.78259],
            [39.80187,-105.78407],
            [39.80283,-105.78593],
            [39.79937,-105.78134],
            [39.80023,-105.78164],
            [39.80272,-105.78765],
            [39.80263,-105.78673],
            [39.80264,-105.78676],
            [39.80125,-105.78326],
            [39.7976,-105.78028],
            [39.80316,-105.7905],
        ]
        var num_coordinates = Object.keys(coordinates).length

        var geojson = {
          "type": "FeatureCollection",
          "features": []
        }

        for (var coord_ind = 0; coord_ind < num_coordinates; coord_ind++) {
          geojson.features.push({
            "type": "Feature",
            "properties": {
                "message": "Bar",
                "iconSize": [300, 300]
            },
            "geometry": {
                "type": "Point",
                "coordinates": [coordinates[coord_ind][1],    coordinates[coord_ind][0]]  // Longitude then Latitude
            }
          })
        }

        var map = new mapboxgl.Map({
            container: 'map', // container id
            style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
            // style: 'mapbox://styles/mapbox/satellite-v9', // stylesheet location
            center: [-99.66, 38.46], // starting position [lng, lat]
            zoom: 5.5 // starting zoom
        });

        map.on('load', function() {
            map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png', function(error, image) {
                if (error) throw error;
                map.addImage('pin', image);
                map.addSource("photo_locations", {
                    type: "geojson",
                    data: geojson,
                    cluster: false,
                    clusterMaxZoom: 1, // Max zoom to cluster points on
                    clusterRadius: 1 // Radius of each cluster when clustering points (defaults to 50)
                });
                map.addLayer({
                    "id": "points",
                    "type": "symbol",
                    "source": "photo_locations",
                    "layout": {
                        "icon-image": "pin",
                        "icon-size": 0.12
                    }
                });
            });
        });

    </script>

</body>
</html>

You can see that I have cluster: false set for my source. However, if you display this in your browser, the pins are still clustered together. If you zoom in on the pin to the west of Denver, you will see it separate into multiple pins.

How can I get clustering to disable entirely so that each individual pin can be seen at any zoom level? Any thoughts are appreciated. Thanks!

Upvotes: 2

Views: 3605

Answers (1)

nabelekt
nabelekt

Reputation: 159

As geografa suggested, adding "icon-allow-overlap": true does the trick. This needs to be added to the layout section of the layer. So I now have:

...
"layout": {
    "icon-image": "pin",
    "icon-size": 0.08,
    "icon-allow-overlap": true
}
...

Upvotes: 9

Related Questions