-L.Control.Locate = L.Control.extend({
- options: {
- position: 'topleft',
- drawCircle: true,
- follow: false, // follow with zoom and pan the user's location
- stopFollowingOnDrag: false, // if follow is true, stop following when map is dragged (deprecated)
- // range circle
- circleStyle: {
- color: '#136AEC',
- fillColor: '#136AEC',
- fillOpacity: 0.15,
- weight: 2,
- opacity: 0.5
- },
- // inner marker
- markerStyle: {
- color: '#136AEC',
- fillColor: '#2A93EE',
- fillOpacity: 0.7,
- weight: 2,
- opacity: 0.9,
- radius: 5
- },
- // changes to range circle and inner marker while following
- // it is only necessary to provide the things that should change
- followCircleStyle: {},
- followMarkerStyle: {
- //color: '#FFA500',
- //fillColor: '#FFB000'
- },
- icon: 'icon-location', // icon-location or icon-direction
- iconLoading: 'icon-spinner animate-spin',
- circlePadding: [0, 0],
- metric: true,
- onLocationError: function(err) {
- // this event is called in case of any location error
- // that is not a time out error.
- alert(err.message);
- },
- onLocationOutsideMapBounds: function(control) {
- // this event is repeatedly called when the location changes
- control.stopLocate();
- alert(context.options.strings.outsideMapBoundsMsg);
+(function (factory, window) {
+ // see https://github.com/Leaflet/Leaflet/blob/master/PLUGIN-GUIDE.md#module-loaders
+ // for details on how to structure a leaflet plugin.
+
+ // define an AMD module that relies on 'leaflet'
+ if (typeof define === 'function' && define.amd) {
+ define(['leaflet'], factory);
+
+ // define a Common JS module that relies on 'leaflet'
+ } else if (typeof exports === 'object') {
+ if (typeof window !== 'undefined' && window.L) {
+ module.exports = factory(L);
+ } else {
+ module.exports = factory(require('leaflet'));
+ }
+ }
+
+ // attach your plugin to the global 'L' variable
+ if(typeof window !== 'undefined' && window.L){
+ window.L.Control.Locate = factory(L);
+ }
+} (function (L) {
+ var LocateControl = L.Control.extend({
+ options: {
+ /** Position of the control */
+ position: 'topleft',
+ /** The layer that the user's location should be drawn on. By default creates a new layer. */
+ layer: undefined,
+ /**
+ * Automatically sets the map view (zoom and pan) to the user's location as it updates.
+ * While the map is following the user's location, the control is in the `following` state,
+ * which changes the style of the control and the circle marker.
+ *
+ * Possible values:
+ * - false: never updates the map view when location changes.
+ * - 'once': set the view when the location is first determined
+ * - 'always': always updates the map view when location changes.
+ * The map view follows the users location.
+ * - 'untilPan': (default) like 'always', except stops updating the
+ * view if the user has manually panned the map.
+ * The map view follows the users location until she pans.
+ */
+ setView: 'untilPan',
+ /** Keep the current map zoom level when setting the view and only pan. */
+ keepCurrentZoomLevel: false,
+ /** Smooth pan and zoom to the location of the marker. Only works in Leaflet 1.0+. */
+ flyTo: false,
+ /**
+ * The user location can be inside and outside the current view when the user clicks on the
+ * control that is already active. Both cases can be configures separately.
+ * Possible values are:
+ * - 'setView': zoom and pan to the current location
+ * - 'stop': stop locating and remove the location marker
+ */
+ clickBehavior: {
+ /** What should happen if the user clicks on the control while the location is within the current view. */
+ inView: 'stop',
+ /** What should happen if the user clicks on the control while the location is outside the current view. */
+ outOfView: 'setView',
+ },
+ /**
+ * 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.
+ */
+ returnToPrevBounds: false,
+ /** If set, a circle that shows the location accuracy is drawn. */
+ drawCircle: true,
+ /** If set, the marker at the users' location is drawn. */
+ drawMarker: true,
+ /** The class to be used to create the marker. For example L.CircleMarker or L.Marker */
+ markerClass: L.CircleMarker,
+ /** Accuracy circle style properties. */
+ circleStyle: {
+ color: '#136AEC',
+ fillColor: '#136AEC',
+ fillOpacity: 0.15,
+ weight: 2,
+ opacity: 0.5
+ },
+ /** Inner marker style properties. */
+ markerStyle: {
+ color: '#136AEC',
+ fillColor: '#2A93EE',
+ fillOpacity: 0.7,
+ weight: 2,
+ opacity: 0.9,
+ radius: 5
+ },
+ /**
+ * Changes to accuracy circle and inner marker while following.
+ * It is only necessary to provide the properties that should change.
+ */
+ followCircleStyle: {},
+ followMarkerStyle: {
+ // color: '#FFA500',
+ // fillColor: '#FFB000'
+ },
+ /** The CSS class for the icon. For example fa-location-arrow or fa-map-marker */
+ icon: 'fa fa-map-marker',
+ iconLoading: 'fa fa-spinner fa-spin',
+ /** The element to be created for icons. For example span or i */
+ iconElementTag: 'span',
+ /** Padding around the accuracy circle. */
+ circlePadding: [0, 0],
+ /** Use metric units. */
+ metric: true,
+ /** This event is called in case of any location error that is not a time out error. */
+ onLocationError: function(err, control) {
+ alert(err.message);
+ },
+ /**
+ * This even is called when the user's location is outside the bounds set on the map.
+ * The event is called repeatedly when the location changes.
+ */
+ onLocationOutsideMapBounds: function(control) {
+ control.stop();
+ alert(control.options.strings.outsideMapBoundsMsg);
+ },
+ /** Display a pop-up when the user click on the inner marker. */
+ showPopup: true,
+ strings: {
+ title: "Show me where I am",
+ metersUnit: "meters",
+ feetUnit: "feet",
+ popup: "You are within {distance} {unit} from this point",
+ outsideMapBoundsMsg: "You seem located outside the boundaries of the map"
+ },
+ /** The default options passed to leaflets locate method. */
+ locateOptions: {
+ maxZoom: Infinity,
+ watch: true, // if you overwrite this, visualization cannot be updated
+ setView: false // have to set this to false because we have to
+ // do setView manually
+ }