A useful control to geolocate the user with many options.
Tested with Leaflet 0.7 in Firefox, Webkit and mobile Webkit.
Check out the demo at http://domoritz.github.io/leaflet-locatecontrol/demo/
Download and include the JavaScript and CSS files.
For testing purposes and development, you can use the latest version directly from my repository using rawgithub. However, don't do this in production environments! For production environments, use the mapbox CDN.
<link rel="stylesheet" href="//rawgithub.com/domoritz/leaflet-locatecontrol/gh-pages/src/L.Control.Locate.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="//rawgithub.com/domoritz/leaflet-locatecontrol/gh-pages/src/L.Control.Locate.ie.css"/>
<![endif]-->
<script src="//rawgithub.com/domoritz/leaflet-locatecontrol/gh-pages/src/L.Control.Locate.js" ></script>
L.control.locate().addTo(map);
To install the locate control with Bower, just run bower install leaflet.locatecontrol
.
The locate controls inherits options from Leaflet Controls.
L.control.locate({
position: 'topleft', // set the location of the control
drawCircle: true, // controls whether a circle is drawn that shows the uncertainty about the location
follow: false, // follow the user's location
setView: true, // automatically sets the map view to the user's location, enabled if `follow` is true
keepCurrentZoomLevel: false, // keep the current map zoom level when displaying the user's location. (if `false`, use maxZoom)
stopFollowingOnDrag: false, // stop following when the map is dragged if `follow` is true (deprecated, see below)
remainActive: false, // if true locate control remains active on click even if the user's location is in view.
markerClass: L.circleMarker, // L.circleMarker or L.marker
circleStyle: {}, // change the style of the circle around the user's location
markerStyle: {},
followCircleStyle: {}, // set difference for the style of the circle around the user's location while following
followMarkerStyle: {},
icon: 'icon-location', // `icon-location` or `icon-direction`
iconLoading: 'icon-spinner animate-spin', // class for loading icon
circlePadding: [0, 0], // padding around accuracy circle, value is passed to setBounds
metric: true, // use metric or imperial units
onLocationError: function(err) {alert(err.message)}, // define an error callback function
onLocationOutsideMapBounds: function(context) { // called when outside map boundaries
alert(context.options.strings.outsideMapBoundsMsg);
},
showPopup: true, // display a popup when the user click on the inner marker
strings: {
title: "Show me where I am", // title of the locate control
popup: "You are within {distance} {unit} from this point", // text to appear if user clicks on circle
outsideMapBoundsMsg: "You seem located outside the boundaries of the map" // default message for onLocationOutsideMapBounds
}
locateOptions: {} // define location options e.g enableHighAccuracy: true or maxZoom: 10
}).addTo(map);
You can call locate()
or stopLocate()
on the locate control object to set the location of page load for example.
// create control and add to map
var lc = L.control.locate().addTo(map);
// request location update and set location
lc.locate();
You can also use the helper functions to automatically stop following when the map is panned. See the example below.
var lc = L.control.locate().addTo(map);
map.on('dragstart', lc.stopFollowing);
Alternatively, you can unload events when not following to avoid unnecessary events.
map.on('startfollowing', function() {
map.on('dragstart', lc.stopFollowing);
}).on('stopfollowing', function() {
map.off('dragstart', lc.stopFollowing);
});
The locate control fires startfollowing
and stopfollowing
on the map object and passes self
as data.
Set the maxZoom
in locateOptions
(keepCurrentZoomLevel
must not be set to true).
map.addControl(L.control.locate({
locateOptions: {
maxZoom: 10
}}));
Sites that use this locate control:
Run the demo locally with python -m SimpleHTTPServer
and then open http://0.0.0.0:8000/demo.
To all contributors and issue reporters.
MIT