MapboxDraw Plugin

[Libbum]

Hi! I'm looking to get something similar to the MapboxDraw example happening, but cannot seem to get the initial draw button to display.

I've got map and loaded binded from the MapLibre component, and thought something like this should be a good start:

let control = new MapboxDraw();
let map: Map | undefined;
let loaded: boolean;
$: if (map && loaded) {
  map.addControl(control, "top-left");
}

But that yields nothing in the top left of my map.

I then attempted to move towards replicating one of the Control components:

<script lang="ts">
  import MapboxDraw from "@mapbox/mapbox-gl-draw";
  import { mapContext } from "svelte-maplibre";
  import maplibregl from "maplibre-gl";
  import { onDestroy } from "svelte";

  const { map } = mapContext();

  export let position: maplibregl.ControlPosition = "top-left";

  let control: MapboxDraw | null = null;
  $: if ($map && !control) {
    control = new MapboxDraw();
    $map.addControl(control, position);
  }

  onDestroy(() => {
    if ($map?.loaded() && control) {
      $map.removeControl(control);
    }
  });
</script>

But using that gave me the same (null) result. Can someone give me some pointers on what I may try?

[dimfeld]

Are you importing the CSS? That might be related https://github.com/mapbox/mapbox-gl-draw#css. Just adding import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css' at the top of your file should be sufficient.

If that doesn't help, I should be able to take a look tonight or tomorrow and see what's going on.

[dimfeld]

Not done yet but current work is here: #180

[dimfeld]

Ah the mouse pointer thing is a similar problem. Adding this CSS to your project will make it work. (I copied this from the mapboxgl draw repo and just changed mapbox to maplibre everywhere). I'm going to figure out what's the best way to actually make this easy to integrate.

.maplibregl-map.mouse-pointer .maplibregl-canvas-container.maplibregl-interactive {
  cursor: pointer;
}
.maplibregl-map.mouse-move .maplibregl-canvas-container.maplibregl-interactive {
  cursor: move;
}
.maplibregl-map.mouse-add .maplibregl-canvas-container.maplibregl-interactive {
  cursor: crosshair;
}
.maplibregl-map.mouse-move.mode-direct_select .maplibregl-canvas-container.maplibregl-interactive {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.maplibregl-map.mode-direct_select.feature-vertex.mouse-move .maplibregl-canvas-container.maplibregl-interactive {
  cursor: move;
}
.maplibregl-map.mode-direct_select.feature-midpoint.mouse-pointer .maplibregl-canvas-container.maplibregl-interactive {
  cursor: cell;
}
.maplibregl-map.mode-direct_select.feature-feature.mouse-move .maplibregl-canvas-container.maplibregl-interactive {
  cursor: move;
}
.maplibregl-map.mode-static.mouse-pointer  .maplibregl-canvas-container.maplibregl-interactive {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

[dimfeld]

Ok, I've just published v0.9.9, and the CSS above can be added to your project using import 'svelte-maplibre/draw-plugin.css'. I think between this and the other onAdd override you should be all good. The full example is up at https://svelte-maplibre.vercel.app/examples/draw

[Libbum]

Thanks Daniel! Such a nice gift to wake up to! I was hoping I could give you a useful example but instead you've managed to solve it for me.

All looks good! Please let me know if there's something I can do for you in the future to assist.

[dimfeld]

Glad I could help out!