Mapbox-gl-draw no longer works in maplibre v3.0.0 #2601

erikvullings · 2023-05-26T15:53:00Z

maplibre-gl-js version: 3.0.0

browser: Edge

Steps to Trigger Behavior

Go to your own example
Note that the drawing tools, which are shown in the example gallery, are no longer there (probably, they have become very small in the top-right).
Even when visible, the draw controls no longer react on mouse click events.

Link to Demonstration

You can use your own jsfiddle to have a demo.

Expected Behavior

I can draw on the map.

Actual Behavior

Nothing happens.

neodescis · 2023-05-26T17:19:55Z

I believe this is because MapLibre no longer has the Mapbox CSS classes applied. Mapbox Draw is creating a control group with the Mapbox classes, not the MapLibre classes. Also, Mapbox Draw depends on the Mapbox classes on the map itself being there, and not just for CSS. There are checks in the Mapbox Draw code for them.

Do we need to fork Mapbox Draw at this point? I will be unable to update our project to MapLibre 3.x without draw support.

neodescis · 2023-05-26T18:08:52Z

I've been able to work around the issue by adding the Mapbox classes back. Here's what I did.

First, add the Mapbox CSS classes to the MapLibre map:

// MapboxDraw requires the canvas's class order to have the class 
// "mapboxgl-canvas" first in the list for the key bindings to work
map.getCanvas().className = 'mapboxgl-canvas maplibregl-canvas';
map.getContainer().classList.add('mapboxgl-map');
const canvasContainer = map.getCanvasContainer();
canvasContainer.classList.add('mapboxgl-canvas-container');
if (canvasContainer.classList.contains('maplibregl-interactive')) {
  canvasContainer.classList.add('mapboxgl-interactive');
}

Also, when the draw controls are created, the MapLibre classes need to be added to what MapboxDraw creates:

const originalOnAdd = draw.onAdd.bind(draw);
draw.onAdd = (map) => {
  const controlContainer = originalOnAdd(map);
  controlContainer.classList.add('maplibregl-ctrl', 'maplibregl-ctrl-group');
  return controlContainer;
};

HarelM · 2023-05-26T18:17:47Z

I'll close this issue as this is not a msplibre-gl bug.
You can use the css from before version 3 as it has both css classes, it might also have some stuff missing.

neodescis · 2023-05-26T18:22:46Z

So... by closing this, are you saying that MapLibre no longer wants to support MapboxDraw at all? That seems strange to me, as does leaving a broken demo/example.

HarelM · 2023-05-26T18:26:59Z

You have it backwards 😀
I can't force mapbox draw to support maplibre 3.0.
I have no control over their codebase.
If someone would like to contribute a fix there it would be great, but I can't track it here, it's not the right place...

neodescis · 2023-05-26T18:30:48Z

Yeah sorry, I guess I didn't mean to imply that MapLibre should support MapboxDraw the project, but it does seem like the functionality would be important to the MapLibre community. That's why I was asking if we should fork MapboxDraw. It seems unlikely that the current project would want to support MapLibre, but I suppose it doesn't hurt to ask.

HarelM · 2023-05-26T18:39:23Z

I think that historically mapbox draw did make an effort to support maplibre.
There were talks about forking, but I don't know where it landed.
I agree that mapbox draw is an important capability for the community.

joekrill · 2023-06-21T00:25:46Z

You have it backwards 😀
I can't force mapbox draw to support maplibre 3.0.
I have no control over their codebase.

This problem was actually triggered by a change that maplibre made, though - not a mapbox-gl-draw change. The code in question on the mapbox-gl-draw side of things has been that way for 4+ years -- before maplibre even existed. I suppose it could be argued that they shouldn't have hard-coded the class names in their codebase in the first place, but at the time there was no reason to not do that.

So ultimately it was really #1575 that "broke" this, I believe.

I can totally understand this project not wanting to include the mapbox-gl-js classes. But it may be worth reconsidering that decision to maintain as much compatibility as possible and avoid alienating users who might otherwise switch.

If someone would like to contribute a fix there it would be great, but I can't track it here, it's not the right place...

I will try to get a PR up for mapbox-gl-draw and see how it goes over there. But there's likely other plugins that are going to break in similar ways.

In the meantime another option that may work for some folks is adding this code somewhere:

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

// @ts-ignore
MapboxDraw.constants.classes.CONTROL_BASE = "maplibregl-ctrl";
// @ts-ignore
MapboxDraw.constants.classes.CONTROL_PREFIX = "maplibregl-ctrl-";
// @ts-ignore
MapboxDraw.constants.classes.CONTROL_GROUP = "maplibregl-ctrl-group";

This worked for me for most functionality, but there's still some CSS rules that rely on the .mapboxgl-map and other mapbox-specific class names.

neodescis · 2023-06-21T16:43:26Z

I agree with @HarelM that it would be great for plugins to be updated to work with both, but I'm not sure how feasible that is. MapboxDraw still hasn't published my pull request for a compatibility fix with MapLibre 2.x that got merged three months ago...

erikvullings · 2023-06-22T07:24:06Z

@joekrill @neodescis Thanks for your feedback! Since drawing is quite an essential feature for a map library IMHO,, would it make sense to you to merge the MapboxDraw functionality into MapLibre, so this kind of functionality remains under control? Preferably allowing for tree shaking, so it would only be included in the final bundle when required.

HarelM · 2023-06-22T07:34:33Z

Tree shaking is a painful point.
And unfortunately, I don't agree that this component is essential for a map library as it is very opinionated and specific...
If the library is not well maintained and someone would like to maintain it under maplibre organization it would be great, much like other plugins and wrappers.

neodescis · 2023-06-22T15:46:42Z

Drawing is essential to many map use cases, but I agree with keeping it separate. I think it would make a lot of sense to fork it though; the plugin would be much improved by moving to TypeScript and a class-based structure, among other things.

HarelM · 2023-06-27T19:31:51Z

@stepankuzmin is there a chance to release a new version of mapbox-gl-draw? I see that the linked PR was merged and should help here, wouldn't it?
There is a new issue reported once a week about mapbox-gl-draw not working with maplibre 3.0 roughly.
I think that in the linked issues here there are good people that might be able to help maintain mapbox-gl-draw.
I really think that forking should be the last resort and I'm not sure we are there yet...

stepankuzmin · 2023-06-28T09:50:13Z

Hey everyone! Yes, I planned to cut a GL Draw release, but I was caught up with some stuff. I'll find some time to make a release.

stepankuzmin · 2023-06-28T12:51:16Z

@HarelM Published @mapbox/mapbox-gl-draw v1.4.2 https://github.com/mapbox/mapbox-gl-draw/releases/tag/v1.4.2

HarelM · 2023-06-28T12:57:51Z

THANKS!! I'll update the docs within a few weeks.

neodescis · 2023-06-29T22:26:59Z

Yes, thanks a bunch @stepankuzmin! @HarelM, keep in mind my fix was to get MapboxDraw working with MapLibre 2.x. Much of what I posted above is still needed for 3.x. I'm more than willing to work on MapboxDraw to get it working with 3.x, but probably we'll need to discuss an approach. I can file an issue in that repo and mention this one to get the ball rolling.

tianzaishuo · 2023-08-01T02:47:22Z

I have made the following modifications and can run normally. @HarelM

HarelM · 2023-08-01T05:30:00Z

@bk201lucifer can you open a PR to update the example here in this repo with these changes?

nitrag · 2023-08-01T20:39:59Z

I can confirm that changing the constants fixes the issue.

MapboxDraw.constants.classes.CONTROL_BASE = "maplibregl-ctrl";
MapboxDraw.constants.classes.CONTROL_PREFIX = "maplibregl-ctrl-";
MapboxDraw.constants.classes.CONTROL_GROUP = "maplibregl-ctrl-group";

neodescis · 2023-08-03T17:11:13Z

Well, it fixes most of the problems, but not all. Specifically, keyboard bindings still won't work. @HarelM , I've been holding off on updating the example until we hear back from @stepankuzmin on my PR, but that was a few weeks ago.

HarelM · 2023-08-03T17:16:37Z

We can update the example, and later on update it again.
Better something than nothing I think...

* Fix the example as per the discussion in #2601 issue * Fix a character case issue * Code Hygiene cleanup as per ci. * Add bufix to changelog

kevinjmo · 2023-12-05T23:15:38Z

Regarding the resolution, is the fix for us to add these three lines in our project before the MapboxDraw instance?

MapboxDraw.constants.classes.CONTROL_BASE  = 'maplibregl-ctrl';
MapboxDraw.constants.classes.CONTROL_PREFIX = 'maplibregl-ctrl-';
MapboxDraw.constants.classes.CONTROL_GROUP = 'maplibregl-ctrl-group';

The changes in #3394 seem to only update the example HTML, and doesn’t add anything to the actual maplibre-gl-js code itself. How come this isn’t set directly in maplibre-gl-js?

cc @dBitech @HarelM

kevinjmo · 2023-12-05T23:26:34Z

Also, it seems like when drawing, the cursor is off. It should be using the crosshair cursor, but the default grab cursor is present.

Screen.Recording.2023-12-05.at.15.24.18.mov

HarelM · 2023-12-06T08:28:54Z

There shouldn't be any code changes in maplibre-gl-js as mapbox-gl-draw is a plugin and should facilitate for these issues.
Your best approach would be to open a PR in the mapbox-gl-draw repo to solve these issues.

NasimAwabdy · 2023-12-13T15:30:13Z

Also, it seems like when drawing, the cursor is off. It should be using the crosshair cursor, but the default grab cursor is present.

Screen.Recording.2023-12-05.at.15.24.18.mov

@kevinjmo
To solve this issue, you need to rename the classes in the dist/mapbox-gl-draw.css file.
You can check out the changes in my forked repo -> https://github.com/NasimAwabdy/maplibre-gl-draw

HarelM closed this as completed May 26, 2023

HarelM mentioned this issue Jun 4, 2023

mapbox-gl-draw demo display abnormal #2626

Closed

This was referenced Jun 14, 2023

Plugins breaking because of removed css class #2682

Closed

Maplibre official website plugin error #2685

Closed

Mapbox Draw unclickable buttons #2705

Closed

fidzee mentioned this issue Jun 19, 2023

Mapbox-draw buttons not clickable on Maplibre-gl Map mapbox/mapbox-gl-draw#1179

Closed

HarelM mentioned this issue Jun 27, 2023

mapbox-gl-draw plugin no longer renders buttons correctly #2734

Closed

HarelM mentioned this issue Jun 29, 2023

({ controls: { polygon: true... } }) doesn't draw tools #2761

Closed

neodescis mentioned this issue Jun 29, 2023

MapboxDraw doesn't work with MapLibre 3.x mapbox/mapbox-gl-draw#1182

Closed

sanak mentioned this issue Aug 28, 2023

Switch OpenLayers to MapLibre GL JS and use VitePress CSS styling sanak/geos-wasm#6

Closed

sanak mentioned this issue Sep 4, 2023

Switch OpenLayers to MapLibre GL JS and use VitePress CSS styling sanak/geos-wasm-tester#3

Open

dBitech added a commit to OpenRadioMap/maplibre-gl-js that referenced this issue Nov 20, 2023

Fix the example as per the discussion in maplibre#2601 issue

93a97f9

dBitech mentioned this issue Nov 20, 2023

Fix the example as per the discussion in #2601 issue #3394

Merged

HarelM pushed a commit that referenced this issue Nov 20, 2023

Fix the example as per the discussion in #2601 issue (#3394)

32cd9fe

* Fix the example as per the discussion in #2601 issue * Fix a character case issue * Code Hygiene cleanup as per ci. * Add bufix to changelog

walkerke mentioned this issue Aug 5, 2024

add_draw_control() not working with MapLibre walkerke/mapgl#32

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mapbox-gl-draw no longer works in maplibre v3.0.0 #2601

Mapbox-gl-draw no longer works in maplibre v3.0.0 #2601

erikvullings commented May 26, 2023

neodescis commented May 26, 2023 •

edited

Loading

neodescis commented May 26, 2023

HarelM commented May 26, 2023 •

edited

Loading

neodescis commented May 26, 2023

HarelM commented May 26, 2023

neodescis commented May 26, 2023 •

edited

Loading

HarelM commented May 26, 2023

joekrill commented Jun 21, 2023

neodescis commented Jun 21, 2023

erikvullings commented Jun 22, 2023

HarelM commented Jun 22, 2023

neodescis commented Jun 22, 2023

HarelM commented Jun 27, 2023

stepankuzmin commented Jun 28, 2023

stepankuzmin commented Jun 28, 2023

HarelM commented Jun 28, 2023

neodescis commented Jun 29, 2023

tianzaishuo commented Aug 1, 2023 •

edited

Loading

HarelM commented Aug 1, 2023

nitrag commented Aug 1, 2023

neodescis commented Aug 3, 2023

HarelM commented Aug 3, 2023

kevinjmo commented Dec 5, 2023 •

edited

Loading

kevinjmo commented Dec 5, 2023

HarelM commented Dec 6, 2023

NasimAwabdy commented Dec 13, 2023

Mapbox-gl-draw no longer works in maplibre v3.0.0 #2601

Mapbox-gl-draw no longer works in maplibre v3.0.0 #2601

Comments

erikvullings commented May 26, 2023

Steps to Trigger Behavior

Link to Demonstration

Expected Behavior

Actual Behavior

neodescis commented May 26, 2023 • edited Loading

neodescis commented May 26, 2023

HarelM commented May 26, 2023 • edited Loading

neodescis commented May 26, 2023

HarelM commented May 26, 2023

neodescis commented May 26, 2023 • edited Loading

HarelM commented May 26, 2023

joekrill commented Jun 21, 2023

neodescis commented Jun 21, 2023

erikvullings commented Jun 22, 2023

HarelM commented Jun 22, 2023

neodescis commented Jun 22, 2023

HarelM commented Jun 27, 2023

stepankuzmin commented Jun 28, 2023

stepankuzmin commented Jun 28, 2023

HarelM commented Jun 28, 2023

neodescis commented Jun 29, 2023

tianzaishuo commented Aug 1, 2023 • edited Loading

HarelM commented Aug 1, 2023

nitrag commented Aug 1, 2023

neodescis commented Aug 3, 2023

HarelM commented Aug 3, 2023

kevinjmo commented Dec 5, 2023 • edited Loading

kevinjmo commented Dec 5, 2023

HarelM commented Dec 6, 2023

NasimAwabdy commented Dec 13, 2023

neodescis commented May 26, 2023 •

edited

Loading

HarelM commented May 26, 2023 •

edited

Loading

neodescis commented May 26, 2023 •

edited

Loading

tianzaishuo commented Aug 1, 2023 •

edited

Loading

kevinjmo commented Dec 5, 2023 •

edited

Loading