serge-web / serge

Serious Gaming, Evolved - web interface
https://sites.google.com/deepbluec.com/serge/
Apache License 2.0
15 stars 4 forks source link

Provide drawing tools for new orders #1862

Closed IanMayo closed 2 years ago

IanMayo commented 2 years ago

In the Planning Channel, players will trigger the creation of some Orders objects by selecting the type of new orders, then be lead through drawing a feature on the map. Once the feature has been drawn the relevant Orders template will open, with the spatial data filled.

We'll use leaflet.draw for this feature.

For this we'll need these capabilities:

  1. Leaflet map, with toolbar
  2. Popup menu on toolbar, to select one of A. Transit, B. Point Effect, and C. Area Effect. These will trigger the drawing of a. Polyline, b. Marker, c. Polygon.
  3. Once the user has finished creating the feature, a popup dialog will open, letting them choose one of Maritime, Land, Air and Other. Then, create and open the relevant template. Note: the new feature will be stored in a leaflet.draw layer. Once the template has been saved, the feature will be moved from the leaflet.draw layer to the existing Orders layer.
  4. Users should be able to edit the spatial data for selected orders documents. So, we'll need a special Edit icon next to the Spatial field in the editor. When this is clicked, the feature will be moved from the Orders layer to the leaflet.draw layer, and put into edit mode - to let the player drag the corners/nodes

Note: `leaflet.draw hasn't been updated for years, and may not work with leaflet 2.0. leaflet-geoman looks like it is better maintained: https://geoman.io/leaflet-geoman

Update: I've made some progress in this in map-draw-activity, but have now got stuck. I tried to introduce react-leaflet-geoman-v2 via yarn add in packages/components. It compiled ok, but threw an error when running storybook: image

I could with some support in adding the <FeatureGroup><GeomanControls> element as demonstrated here: https://github.com/TurtIeSocks/react-leaflet-geoman. I guess we would have to position it at the "bottomright" instead, since our existing toolbar is at the top right.

I'm pretty sure that will go into PlanningChannel

IanMayo commented 2 years ago

@lebaphi is (almost) on top of integrating the drawing tools.

Here is the flow of how we show/manage the geometries as they are drawn.

drawing flow