11

I am using the mapBoxGL version 1.0 JS library and I am using the clustered map functionality. But I noticed that on certain zoom levels, some of the symbols in a layer would disappear and it will then reappear again on other zoom levels. I cannot seem to figure out what is wrong with the configuration. I am enclosing the images and notice that the cluster total size also does not correspond to the total symbols. enter image description here

enter image description here

enter image description here

map.addSource("dayplaces", {
    type: "geojson",
    // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
    // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
    data: geojson,
    cluster: true,
    clusterMaxZoom: 12, // Max zoom to cluster points on
    clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});

map.addLayer({
    id: "clusters",
    type: "circle",
    source: "dayplaces",
    filter: ["has", "point_count"],
    paint: {
        // Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
        // with three steps to implement three types of circles:
        //   * Blue, 20px circles when point count is less than 100
        //   * Yellow, 30px circles when point count is between 100 and 750
        //   * Pink, 40px circles when point count is greater than or equal to 750
        "circle-color": [
            "step",
            ["get", "point_count"],
            "#51bbd6",
            100,
            "#f1f075",
            750,
            "#f28cb1"
        ],
        "circle-radius": [
            "step",
            ["get", "point_count"],
            20,
            100,
            30,
            750,
            40
        ]
    }
});

map.addLayer({
    id: "cluster-count",
    type: "symbol",
    source: "dayplaces",
    filter: ["has", "point_count"],
    layout: {
        "text-field": "{point_count_abbreviated}",
        "text-font": ["Open Sans Semibold"],
        "text-size": 12,
        "text-allow-overlap": true
    }
});

// https://svgtopng.com/
// https://www.flaticon.com/free-icon/map-marker_34468
map.loadImage('https://cdn.glitch.com/0a178325-3429-4356-9e0e-c6aed80fea14%2F34468green.png?v=1560084647010', function(error, image) {
    if (!error) {
        map.addImage('pin', image);
        map.addLayer({
            id: "unclustered-point",
            type: "symbol",
            source: "dayplaces",
            filter: ["!", ["has", "point_count"]],
            "layout": {
                "visibility": "visible",
                "icon-image": "pin",
                "icon-size": 0.08,
                "icon-allow-overlap": true,
                "text-field": ["get", "order"],
                "text-font": ["Open Sans Semibold"],
                "text-allow-overlap": true,
                "text-size": 11,
                "text-offset": [0, 0.2],
                "text-anchor": "bottom"
            }
        });
    } else {
        console.log("MAP LOAD IMAGE ERROR:" + error);
    }

});



// inspect a cluster on click
map.on('click', 'clusters', function(e) {
    var features = map.queryRenderedFeatures(e.point, {
        layers: ['clusters']
    });
    var clusterId = features[0].properties.cluster_id;
    map.getSource('dayplaces').getClusterExpansionZoom(clusterId, function(err, zoom) {
        if (err)
            return;

        map.easeTo({
            center: features[0].geometry.coordinates,
            zoom: zoom
        });
    });
});
MeltedPenguin
  • 787
  • 7
  • 17
dickyj
  • 1,830
  • 1
  • 24
  • 41
  • I'm having the same issue right now with a very simple setup and no clusters. At some zoom levels, some icons are not displaying, seemingly at random. – Brachamul Oct 30 '19 at 12:37
  • Me too on v1.10.1. Have confirmed the issue does not happen when rendering the layer as circles, only when symbols are used. In my case, PNG images. It's almost like there is a limit to how many can be displayed at once – Jon Wyatt Aug 14 '20 at 10:02

1 Answers1

4

In the documentation for working with large GeoJSON sources in Mapbox GL JS, it states that:

Mapbox GL GeoJSON sources are turned into Mapbox vector tiles on-the-fly by the client

During this process, simplification takes place to increase the performance. This simplification can be controlled using the tolerance property when adding a source. The Mapbox documentation for tolerance is as follows:

Optional number. Defaults to 0.375. Douglas-Peucker simplification tolerance (higher means simpler geometries and faster performance).

Therefore, to stop the simplification from taking place, you must set tolerance: 0 when adding the source. Example of adding a GeoJSON source with no simplification:

this.map.addSource(`example-source`, <any>{
  type: 'geojson',
  data: exampleData,
  tolerance: 0
});

This solved the issue for me, hope it helps.

Max Dalton
  • 100
  • 2
  • 10