I research and found, weweb is render the mapboxgl as a canvas
so I cant handle or get the map_element per id or handle several logic per document(wwLib.getFrontDocument())
here is 1 example about I using it
const mapContainer = wwLib.getFrontDocument().getElementById("mapboxgl-canvas");
OR
wwLib.getFrontDocument()
.querySelectorAll(".mapboxgl-marker")
.forEach((customMarker) => customMarker.remove
and all the marker when pass to the map, they are always changed to the clase “mapboxgl-marker” (every)
if (checkSameLocation(leaves)) {
const el = document.createElement("div");
el.className = "customMarker";
el.textContent = `${leaves.length} rooms`;
el.style.display = "flex";
el.style.alignItems = "center";
el.style.justifyContent = "center";
el.style.width = "100px";
el.style.height = "30px";
el.style.backgroundColor = "white";
el.style.border = "2px solid black";
el.style.borderRadius = "15px";
el.style.fontFamily = "Arial, sans-serif";
el.style.fontSize = "12px";
el.style.color = "black";
// console.log(el);
// Set the customMarker at the cluster's location
new wwLib.wwPlugins.mapbox.mapboxgl.Marker(el)
.setLngLat(cluster.geometry.coordinates)
.addTo(map);
}
here is my example
could you guys show me any way to replace them?