What we would really like to do is access our machine's location.1 We can do this using Leaflet's map object's locate method. Among its optional parameters are whether or not to set the view to center on our current location and what zoomlevel to do so at.

ourmap.locate({setView: true, maxZoom: 16});

This method triggers one of two events depending on whether it is successful or not. We will define two event handlers, one for each event. If we are found we want to popup a message and place a marker at our location. If we are not successful we just want a simple error message.

function onLocationFound(e) {
    var radius = e.accuracy / 2;

    //Create a popup that tells us our current position
    L.marker(e.latlng).addTo(ourmap)
        .bindPopup("I found you within " + radius + " meters of this point").openPopup(); 
    L.circle(e.latlng, radius).addTo(ourmap);
}

function onLocationError(e) {
    alert(e.message);
}

We tell Leaflet about these two event handlers with the on method:

ourmap.on('locationfound', onLocationFound);
ourmap.on('locationerror', onLocationError);

One last thing: the Leaflet location functionality requires us to define a few more bits of CSS. We add the following to the STYLE block in our HEAD section

.leaflet-control-locate {
        border: 1px solid rgba(0,0,0,0.4);}
 .leaflet-control-locate a {
        background-color: #fff;
        background-position: -3px, -2px;}
 .leaflet-control-locate.active a {
        background-position: -33px -2px;}

My Leaflet GIS Work

Full Code

<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style type="text/css">
#mapdiv { height: 300px; width: 800px; background-color: black; margin: auto;}
 .leaflet-control-locate {
        border: 1px solid rgba(0,0,0,0.4);}
 .leaflet-control-locate a {
        background-color: #fff;
        background-position: -3px, -2px;}
 .leaflet-control-locate.active a {
        background-position: -33px -2px;}
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">--></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>

</head>

<body>

<h3>Version 1.0</h3>
<div id="mapdiv"></div>
<script>
var ourmap = L.map('mapdiv').setView([51.505, -0.09], 13); //setting the view of the map

//the "credit section" on the bottom of the map, setting the zoom and adding it
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: 'Map data &copy; <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/"> CC-BY-SA </a>, Imagery <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors',
     maxZoom: 20
 }).addTo(ourmap);

ourmap.locate({setView: true, maxZoom: 16}); 

function onLocationFound(e) {
    var radius = e.accuracy / 2;

    //Create a popup that tells us our current position
    L.marker(e.latlng).addTo(ourmap)
        .bindPopup("I found you within " + radius + " meters of this point").openPopup(); 
    L.circle(e.latlng, radius).addTo(ourmap);
}

function onLocationError(e) {
    alert(e.message);
}
ourmap.on('locationfound', onLocationFound);
ourmap.on('locationerror', onLocationError);

</script>

</body>

Next