joyrexus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Maps your current location using the Geolocation API.
See also this example, which shows how to map a user's location using Leaflet's locate method and LocationEvent.

  
## index.html
<!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>
	<!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>