Custom markers on mapboxgl

Ask us anything How do I?
,
1

Hi guys,

in mapbox GL, I want to add custom markers
I coded and here is the expected response (that shown in JS)

image
image880Ă—781 40 KB

but with weweb, I handle it no different with the JS editor
just a little update is

new wwLib.wwPlugins.mapbox.mapboxgl.Marker(el)
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);

but it shown like this

image
image258Ă—181 51.9 KB

it is so different with my expected
could you guys give me some green point

Thanks for your response
Eric

1 Like
2

Hi @Joyce @Alexis @DanielL

  • 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?