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.
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
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. |