0

I'm a new JavaScript coder. I'm adding a mouse move to my map using OpenLayers but it's not working to display coordinate in my mouse.

1 - The first step I wrote this code in my js file:

map.on('pointermove', function(event) {
    var coord3857 = event.coordinate;
    var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');
    $('#mouse3857').text(ol.coordinate.toStringXY(coord3857, 2));
    $('#mouse4326').text(ol.coordinate.toStringXY(coord4326, 5));
});

2- Then I added this in the HTML file :

<p>Coordonnées géographiques de la souris dans les différents systèmes de projection:</p>
<p>
    EPSG:3857 > <span id="mouse3857" class="label">0 / 0</span>
    EPSG:4326 > <span id="mouse4326" class="label">0 / 0</span>
</p>

It's not working, and I don't know why.

I have two messages :

ReferenceError: $ is not defined ($the dolar is replacing document.getElementById('')

If I change the $ to document.getElementById('mouse3857'), I have a message of:

TypeError: document.getElementById(...) is null.

So do I need to do something else in HTML file or calling jQuery file?

  • Please do not include a statement of urgency in StackExchange or other help forum posts. All this ever does is generate downvotes and reduce participation. – Vince Jun 19 at 11:58
2

If you use document.getElementById method to get HTML element, then you must use it's innerHTML property to change it's content.

This should work without need for jQuery:

map.on('pointermove', function(event) {
    var coord3857 = event.coordinate;
    var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');
    document.getElementById('mouse3857').innerHTML = ol.coordinate.toStringXY(coord3857, 2);
    document.getElementById('mouse4326').innerHTML = ol.coordinate.toStringXY(coord4326, 5);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.