joyrexus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Maps your current location using the Geolocation API and uses reverse geocoding to add address info to the resulting marker.
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>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></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 lng = pos.coords.longitude;
      geocode(lat, lng);
  }

  function geocode(lat, lng) {
    var geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          address = results[1].formatted_address;
          makeMap(lat, lng, address);
        } else {
          alert('No results found');
        }
      } else {
        alert('Geocoder failed due to: ' + status);
      }
    });
  }

  function makeMap(lat, lng, address) {
      var map = L.mapbox.map('map', 'examples.map-20v6611k')
          .setView([lat, lng], 8);
      geojson = {
        type: 'Feature',
        geometry: {
            type: 'Point',
            // coordinates here are in longitude, latitude order because
            // x, y is the standard for GeoJSON and many formats
            coordinates: [lng, lat]
        },
        properties: {
            title: address,
            description: lat.toString() + ', ' + lng.toString(),
            // one can customize markers by adding simplestyle properties
            // http://mapbox.com/developers/simplestyle/
            'marker-size': 'large',
            'marker-color': '#f0a',
        }
      };
      map.markerLayer.setGeoJSON(geojson).openPopup();
  };
</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>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></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 lng = pos.coords.longitude;
	geocode(lat, lng);
	}

	function geocode(lat, lng) {
	var geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(lat, lng);
	geocoder.geocode({'latLng': latlng}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	if (results[1]) {
	address = results[1].formatted_address;
	makeMap(lat, lng, address);
	} else {
	alert('No results found');
	}
	} else {
	alert('Geocoder failed due to: ' + status);
	}
	});
	}

	function makeMap(lat, lng, address) {
	var map = L.mapbox.map('map', 'examples.map-20v6611k')
	.setView([lat, lng], 8);
	geojson = {
	type: 'Feature',
	geometry: {
	type: 'Point',
	// coordinates here are in longitude, latitude order because
	// x, y is the standard for GeoJSON and many formats
	coordinates: [lng, lat]
	},
	properties: {
	title: address,
	description: lat.toString() + ', ' + lng.toString(),
	// one can customize markers by adding simplestyle properties
	// http://mapbox.com/developers/simplestyle/
	'marker-size': 'large',
	'marker-color': '#f0a',
	}
	};
	map.markerLayer.setGeoJSON(geojson).openPopup();
	};
	</script>