Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | import { LayerProps } from "react-map-gl/maplibre";
import { theme } from "theme";
const CLUSTER_LAYER_ID = "clusters";
const UNCLUSTERED_LAYER_ID = "unclustered-points";
const CLUSTER_COUNT_LAYER_ID = "clusters-count";
const SOURCE_CLUSTERED_USERS_ID = "clustered-users";
const clusterLayer: LayerProps = {
filter: ["has", "point_count"],
id: CLUSTER_LAYER_ID,
paint: {
// step expression: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#step
"circle-color": [
"step",
["get", "point_count"],
theme.palette.primary.light,
100,
theme.palette.primary.main,
750,
theme.palette.primary.dark,
],
"circle-radius": ["step", ["get", "point_count"], 20, 100, 30, 750, 40],
},
source: SOURCE_CLUSTERED_USERS_ID,
type: "circle",
};
const clusterCountLayer: LayerProps = {
filter: ["has", "point_count"],
id: CLUSTER_COUNT_LAYER_ID,
layout: {
"text-field": "{point_count_abbreviated}",
"text-size": 12,
"text-font": ["Inter 28pt SemiBold"],
},
paint: {
"text-color": [
"step",
["get", "point_count"],
theme.palette.getContrastText(theme.palette.primary.light),
100,
theme.palette.getContrastText(theme.palette.primary.main),
750,
theme.palette.getContrastText(theme.palette.primary.dark),
],
},
source: SOURCE_CLUSTERED_USERS_ID,
type: "symbol",
};
const unclusteredPointLayer: LayerProps = {
filter: ["!", ["has", "point_count"]],
id: UNCLUSTERED_LAYER_ID,
layout: {
"icon-image": "user-pin",
"icon-anchor": "bottom",
"icon-allow-overlap": true,
},
paint: {
"icon-color": [
"case",
["boolean", ["feature-state", "selected"], false],
theme.palette.secondary.main,
["==", ["get", "hasCompletedProfile"], true],
theme.palette.primary.main,
theme.palette.grey[500],
],
"icon-halo-width": 2,
"icon-halo-color": [
"case",
["boolean", ["feature-state", "selected"], false],
theme.palette.secondary.main,
["==", ["get", "hasCompletedProfile"], true],
theme.palette.primary.main,
theme.palette.grey[500],
],
"icon-halo-blur": 2,
},
source: SOURCE_CLUSTERED_USERS_ID,
type: "symbol",
};
export {
CLUSTER_COUNT_LAYER_ID,
CLUSTER_LAYER_ID,
clusterCountLayer,
clusterLayer,
SOURCE_CLUSTERED_USERS_ID,
UNCLUSTERED_LAYER_ID,
unclusteredPointLayer,
};
|