Javascript: select content of popup window

Applications Web Development
1

I have a Leaflet page similar to this one: Quick Start - Leaflet

Clicking anywhere on the map yields a popup with the coordinates. For the purposes of creating polygons of my own, I want to have the contents of this popup selected, so that I can paste it in a file for post-processing purposes with a middle-click. What code would I need to add to select the contents of the popup?

2

@technossomy , given the specialised nature of this I reckon you'd may be better served by asking the Leaflet community directly (if not already asked), off the home page there's links to X, github and stackoverflow leaflet communities.

As always, feel free to post solutions here :sunglasses:

PS: I may have a dig/play around if/when time allows and if i find anything will respond

3

I see what you mean. It would probably require a modification to the Leaflet code.
I took the following from SO as an example:

<html>
<div id="target"><p><b>Lorem ipsum</b><br>Dolor sit amet, consectetur adipiscing.</p></div>
<p class="click-me">[select text]</p>

<script>
function selectText(nodeId) {
  const node = document.getElementById(nodeId);

  if (document.body.createTextRange) {
    const range = document.body.createTextRange();
    range.moveToElementText(node);
    range.select();
  } else if (window.getSelection) {
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(node);
    selection.removeAllRanges();
    selection.addRange(range);
  } else {
    console.warn("Could not select text in node: unsupported browser.");
  }
}

const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => selectText('target'));
</script>
</html>

The key is that the target div is given an id (id="target"), which I dont see how that could be added to the Leaflet pop-up.

4

have you tried debugging the app and seeing if you can interrogate the pop-up object?

5

Well, the popup can be interrogated through its classname leaflet-popup-content.

leaflet_
leaflet_574×864 123 KB

So I have changed the code to the following for now:

<!DOCTYPE html>
<html>
<div class="leaflet-popup-content"><p><b>Lorem ipsum</b><br>Dolor sit amet, consectetur adipiscing.</p></div>
<p class="click-me">[select text]</p>

<script>
function selectText(nodeClass) {
  const node = document.getElementsByClassName(nodeClass);
  if (window.getSelection) {
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(node);       // <-- error occurs here
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => selectText('leaflet-popup-content'));
</script>
</html>

This, however, yields the following error message:
Uncaught TypeError: Range.selectNodeContents: Argument 1 does not implement interface Node.
which I am not sure what that means in this context. Perhaps someone can explain how to remediate this error?

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.