D3 Examples - leafletjs location

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>
  
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map{ width:100%; height:100%; }
  </style>
</head>
​
<body>
  
  
  <div id="map"></div>
  
  <script>
    
var map = L.map("map");
​
L.tileLayer("https://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);
​
​
function foundLocation(e){
    L.marker(e.latlng).addTo(map).bindPopup("Catch You!");
}
function notFundLocation(e){
​
    var point = [32.0975, 120.5958333];
    map.setView(point, 10);
    L.marker(point).addTo(map).bindPopup("Some where");
    alert("Unable to find your location. You may need to enable Geolocation.");
}
​
map.on("locationfound", foundLocation);
map.on("locationerror", notFundLocation);
​
map.locate({ setView:true, maxZoom:10 });
    
  </script>
</body>
​
    