Geolocation Example

Uses HTML5 geolocation to find the user on OpenStreetMap

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map" class="smallmap"></div>
<p id="info"></p>
<p>a <a href="http://make.opendata.ch" target="_blank">make.opendata.ch</a> project</p>

CSS

#map {
    width:500px;height:340px;border:1px solid grey;padding: 0 0 0 0;margin:10px !important;
}

p {
    margin:10px; font:10pt sans-serif;
}

JavaScript

// Center on Geneva first
var lat=46.2078;
var lon=6.147;
var zoom=14;
alert(1);
var map = new OpenLayers.Map("map");
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);

var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);

// Recenter on user position
navigator.geolocation.getCurrentPosition(function(position) {       
        document.getElementById('info').innerHTML
            = " Latitude: " + 
                position.coords.latitude + 
              " Longitude: " +
                position.coords.longitude;

        var lonLat = new OpenLayers.LonLat(position.coords.longitude,
                                position.coords.latitude)
                  .transform(
                              new OpenLayers.Projection("EPSG:4326"), //transform from WGS 1984
                              map.getProjectionObject() //to Spherical Mercator Projection
                    );
                                        
        markers.addMarker(new OpenLayers.Marker(lonLat));
       
        map.setCenter(lonLat, 14 // Zoom level
        );

    });