Mapbox-gl Draw controls don't display in Vue

Question

My problem

Hello all,

I am trying to use Mapbox-gl Draw in a Vue application. I already use Mapbox-gl and it's working quite well.

When I try to use Mapbox-gl Draw, the control container is displayed, but the control icons are not displayed.

I am importing Draw in the suggested way :

import MapboxDraw from "@mapbox/mapbox-gl-draw";

let draw = new MapboxDraw();
map.addControl(draw)

This code is called when the map event map-load is triggered. The zoom-in/out and the North reset controls are showing normally, but the Draw controls don't.

What I'm looking for

I am guessing this has to do with Mapbox-gl not being super compatible with Vue, but I may be mistaken. I have found no trace a similar issue in StackOverflow or Mapbox-gl Draw issues, but I can't be the only one experiencing this. Or maybe I am ?

If someone could help me make these icons appear, or even by replacing them with non mapbox icons, it would be great !

Thank you, have a good day

Answer 1

For now, I am directly modifying the controls container after its creation:

 document.querySelectorAll(".mapboxgl-ctrl-group").forEach(a => {
        let children = a.children;
        children.forEach(e => {
          let title = e.getAttribute("title");
          if (title == "LineString tool (l)") {
            e.innerText = "L";
          }
          if (title == "Polygon tool (p)") {
            e.innerText = "P";
          }
          if (title == "Marker tool (m)") {
            e.innerText = "M";
          }
          if (title == "Delete") {
            e.innerText = "️";
          }
          if (title == "Combine") {
            e.innerText = " ";
          }
          if (title == "Uncombine") {
            e.innerText = " ";
          }
        });
      });

But it's really brutal, so I'm still interested in less violent solutions.

Answer 2

Did you add mapbox-gl-draw.css in your import?

import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";