Search code examples
azure-maps

Azure Maps how to disable keyboard shortcuts?

This really niggled me for ages before i realized that pressing the delete or backspace keyboard button whilst a feature/shape (in my case a 'Point') is selected in edit mode by the drawing manager then it would actually delete it. I can't allow this to happen otherwise each time i press the backspace button when editing a text label then it ends up deleting it!

enter image description here

As you'll see in the image above, i have designed a custom edit control form where once a feature/shape (in my case a 'Point') is selected then the user can edit the Title text input and the title will dynamically update. But as soon as they press the backspace button on their keyboard, the map thinks I want to delete it.

I need to be able to disable the keybaord shortcuts for delete, if i wanted to delete the feature then I'd select the delete button instead (button with the bin icon) grrr this is so annoying, cant find anything in MS docs that explains how to disable this keyboard shortcut?

https://learn.microsoft.com/en-us/azure/azure-maps/drawing-tools-interactions-keyboard-shortcuts#keyboard-shortcuts

Solution

  • Right so I've come up with a small hack, not ideal but it works nicely!

    I add a few functions, one for the mouseover event and one for mouseout. Add these events to the text input and fire then accordingly i.e. if the user is going to modify the text in the input field then the mouseover event is active and we can therefore put the drawing manage into 'idle' state. Putting the drawing manager into idle state stops the undesired keyboard shortcuts from functionning.

    Then finally once the mouse cursor leaves the text input then we can restore the drawing manager back into edit mode.

    HTML code for the text input ('Title: input as shown in the screenshot from my original question):

    <div class=mb-2 mt-2">
    <label for="textLabelTitleInput" class="form-label-xs">Title</label>
    <input autocomplete="off" spellcheck="false" class="form-control form-control-xs" placeholder="Enter Name" id="textLabelTitleInput" oninput="updateTextLabelDesign()" onmouseover="textInputOnMouseOver()" onmouseout="textInputOnMouseOut()" />
</div>

    JavaScript code:

    function textInputOnMouseOver() {
    updateDrawingMode('idle'); // See function 'updateDrawingMode'
}

function textInputOnMouseOut() {
    updateDrawingMode('edit-geometry'); // See function 'updateDrawingMode'
}

// Function called from above functions in the drawing control toolbar.
function updateDrawingMode(mode) {
    drawingManager.setOptions({
        mode: mode
    });
}

    For those not familiar with the drawing manager options, see the MS Docs here for the fuller picture: https://learn.microsoft.com/en-us/azure/azure-maps/set-drawing-options