Angular: Geolocation test
http://angularjs.org/
HTML
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css">
<!DOCTYPE html>
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<body>
<div id='map'></div>
<script src="script.js"></script>
</body>
CSS
html, body {
height: 100%;
}
#map {
height: 100%;
}
JavaScript
// Code goes here
var loadMap = function (id) {
var COPENHAGEN = [55.68332, 12.571833];
var map = L.map(id);
var tile_url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
var layer = L.tileLayer(tile_url, {
attribution: 'OSM'
});
map.addLayer(layer);
map.setView(COPENHAGEN, 19);
map.locate({setView: true, watch: true}) /* This will return map so you can do chaining */
.on('locationfound', function(e){
var marker = L.marker([e.latitude, e.longitude]).bindPopup('Your are here :)');
var circle = L.circle([e.latitude, e.longitude], e.accuracy/2, {
weight: 1,
color: 'blue',
fillColor: '#cacaca',
fillOpacity: 0.2
});
map.addLayer(marker);
map.addLayer(circle);
})
.on('locationerror', function(e){
console.log(e);
alert(e.message);
});
};
loadMap('map');
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(params, callback);
}
}
}]);