0

I have MapBox map with clustered-points of cities.

On these clusters, I display the number of address by cities with the clusterProperties "sumAddress: ["+", ["get", "nbAdresses"]]".

If y want display the number of cities dynamically, it doesn't work:

    layout: {
          "text-field": "{sumAddress}",
          "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
          "text-size": 10,
        },

And if I replace "{sumAddress}" by string number "1", it's correctly displayed!

Why does the code work with clusters and not with unclustered points?

Complete code:

    this.map.on("style.load", () => {

      this.map.addSource("cities", {
        type: "geojson",
        data: this.clustersCoords,
        cluster: true,
        clusterMaxZoom: 14,
        clusterRadius: 50,
        clusterProperties: {
          sumAddress: ["+", ["get", "nbAdresses"]], // number of address by cities
        },
      });

      this.map.addLayer({
        id: "clusters",
        type: "circle",
        source: "cities",
        filter: ["has", "point_count"],
        paint: {
          "circle-color": [
            "step",
            ["get", "point_count"],
            "#ef9a9a",
            100,
            "#ea524f",
            750,
            "#b83523",
          ],
          "circle-radius": [
            "step",
            ["get", "point_count"],
            20,
            100,
            30,
            750,
            40,
          ],
        },
      });

      this.map.addLayer({
        id: "cluster-label",
        type: "symbol",
        source: "cities",
        filter: ["has", "point_count"],
        layout: {
          "text-field": "{sumAddress}", // correctly displayed on the clusters
          "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
          "text-size": 12,
        },
        paint: {
          "text-color": "#fff",
        },
      });

      // final point, circle displayed but not the symbol whith the dynamic text-field:

      this.map.addLayer({
        id: "unclustered-point",
        type: "circle",
        source: "cities",
        filter: ["!", ["has", "point_count"]],
        paint: {
          "circle-color": "#f6ccd2",
          "circle-radius": 14,
          "circle-stroke-width": 2,
          "circle-stroke-color": "#fff",
        },
      });

      this.map.addLayer({
        id: "uncluster-label",
        type: "symbol",
        source: "cities",
        filter: ["!", ["has", "point_count"]],
        layout: {
          "text-field": "{sumAddress}", // not displayed, why ?
          "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
          "text-size": 10,
        },
        paint: {
          "text-color": "#000",
        },
      });
    });
gcbox999
  • 147
  • 8

0 Answers0