Lukas Gund
Lukas Gund

Reputation: 711

Use Mapbox layer properties in cluster layer

I´ve a react application and use MapBox to display points and clusters on the world map. I use the properties of the source inside the "normal" layer. Now I also need to get the properties, or just if a property is set in the source in the cluster layer too.

I´ve using useRef to create a mapbox element. Then I add my locations with the addSource method:

        map.current
            // Add locations source
            .addSource("locations", {
                type: "geojson",
                cluster: true,
                clusterRadius: 15,
                clusterMaxZoom: 14,
                clusterProperties: {
                    // has_orders: ["any", false, ["==", ["get", "has_orders"], "false"]]
                    // has_orders: ["==", ["get", "has_orders"], "false"]
                    has_orders: ["==", "true", ""]
                },
                data: {
                    "type": "FeatureCollection",
                    "features": parseLocationServiceToGeoJson(locations)
                }
            });

After that I can add the "normal" Layer to the mapbox element:

        map
            .current
            .addLayer({
                id: LOCATIONS_LAYER_ID,
                type: "circle",
                source: "locations",
                filter: ['!', ['has', 'point_count']],
                paint: {
                    "circle-color": [
                        'match',
                        ['get', 'has_orders'],
                        'true',
                        "#fb4242",
                        'false',
                        "#2cbe66",
                        /* other */ "#4264fb"
                    ],
                    "circle-radius": 6,
                    "circle-stroke-width": 2,
                    "circle-stroke-color": "#fff"
                }
            })

And last but not least the cluster layer:

        map
            .current
            // Display cluster
            .addLayer({
                id: LOCATIONS_LAYER_CLUSTER_ID,
                type: "circle",
                source: "locations",
                filter: ['has', 'point_count'],
                paint: {
                    "circle-color": [
                        'match',
                        ['get', 'has_orders'],
                        'true',
                        "#fb4242",
                        'false',
                        "#2cbe66",
                        /* other */ "#4264fb"
                    ],
                    "circle-radius": 10,
                    "circle-stroke-width": 2,
                    "circle-stroke-color": "#fff",
                }
            })
            .addLayer({
                id: LOCATIONS_LAYER_CLUSTER_COUNT_ID,
                type: "symbol",
                source: "locations",
                filter: ['has', 'point_count'],
                layout: {
                    'text-field': ['get', 'point_count'],
                    'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
                    'text-size': 12,
                },
                paint: {
                    'text-color': "#fff"
                }
            })

Upvotes: 0

Views: 44

Answers (0)

Related Questions