Drawing modes not working [Bug]

[PacoVerduBravo]

Module

• deck.gl-community/arrow-layers
• deck.gl-community/bing-maps
• deck.gl-community/editable-layers
• deck.gl-community/experimental
• deck.gl-community/graph-layers
• deck.gl-community/layers
• deck.gl-community/react
• deck.gl-community/react-graph-layer

Description

None of the drawing modes seem to be functioning as expected. When configuring the onEdit function, the editType parameter never arrives as addFeature. Additionally, in many cases, the onEdit function is not executed at all.

Expected Behavior

All drawing modes should work as expected

Steps to Reproduce

Unfortunately, I couldn't provide a CodeSandbox example because I encountered errors related to dependency setup

import React from 'react';
import DeckGl from '@deck.gl/react';
import Map from 'react-map-gl';
import {
  EditableGeoJsonLayer,
  ViewMode,
  DrawRectangleUsingThreePointsMode,
  DrawPointMode,
  DrawRectangleFromCenterMode,
  DrawPolygonMode,
  DrawLineStringMode,
  MeasureDistanceMode,
  Draw90DegreePolygonMode
} from '@deck.gl-community/editable-layers';

const MisionMap = () => {
  const MAPBOX_ACCESS_TOKEN =  " "
  const mapsStyles = {
    Dark: 'mapbox://styles/mapbox/dark-v10',
    Satelite: 'mapbox://styles/mapbox/satellite-v9',
    Positron: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'
  };
  const INITIAL_VIEW_STATE = {
    longitude: -3.3052,
    latitude: 42.4247,
    zoom: 13,
    maxPitch: 70,
    pitch: 5,
    bearing: 0
  };
  const [features, setFeatures] = React.useState({
    type: 'FeatureCollection',
    features: []
  });
  const [mode, setMode] = React.useState(() => DrawPointMode);
  const [selectedFeatureIndexes] = React.useState([]);

  const layer = new EditableGeoJsonLayer({
    data: features,
    mode,
    selectedFeatureIndexes,
    onEdit: ({ editType, updatedData }) => {
      console.log(editType);
      setFeatures(updatedData);
    }
  });
  return (
    <DeckGl
      initialViewState={INITIAL_VIEW_STATE}
      controller={{
        doubleClickZoom: false
      }}
      layers={[layer]}
      // getCursor={layer.getCursor.bind(layer)}
    >
      <Map mapStyle={mapsStyles.Dark} maxPitch={70} reuseMaps mapboxAccessToken={MAPBOX_ACCESS_TOKEN} />
    </DeckGl>
  );
};

export default MisionMap;

Environment

• Framework version: React 18.2 & 19.0.0
• Browser: Chrome
• OS: Ubuntu 22.04

Logs

No response

[cg-sat]

We are running into the same issue when we upgrade @deck.gl/* from 9.0.40 to 9.1.0. With @deck.gl 9.0.40 the onEdit callback is called as expected.

[cg-sat]

Deck.gl upgraded their dependency to mjolnir.js from 2 to 3. Their upgrade guide includes some breaking changes as well, that effects the editable layers such that the anyclick gesture isn't sent by default anymore.

[PacoVerduBravo]

We are running into the same issue when we upgrade @deck.gl/* from 9.0.40 to 9.1.0. With @deck.gl 9.0.40 the onEdit callback is called as expected.

Thank you so much for your quick response and for taking the time to help me with this issue.

[charlieforward9]

Can someone submit a sample here on how to get the EditableGeoJsonLayer working again? I am not able to draw at all, but I can see geometries that I pass into the layer programmatically.

(I am passing the layer to MapboxLayer and adding it to my maplibre instance with addControl)

"deck.gl": "^9.0.38",

EDIT: I am working on making an example using the overlaid implementation of DeckGL, since this is the way my project is structured and I am unable to get it to work.

I am hoping that through this example, I'll be able to understand the logic better and eventually be able to contribute it back as an 'official' example.

[cg-sat]

I found a woraround, to make the EditableGeoJsonLayer work with deck.gl 9.1:

export class EditableLayerMapController extends MapController {
    constructor(props) {
        super(props);
        // We cannot enable 'anyclick', because this seems to be not known to mjolnir.js anymore.
        this.events = ['click'];
    }
    handleEvent(event: MjolnirEvent) {
        if (event.type == 'click') {
            // @ts-ignore https://github.com/visgl/deck.gl-community/issues/201
            this.eventManager.manager.emit('anyclick', event);
        }
        return super.handleEvent(event);
    }
}

deckMap = new Deck({
    views: new MapView({ repeat: true }),
    controller: {type: EditableLayerMapController},

[charlieforward9]

I found a woraround, to make the EditableGeoJsonLayer work with deck.gl 9.1

Still unable to get this working with MapboxOverlay in overlaid mode

[jsoliveres]

Thanks for the workaround @cg-sat .
It works pretty good for me, @charlieforward9 here is my implementation with MapboxOverlay in typescript. Not the cleanest solution but it does the job for now:

export const DeckGLOverlay = forwardRef(function DeckGLOverlay(
  props: MapboxOverlayProps & {
    interleaved?: boolean;
  },
  ref
) {
  const overlay = useControl(() => new MapboxOverlay(props), {});
  overlay.setProps({
    ...props,
    interleaved: props.interleaved ?? false,   
    /** @ts-expect-error: DeckGL expects a controller prop, but it's not in the MapboxOverlayProps type */
    controller: {
      type: EditableLayerMapController,
    },
  });

  useImperativeHandle(ref, () => overlay, [overlay]);
  return null;
});

[charlieforward9]

@jsoliveres hey, thanks for the update. I dont know whether its me, the config, or what, but I can't for the life of me get it to work.

Can you please take a look at the overlaid example I am trying to contribute into the repo and add your work in there, tweaking whatever is broken about the minimal setup to get the EditableGeoJSONLayer to work. I'd love to see this working for us but also easily available for others to make use of within the repo.

Feel free to push the updates into #203

(You may have to commit with git commit -n ... and push with git push --no-verify to make it past the precheck they have in place)

[lm93547]

I found a woraround, to make the EditableGeoJsonLayer work with deck.gl 9.1:

export class EditableLayerMapController extends MapController {
constructor(props) {
super(props);
// We cannot enable 'anyclick', because this seems to be not known to mjolnir.js anymore.
this.events = ['click'];
}
handleEvent(event: MjolnirEvent) {
if (event.type == 'click') {
// @ts-ignore #201
this.eventManager.manager.emit('anyclick', event);
}
return super.handleEvent(event);
}
}

deckMap = new Deck({
views: new MapView({ repeat: true }),
controller: {type: EditableLayerMapController},

Works great for me, thanks!. Hope this can get fixed ASAP.

[ewandank]

I have opened a PR to listen to the click event rather then the anyclick event as above which appears to have fixed the problem - #206