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:
Leaflet map, with toolbar
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.
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.
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:
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.
In the
Planning Channel
, players will trigger the creation of someOrders
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 relevantOrders
template will open, with the spatial data filled.We'll use
leaflet.draw
for this feature.For this we'll need these capabilities:
A. Transit
,B. Point Effect
, andC. Area Effect
. These will trigger the drawing ofa. Polyline
,b. Marker
,c. Polygon
.Maritime
,Land
,Air
andOther
. Then, create and open the relevant template. Note: the new feature will be stored in aleaflet.draw
layer. Once the template has been saved, the feature will be moved from theleaflet.draw
layer to the existingOrders
layer.Edit
icon next to theSpatial
field in the editor. When this is clicked, the feature will be moved from theOrders
layer to theleaflet.draw
layer, and put into edit mode - to let the player drag the corners/nodesNote: `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 introducereact-leaflet-geoman-v2
viayarn add
inpackages/components
. It compiled ok, but threw an error when runningstorybook
: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