CODEWITHSUNDEEP
javascripthtmlcssjsonmapbox
Dominik
Dominik

Reputation: 121

How can I color each cluster differently based on geoJson feature?

I have MapBox with Voronoi diagrams and I want to color each polygon based on cluster it belongs to.

Here is my JSFiddle: https://jsfiddle.net/re12chwa/2/

I tried to use Case but it doesn't work.

        "fill-color": [
          "case",
          ['==', ['get', "Cluster"], "31N"], "#00ffff",
          ['==', ['get', "Cluster"], "32"], "#ff00ff",
          ['==', ['get', "Cluster"], "33"], "#0000ff",
          ['==', ['get', "Cluster"], "34"], "#ffff00",
          ['==', ['get', "Cluster"], "35"], "#00ff00",
          '#ea0a8e '
        ]


      {
        type: "Feature",
        properties: {
          Site: "zahod",
          Cluster: "31N",
          "": ""
        },
        geometry: {
          type: "Point",
          coordinates: [16.552992, 43.521409]
        }

Any help will be great.

Upvotes: 1

Views: 107

Answers (1)

Lukash
Lukash

Reputation: 91

There is no IDs in voronoiPolygons, so the layer won't recognize them (it prints default color "#ea0a8e").

Solution for this is adding IDs to voronoiPolygons as property from points.

for (i = 0; i < voronoiPolygons["features"].length; i++) {
    voronoiPolygons["features"][i].properties = { "id": points["features"][i]["properties"]["Cluster"] }
}

And filling color by getting id.

"fill-color": [
    "case",
    ["==", ["get", "id"], "31N"], "#00ffff",
    ["==", ["get", "id"], "32"], "#ff00ff",
    ["==", ["get", "id"], "33"], "#0000ff",
    ["==", ["get", "id"], "34"], "#ffff00",
    ["==", ["get", "id"], "35"], "#00ff00",
    "#ea0a8e"
]

Here is working example: https://jsfiddle.net/0k7sw9fc/

Upvotes: 1

Related Questions