D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
migurski
Full window
Github gist
I Miss GetLatLon.com
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>I Miss GetLatLon.com</title> <script src="https://d3js.org/d3.v2.min.js"></script> <script src="Grid.min.js"></script> <link rel="stylesheet" href="https://www.openstreetmap.us/~migurski/style.css" /> <style title="text/css"> <!-- #map { border-top: 1px solid black; border-bottom: 1px solid black; width: 100%; height: 350px; position: relative; overflow: hidden; margin: 0; padding: 0; } #map-center { z-index: 99; position: absolute; top: 50%; left: 50%; } #map-center img { position: absolute; top: -16px; left: -16px; } img.tile, div.tile { display: block; position: absolute; margin: 0; padding: 0; border: 0; -webkit-transform-origin: 0px 0px; } --> </style> </head> <body> <p> I miss getlatlon.com. </p> <div id="map"> <div id="map-center"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAMAAABgOjJdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFAAAA////pdmf3QAAAAJ0Uk5T/wDltzBKAAAAHUlEQVR42mJgRAMMowKjAkgChMFoiI0K4BEACDAAyNoEAWlto/IAAAAASUVORK5CYII="></div> </div> <pre id="info"> </pre> <script type="application/javascript"> <!-- var info = document.getElementById('info'); function update_info(map) { var loc = map.pointLocation(), lat = loc.lat, lon = loc.lon, zoom = map.grid.zoom(), round = (Math.round(zoom) == zoom), merc = new ps.Geo.Mercator(), point = merc.project(loc), x = 6378137 * point.x, y = 6378137 * point.y, coord = merc.locationCoordinate(loc).zoomTo(Math.round(zoom)).container(), lines = [ 'Lat, lon: ' + [lat.toFixed(7), lon.toFixed(7)].join(', '), ' X, Y: ' + [x.toFixed(1), y.toFixed(1)].join(', '), ' Zoom: ' + zoom.toFixed(0) + (round ? '' : ' (' + zoom.toFixed(2) + ')'), ' Tile: ' + [coord.zoom, coord.column, coord.row].join('/'), ' WKT’s: POINT (' + [lon.toFixed(9), lat.toFixed(9)].join(' ') + ')', ' POINT (' + [x.toFixed(3), y.toFixed(3)].join(' ') + ')', ] info.innerText = lines.join('\n'); } /* var map = ps.makeDivMap(document.getElementById('map'), 37.804319, -122.271210, 12); */ var map = ps.makeImgMap(document.getElementById('map'), 'https://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg', 37.804319, -122.271210, 12); map.onMoved(update_info); update_info(map); //--> </script> </body> </html>
Modified
http://d3js.org/d3.v2.min.js
to a secure url
https://d3js.org/d3.v2.min.js