in openstreemap how to make a html code that when i move the mouse over the map it will display in real time the coordinates in a small tooltip?

I want that when i move the mouse over the map it will display like in a small tool tip balloon the coordinates in real time on the mouse cursor for example like: 35.56, 56.765

I tried this code in my wix site but it's showing the map but the coordinate with the mouse is not working showing anything.

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
   <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
   <style>
      body, html, #map {
         height: 100%;
         margin: 0;
      }
   </style>
</head>
<body>
   <div id="map"></div>

   <script>
      var map = L.map('map').setView([32.921, 39.562], 10);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      var marker = L.marker([32.921, 39.562]).addTo(map);
      marker.bindPopup("<b>Hello World!</b><br>This is a customizable popup.").openPopup();

      // Create a tooltip to show coordinates
      var tooltip = L.tooltip({
         permanent: true,
         direction: 'bottom',
         opacity: 0.7
      });

      // Add the tooltip to the map
      tooltip.addTo(map);

      // Event listener for mousemove
      map.on('mousemove', function (e) {
         var latlng = e.latlng;
         tooltip.setLatLng(latlng).setContent('Coordinates: ' + latlng.lat.toFixed(6) + ', ' + latlng.lng.toFixed(6));
      });
   </script>
</body>
</html>

openstreetmap html javascript

asked 03 Jan, 20:23

chocolade72
11●1●1●2
accept rate: 0%

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

*italic* or _italic_
**bold** or __bold__
link:[text](http://url.com/ "title")
image?![alt text](/path/img.jpg "title")
numbered list: 1. Foo 2. Bar
to add a line break simply add two spaces to where you would like the new line to be.
basic HTML tags are also supported

learn more about Markdown

Question tags:

openstreetmap ×362
javascript ×60
html ×19

question asked: 03 Jan, 20:23

question was seen: 967 times

last updated: 03 Jan, 20:23

in openstreemap how to make a html code that when i move the mouse over the map it will display in real time the coordinates in a small tooltip?

Follow this question

Related questions