react-leaflet-locate-control

Plugin for React-Leaflet to display locate control

Thanks to https://github.com/domoritz/leaflet-locatecontrol/ on which this react plugin is 100% based on.

Example

Demo MyRoutes.io

Installation

yarn add react-leaflet-locate-control

// Import the package
import LocateControl from 'react-leaflet-locate-control'
 
// Setup LocateControl options
const locateOptions = {
  position: 'topright',
  strings: {
      title: 'Show me where I am, yo!'
  },
  onActivate: () => {} // callback before engine starts retrieving locations
}
 
// Inside your <Map> component add LocateControl
<Map>
  <LocateControl options={locateOptions} startDirectly/>
</Map>

startDirectly : Instantly start the locate control

Options

Option	Type	Description	Default
position	string	Position of the control	topleft
layer	ILayer	The layer that the user's location should be drawn on.	a new layer
setView	boolean or string	Set the map view (zoom and pan) to the user's location as it updates. Options are false, 'once', 'always', and 'untilPan'	untilPan
flyTo	boolean	Smooth pan and zoom to the location of the marker. Only works in Leaflet 1.0+.	false
keepCurrentZoomLevel	boolean	Only pan when setting the view.	false
clickBehavior	object	What to do when the user clicks on the control. Has two options inView and outOfView. Possible values are stop and setView.	{inView: 'stop', outOfView: 'setView'}
returnToPrevBounds	boolean	If set, save the map bounds just before centering to the user's location. When control is disabled, set the view back to the bounds that were saved.	false
cacheLocation	boolean	Keep a cache of the location after the user deactivates the control. If set to false, the user has to wait until the locate API returns a new location before they see where they are again.
drawCircle	boolean	If set, a circle that shows the location accuracy is drawn.	true
drawMarker	boolean	If set, the marker at the users' location is drawn.	true
markerClass	class	he class to be used to create the marker.	L.CircleMarker
circleStyle	Path options	Accuracy circle style properties.	see code
markerStyle	Path options	Inner marker style properties. Only works if your marker class supports setStyle.	see code
followCircleStyle	Path options	Changes to the accuracy circle while following. Only need to provide changes.	{}
followMarkerStyle	Path options	Changes to the inner marker while following. Only need to provide changes.	{}
icon	string	The CSS class for the icon.	fa fa-map-marker
iconLoading	string	The CSS class for the icon while loading.	fa fa-spinner fa-spin
iconElementTag	string	The element to be created for icons.	span
circlePadding	array	Padding around the accuracy circle.	[0, 0]
createButtonCallback	function	This callback can be used in case you would like to override button creation behavior.	see code
onLocationError	function	This even is called when the user's location is outside the bounds set on the map.	see code
onLocationOutsideMapBounds	function	Use metric units.	see code
showPopup	boolean	Display a pop-up when the user click on the inner marker.	true
strings	object	Strings used in the control. Options are title, metersUnit, feetUnit, popup, and outsideMapBoundsMsg	see code
locateOptions	Locate options	The default options passed to leaflets locate method.	see code
onActivate	function	Callback to add logic before the location engine starts working.

Go to https://github.com/domoritz/leaflet-locatecontrol/

Dependencies

• React-Leaflet
• Leaflet