GeoJSON playground on map coordinates (lat,long)

If you want to use Leaflet with OpenStreetMap tiles and show the coordinates when the user hovers over the map.

Here’s a complete, runnable HTML, Leaflet + JavaScript example that does exactly that: Leaflet OSM Hover Coordinates on maXbox
46.925297, 7.398605
https://raw.githack.com/maxkleiner/maXbox5/main/EKON30/1472_osm_leaflet_hoover_coordinates.htm

How it works:

1. Leaflet Map Setup
2. Loads OSM tiles from https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png.

3. Sets an initial center and zoom.

4. Mouse Move Event
   map.on(‘mousemove’, callback) listens for hover movement.
   e.latlng gives the latitude and longitude.
   Coordinates are rounded to 6 decimal places for readability.
   Coordinates Display
   A fixed-position

   shows the live coordinates. ✅ This works in any modern browser — just save as index.html and open.

If you want, I can also make it so clicking on the map copies the coordinates to the clipboard.

Do you want me to add that click-to-copy feature?

Got it — you want the coordinates display to always stay on top of the map layers, even if Leaflet controls or popups are present.

We can do that by giving the coordinates

a high z-index and ensuring it’s positioned above Leaflet’s own UI elements.

Here’s the updated hover coordinates example with the fix:

#coords {
     position: absolute;
     bottom: 10px;
     left: 10px;
     background: rgba(255, 255, 255, 0.8);
     padding: 5px 10px;
     font-family: monospace;
     border-radius: 4px;
     box-shadow: 0 0 5px rgba(0,0,0,0.3);
     z-index: 10000; /* Ensure it's above all map layers and controls */
     pointer-events: none; /* Let mouse events pass through */
   }

Here’s the updated runnable example with a click-to-copy coordinates feature added.

When you click anywhere on the map, the coordinates will be copied to your clipboard and a short confirmation will appear. The main start routine to pass the java script to a rich client goes like this:

GEOJSON4 = 'https://raw.githack.com/maxkleiner/maXbox5/main/EKON30/1472_osm_leaflet_hoover_coordinates.htm';

procedure letGeoJson_EdgeOSM_GeoJSON(zoom, lon,lat: double);
var htmlgeojs: string;
 begin
   with TEdgeViewForm.create(self) do begin
     width:= 1200;
     height:= 1000;
     caption:= caption+ ' - OSM GeoJSON Layer 2026'
     //htmlgeojs:= loadfile(exepath+'examples\1472_osm_geojson_complete.htm'); 
     htmlgeojs:= HttpGetDirect2(GEOJSON4)
     //writ(utf8toansi(htmlgeojs));     
     pagecontrol1.height:= 260;
     pagecontrol1.activepage:= tabsheet3;
     edit1.text:= TESTURL6; //OSMDIRECT; //'https://wttr.in/Bern';
     //edit1.text:= Format(OSM_URLFormat,[zoom, lon,lat]); //'https://wttr.in/Bern';
     //btngoclick(self);
     sleep(1500);
     //btnExecuteScriptClick(self);
     memoHTML.font.size:= 11;
     memoHTML.color:= clsilver;
     memoHTML.Text:= utf8toansi(htmlgeojs); ////GEOJSON_Layer; 
     btnsetsource.caption:= '&Run Source'
     btnSetSourceClick(self);  //}
     showmodal
     free;
   end; 
 end; 

On the source tab you can enter other coordinats and press the customized button on the left Run Source to see immediate a different map!

Without any knowledge of JS, I was forced to implement a map (OSM via Leaflet) on a webpage like edgeview. On this map, there should be a marker for the actual address of lat, long coordinates. The coordinates are saved as a string in the clipboard for further operations.

Comments

[breitsch breitsch]

Leaflet and maXbox are great.