I would like to add a direction handle to [some] geoman leaflet markers. There are packages out there already like leaflet-editable-marker that add things like direction/transformation rulers etc to leaflet.
I want [some] outline markers for my polylines to have a direction, and I want to set this direction using those "direction handles" rulers. The rulers should look like an arrow of sorts - a short line and a head.
To set directions, I am thinking about handling dragstart, drag and dragend events.
When users click on such a marker, the editor would show the direction handle; a subsequent click will hide this handle again. Initially, my thinking was to do something like the below:
marker.on('click', (e) => {
const latlng = marker._latlng;
const directionHandleMarker = new L.circleMarker(latlng, {
draggable: true,
radius: 20,
img: {
url: 'icon.png', //image link
size: [40, 40], //image size ( default [40, 40] )
rotate: 10, //image base rotate ( default 0 )
offset: { x: 0, y: 0 }, //image offset ( default { x: 0, y: 0 } )
}
});
...
map.addLayer(directionHandleMarker);
});
The circleMarker is from 'leaflet-canvas-markers' package. It is also pretty trivial to build this arrow marker functionality without a plugin, and there are multiple reference implementations.
However, this won't give me what I want, will it? Since it is a marker, I could not drag it to adjust the angle, or could I? The geoman rotate mixin kind of does it, using cursor position to calculate the angle and using that to place the marker, rather the placing marker based on the cursor position. Would I need to drag the end of an arrow and recompute offset?
Should I add a two-point LineString and fix one point on the marker and use the other end for dragging, or is there a way to make markers [without a polyline] work?
