cannot get and data from an event into html via jquery

I am a beginner with leaflet and javascript, jquery.

I have an index.html page where I am displaying a map, and then I want that when the user moves the mouse over the map, the coordinates pointed by the mouse gets printed under the map.

In order to do so, I have a div element under the map, having id "coordinate", and I want to replace it with jquery with the information coming from the event "mousemove", fired when the mouse moves over the map.

Here below is my code.

Everything works well, and console.log(...) correctly prints the mousemove event and the two coordinates number into my console, except for the fact that the html text to be relaced is hardcoded as into the div as

Lat: ${e.latlng.lat} Long: ${e.latlng.lng}

and the information from the event is not substituted.

enter image description here

It’s like it cannot interpret ${...} as a variable.

What is wrong?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>leaflet geoproject</title>

    <style>
        #map{
            width: 100%;
            height: 700px;
        }
    </style>

    <!-- Include Leaflet CSS file in the head section of your document: -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
     integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
     crossorigin=""/>



</head>

<body>
    <!--  this is where i want my map to be -->
    <div style="height: 500px; width: 90%;" id="map"></div>
    <!-- set this style onòy to fit the screen where i am developing -->

    <button onclick=fullScreenview()>View in full screen</button>
    <!-- this is a user defined function -->

    <div class="coordinate">void</div>

</body>

</html>

<!-- Include Leaflet JavaScript file after Leaflet’s CSS: -->
<!-- Make sure you put this AFTER Leaflet's CSS -->
<!-- <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script> -->

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<!-- load jquery. I put this after leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<script>
    // initializig the class map
    var map = L.map('map').setView([44.8683931,9.2651729], 15);
    map.zoomControl.setPosition('topright');

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([44.8683931,9.2651729]).addTo(map)
        .bindPopup('lable on my pointer.')
        .openPopup();

    // add map scale
    L.control.scale().addTo(map);

    // full sreeen function
    var mapId = document.getElementById('map');

    function fullScreenview() {
        mapId.requestFullscreen();
    }

    // display the coordinates of the point pf hte map where the mouse is
    // i need jquery for this

    // when the mouse is over the map - when the map fires the event mousemove
    map.on('mousemove', function(e) {


        // this is a nice way to chek if the info I want is got correctly
        console.log(e);
        console.log(e.latlng.lat);
        console.log(e.latlng.lng);

        // replace the content of the element having class coordinate with the html
        $('.coordinate').html('Lat: ${e.latlng.lat} Long: ${e.latlng.lng}');
    })

</script>

>Solution :

For template literals you need to use backticks instead of single quotes

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

i.E

`Lat: ${e.latlng.lat} Long: ${e.latlng.lng}`

instead of

'Lat: ${e.latlng.lat} Long: ${e.latlng.lng}'

Leave a Reply