Skip to content

Instantly share code, notes, and snippets.

@joyrexus
Created January 29, 2014 03:16

Revisions

  1. J. Voigt created this gist Jan 29, 2014.
    3 changes: 3 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    Maps your current location using the [Geolocation API](http://www.html5rocks.com/en/tutorials/geolocation/trip_meter).

    See also [this example](https://www.mapbox.com/mapbox.js/example/v1.0.0/geolocation/), which shows how to map a user's location using Leaflet's [locate](http://leafletjs.com/reference.html#map-locate) method and [LocationEvent](http://leafletjs.com/reference.html#location-event).
    40 changes: 40 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    <!DOCTYPE html>
    <meta charset=utf-8 />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
    <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    <div id='map'></div>
    <script>
    navigator.geolocation.watchPosition(render);

    function render(pos) {
    var lat = pos.coords.latitude;
    var lon = pos.coords.longitude;
    var map = L.mapbox.map('map', 'examples.map-20v6611k')
    .setView([lat, lon], 8);

    L.mapbox.markerLayer({
    // this feature is in the GeoJSON format: see geojson.org
    // for the full specification
    type: 'Feature',
    geometry: {
    type: 'Point',
    // coordinates here are in longitude, latitude order because
    // x, y is the standard for GeoJSON and many formats
    coordinates: [lon, lat]
    },
    properties: {
    title: 'Current Location',
    description: lat.toString() + ', ' + lon.toString(),
    // one can customize markers by adding simplestyle properties
    // http://mapbox.com/developers/simplestyle/
    'marker-size': 'large',
    'marker-color': '#f0a',
    }
    }).addTo(map)
    };
    </script>