Leaflet, reproduce/call dragging event

I use Angular 6 and Leaflet 1.2 for my project.

I want to reproduce the dragging effect when a user maintain a right or left click on Leaflet Map.
For example, i want to be able to start dragging the map when I constantly pressing the space bar.

I have already test many features like calling the 'mousedown', 'mouseup', 'click', 'drag', 'dragstart' events on Leaflet Map but nothing occur ; the event is calling correctly but the dragging event does not occur.

I'm still blocking on that and the web seem not to search this functionality :o

Thanks for help !
Regards

1 Answer
1

You can easily add an event listener to detect when the space bar is held down. However you then need to have some way to tell the map which direction to move in. Assuming you want this to be done via the keyboard too, here is some example code to add/remove scrolling via the arrow keys when the space bar is held down.

function scrollMap(e) {
const key = e.key;
if (key == 'ArrowUp'){
//scroll map 100px up, or whatever you want
}
//repeat for other arrow keys, or inputs of your choice
}

document.addEventListener('keydown', (event) => {
const key = event.code;
if (key == 'Space'){
listen();
}
});

document.addEventListener('keyup', (event) => {
const key = event.code;
if (key == 'Space'){
stopListen();
}
});

function listen(){
document.addEventListener('keypress', scrollMap);
}

function stopListen(){
document.removeEventListener('keypress', scrollMap);
}


Notes

1) Depending on your page layout, it might be better to attach the events to your map element rather than the document

2) The choice of event.code vs event.key etc will depend on what browsers you are targeting. See here for more info

3) Instead of the space bar, you might want to use shift / ctrl / alt instead as these are inbuilt on the keyboard events & so are easier to detect & use cross browser. See here for more info

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.