[docs] Overlaid example on v9.1

[charlieforward9]

Uses changes from #162 to create an example of how to use EditableGeoJsonLayer using the overlaid approach, demonstrating a bug explained in #201, where the drawing modes do not work.

I was encountering the same problems in overlaid mode in v9.0.x as well.

Please review and advise.

[charlieforward9]

After many hours attempting to learn and resolve the issue, I must step back and absorb the defeat of the day.

I tried bumping mjolnir to v3 and messing with it in this method:

deck.gl-community/modules/editable-layers/src/editable-layers/editable-layer.ts

Lines 80 to 92 in 8b5c3a9

	_addEventHandlers() {
	// @ts-expect-error accessing protected props
	const {eventManager} = this.context.deck;
	const {eventHandler} = this.state._editableLayerState;
	for (const eventType of EVENT_TYPES) {
	eventManager.on(eventType as any, eventHandler, {
	// give nebula a higher priority so that it can stop propagation to deck.gl's map panning handlers
	priority: 100
	});
	}
	}

No matter my approach, the events would not fire... please enlighten me 😩

[ondave]

Having exactly the same problem.

I think the root cause is that the anyclick event does not get recognised. This gets it working (for me anyway, no gauarntee it works in the generic case on all devices):

_addEventHandlers() { 
   // @ts-expect-error accessing protected props 
   const {eventManager} = this.context.deck; 
   const {eventHandler} = this.state._editableLayerState; 
  
   const _EVENT_TYPES=EVENT_TYPES.concat(['click'])
   for (const eventType of _EVENT_TYPES) { 
     eventManager.on(eventType as any, eventHandler, { 
       // give nebula a higher priority so that it can stop propagation to deck.gl's map panning handlers 
       priority: 100 
     }); 
   } 
 }

_onclick(eventSrc){
   this._onanyclick(eventSrc);
}

[charlieforward9]

@ondave this snippet is not working for me on my PC using Chrome, can you add it to the example and contribute it to my PR so I can review it?

[ondave]

Ah, yes, sorry, didn't read your exact use case close enough. I was having issues with a vanilla deck.gl setup, and that fix patches that case OK, where anyclick just doesn't get fired.

For the MapboxOverlay case, I don't think the click events ever get to the deck instance eventManager. The MapboxOverlay captures the events and forwards the events directly to the deck.ts _onEvent function, but the EditableLayers events are registered in the deck instance eventManager.

Just out of interest did the EditableLayers (formerly nebula.gl, and pre deck v9) ever work with the MapboxOverlay?

I think one of the core dev team would have a better idea about all this.

[charlieforward9]

Just out of interest did the EditableLayers (formerly nebula.gl, and pre deck v9) ever work with the MapboxOverlay?

I am not sure of this, but this is what I would like to get working in v9.1+.

I think one of the core dev team would have a better idea about all this.

Patiently waiting 🧘 (though the blame shows most was just forked by @ibgreen from the disbanded nebula team)

[laurence-hudson-mindfoundry]

@charlieforward9 Have you had any progress finding a solution to this? I appear to be getting bitten by the same issue (EditableGeoJsonLayer not working if following the overlay approach); as speculated above I dont think this related to the v9.1/mjolnir.js change.

[charlieforward9]

@laurence-hudson-mindfoundry i have worked to keep my progress up to date on this branch, but still no success yet.

If you care to debug it with me, this branch is a good place to start

[laurence-hudson-mindfoundry]

@charlieforward9 Have you had any progress finding a solution to this? I appear to be getting bitten by the same issue (EditableGeoJsonLayer not working if following the overlay approach); as speculated above I dont think this related to the v9.1/mjolnir.js change.

@charlieforward9 I've had a breakthrough for my own map. Using the interleaved overlay rendering variant (interleaved prop on MapboxOverlay) avoids the event swallowing. While interleaved has some consequences, at least for my app there bearable. So functioning EditableGeoJsonLayer while also retaining the react-map-gl as the outer component (for maplibre's NavigationControl / map api / etc).

[charlieforward9]

Thanks for the update. Are you able to reproduce it in my example repo that this PR uses so I can build from that?

[laurence-hudson-mindfoundry]

Here's a minimal example using MapOverlay (interleaved true works, false doesn't). I struggled to get the dev env for the branch up and running, but here a codesandbox (it uses 9.0, which probably confirms that this sleeper bug has been around for a while).

https://codesandbox.io/p/sandbox/hz9vn9