How to allow text selection on azure maps popup?

Question

It seems like user text selection on azure maps popup is disabled by default but I couldn't find any references to the ability to select text on azure maps documentation. Can anyone provide me any information regarding this?

I'm using Azure maps JavaScript SDK to render the map. I tried overriding the CSS rule on the map popup content to enable user-selection but that didn't work.

Answer 1

I'm not aware of any way to make the content selectable in the standard Popup class other than adding a button that selects the content and copies it to the clipboard for you. For example:

function symbolClicked(e) {
    //Make sure the event occurred on a point feature.
    if (e.shapes && e.shapes.length > 0) {
       
        //Populate the popupTemplate with data from the clicked point feature.
        popup.setOptions({
            //Update the content of the popup.
            content: "<div style='padding:10px'>Hello World<br/><input type='button' onclick='copyPopupInfoToClipboard()' value='Copy'/></div>",

            //Update the position of the popup with the symbols coordinate.
            position: e.shapes[0].getCoordinates()
        });

        //Open the popup.
        popup.open(map);
    }
}

function copyPopupInfoToClipboard() {
    var text = document.querySelector('.popup-content-container div').innerText;
    navigator.clipboard.writeText(text.trim());
}

Alternatively you could display the content in another way. For example, display the popup content in a side panel or floating div above the map. Here's an example:

<div id="myMap" style="position:relative;width:100%;height:800px;"></div>
<div id="sidePanel" style="position:absolute;top:10px;left:10px;background-color:white;border-radius:10px;padding:10px;display:none;"></div>

function symbolClicked(e) {
    //Make sure the event occurred on a point feature.
    if (e.shapes && e.shapes.length > 0) {
    
        var sidePanel = document.getElementById('sidePanel');
        sidePanel.innerHTML = "Hello World<br/><br/><input type='button' onclick='hidePopup()' value='Close'/>";
        sidePanel.style.display = '';
    }
}

function hidePopup() {
    var sidePanel = document.getElementById('sidePanel');
    sidePanel.style.display = 'none';
}