# Custom markers on mapboxgl

**URL:** <https://community.weweb.io/t/custom-markers-on-mapboxgl/14228>\
**Category:** How do I?\
**Tags:** design, map\
**Created:** [October 28, 2024, 4:08pm UTC](https://community.weweb.io/t/custom-markers-on-mapboxgl/14228 "2024-10-28T16:08:45Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![eric](https://avatars.discourse-cdn.com/v4/letter/e/898d66/32.png) [@eric](https://community.weweb.io/u/eric)\
**Post date:** [October 29, 2024, 11:15am UTC](https://community.weweb.io/t/custom-markers-on-mapboxgl/14228/2 "2024-10-29T11:15:11Z")

</div>

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

```auto
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)

```auto
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?

---

_[View the full topic](https://community.weweb.io/t/custom-markers-on-mapboxgl/14228)._