Improving drawing with mobile devices (like Google Maps)
Is your feature request related to a problem? Please describe. We're looking at solutions for drawing with OpenLayers without a mouse or keyboard, like on a mobile device. We tried to implement drawing like Google Maps, where you draw a point and by moving the map, the drawing is updated. When you click on a button it adds a point in the center of the map. For an example, see image below:
One of the problems we're facing is that the DrawInteraction always follows mouse or pointer events and we'd like it to follow the center of the map. The next problem is after setting a point, the line that follows the sketchpoint isn't visible. This is different than drawing with a mouse where the line does follow the sketchpoint.
We tried implementing our own solution by extending the Draw class and overwriting the pixel, coordinates and the pointerType. This did work, but the solution isn't very pretty and has it's limitations. See the code below:
export class CustomOlDraw extends Draw {
constructor(options: Options) {
super(options);
}
handleEvent(event: MapBrowserEvent<PointerEvent>) {
const center = this.getMap()?.getView().getCenter();
if (center !== undefined) {
const pixel = this.getMap()?.getPixelFromCoordinate(center);
if (pixel !== undefined) {
const newEvent = new MapBrowserEvent(
event.type,
event.map,
new PointerEvent("mousemove", { pointerType: "mouse" }),
event.dragging,
event.frameState === null ? undefined : event.frameState,
event.activePointers
);
newEvent.coordinate = center;
newEvent.pixel = pixel;
return super.handleEvent(newEvent);
}
}
return false;
}
}Describe the solution you'd like We understand that our current solution isn't suitable to implement, but we'd like to know if there are other possibilities to achieve the same functionality. And if that's not the case, do you have plans to implement such features in the near future?
If the functionality isn't too complex to implement ourselves, possibly we can make a pull-request with some guidance.
Source: openlayers/openlayers