I Miss GetLatLon.com by migurski

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>I Miss GetLatLon.com</title>
    <script src="//d3js.org/d3.v2.min.js"></script>
    <script src="Grid.min.js"></script>
    <link rel="stylesheet" href="//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'),
                                '//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>