I want to show the points and to write data inside. Problem is that the data (numbers) are shown for the points behind instead of the ones in front.
I would also like for smaller number circles to disappear on zoom lvl xx.
This is my code:
useEffect(() => {
if (mapRef.current) return;
mapboxgl.accessToken =
"pk.eyJ1IjoibHVrYXZpNDQiLCJhIjoiY2xieGlkMDl1MDdhbTNvcm1sbThoa2N3ZSJ9.xRmYD6lKyJrGlwUUrzHZFA";
mapRef.current = new mapboxgl.Map({
container: mapContainerRef.current,
style: "mapbox://styles/mapbox/light-v10",
center: [lng, lat],
zoom: zoom,
});
mapRef.current.on("load", async () => {
const coordinatesPromises = institutions.map((institution) =>
getCoordinates(institution.address)
);
const coordinates = await Promise.all(coordinatesPromises);
const geojsonData = {
type: "FeatureCollection",
features: institutions.map((institution, index) => ({
type: "Feature",
properties: {
institutionName: institution.name,
site: institution.address,
employees: institution.employees,
type: institution.type,
network: institution.network,
category: institution.category,
speciality: institution.speciality,
},
geometry: {
type: "Point",
coordinates: [coordinates[index]?.lng, coordinates[index]?.lat],
},
})),
};
mapRef.current.addSource("points", {
type: "geojson",
data: geojsonData,
});
mapRef.current.addLayer({
id: "circle",
type: "circle",
source: "points",
paint: {
"circle-color": "#82c5f1",
"circle-radius": [
"interpolate",
["linear"],
["get", "employees"],
0,
5,
100,
10,
200,
15,
500,
20,
1000,
25,
2000,
30,
],
"circle-stroke-width": 2,
"circle-stroke-color": "#ffffff",
"circle-opacity": [
"interpolate",
["linear"],
["zoom"],
0,
["case", ["<", ["get", "employees"], 500], 0, 0],
10,
["case", [">", ["get", "employees"], 500], 1, 1],
],
},
layout: {},
});
mapRef.current.addLayer({
id: "labels",
type: "symbol",
source: "points",
layout: {
"text-field": ["get", "employees"],
"text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
"text-weight": "bold",
"text-size": 12,
"text-align": "center",
"text-anchor": "center",
"text-justify": "center",
"text-offset": [0, 0],
"symbol-z-order": "auto",
"icon-allow-overlap": false,
"icon-ignore-placement": false,
"text-optional": true,
"symbol-sort-key": ["get", "employees"],
},
paint: {
"text-color": "#ffffff",
},
});
mapRef.current.on("click", "circle", (e: any) => {
mapRef.current.flyTo({
center: e.features[0].geometry.coordinates,
zoom: 15,
essential: true,
});
console.log(e.features[0]);
setSelectedFeature(e.features[0]);
});
mapRef.current.on("mouseenter", "circle", () => {
mapRef.current.getCanvas().style.cursor = "pointer";
});
mapRef.current.on("mouseleave", "circle", () => {
mapRef.current.getCanvas().style.cursor = "";
});
});
}, [lng, lat, zoom]);
I have tried multiple combinations of properties in layout and nothing led to success.