]> git.openstreetmap.org Git - rails.git/blob - vendor/assets/leaflet/leaflet.locate.js
Update leaflet.locate.js
[rails.git] / vendor / assets / leaflet / leaflet.locate.js
1 /*!
2 Copyright (c) 2016 Dominik Moritz
3
4 This file is part of the leaflet locate control. It is licensed under the MIT license.
5 You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
6 */
7 (function (factory, window) {
8      // see https://github.com/Leaflet/Leaflet/blob/master/PLUGIN-GUIDE.md#module-loaders
9      // for details on how to structure a leaflet plugin.
10
11     // define an AMD module that relies on 'leaflet'
12     if (typeof define === 'function' && define.amd) {
13         define(['leaflet'], factory);
14
15     // define a Common JS module that relies on 'leaflet'
16     } else if (typeof exports === 'object') {
17         if (typeof window !== 'undefined' && window.L) {
18             module.exports = factory(L);
19         } else {
20             module.exports = factory(require('leaflet'));
21         }
22     }
23
24     // attach your plugin to the global 'L' variable
25     if (typeof window !== 'undefined' && window.L){
26         window.L.Control.Locate = factory(L);
27     }
28 } (function (L) {
29     var LDomUtilApplyClassesMethod = function(method, element, classNames) {
30         classNames = classNames.split(' ');
31         classNames.forEach(function(className) {
32             L.DomUtil[method].call(this, element, className);
33         });
34     };
35
36     var addClasses = function(el, names) { LDomUtilApplyClassesMethod('addClass', el, names); };
37     var removeClasses = function(el, names) { LDomUtilApplyClassesMethod('removeClass', el, names); };
38
39     /**
40      * Compatible with L.Circle but a true marker instead of a path
41      */
42     var LocationMarker = L.Marker.extend({
43         initialize: function (latlng, options) {
44             L.Util.setOptions(this, options);
45             this._latlng = latlng;
46             this.createIcon();
47         },
48
49         /**
50          * Create a styled circle location marker
51          */
52         createIcon: function() {
53             var opt = this.options;
54
55             var style = '';
56
57             if (opt.color !== undefined) {
58                 style += 'stroke:'+opt.color+';';
59             }
60             if (opt.weight !== undefined) {
61                 style += 'stroke-width:'+opt.weight+';';
62             }
63             if (opt.fillColor !== undefined) {
64                 style += 'fill:'+opt.fillColor+';';
65             }
66             if (opt.fillOpacity !== undefined) {
67                 style += 'fill-opacity:'+opt.fillOpacity+';';
68             }
69             if (opt.opacity !== undefined) {
70                 style += 'opacity:'+opt.opacity+';';
71             }
72
73             var icon = this._getIconSVG(opt, style);
74
75             this._locationIcon = L.divIcon({
76                 className: icon.className,
77                 html: icon.svg,
78                 iconSize: [icon.w,icon.h],
79             });
80
81             this.setIcon(this._locationIcon);
82         },
83
84         /**
85          * Return the raw svg for the shape
86          *
87          * Split so can be easily overridden
88          */
89         _getIconSVG: function(options, style) {
90             var r = options.radius;
91             var w = options.weight;
92             var s = r + w;
93             var s2 = s * 2;
94             var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="'+s2+'" height="'+s2+'" version="1.1" viewBox="-'+s+' -'+s+' '+s2+' '+s2+'">' +
95             '<circle r="'+r+'" style="'+style+'" />' +
96             '</svg>';
97             return {
98                 className: 'leafet-control-locate-location',
99                 svg: svg,
100                 w: s2,
101                 h: s2
102             };
103         },
104
105         setStyle: function(style) {
106             L.Util.setOptions(this, style);
107             this.createIcon();
108         }
109     });
110
111     var CompassMarker = LocationMarker.extend({
112         initialize: function (latlng, heading, options) {
113             L.Util.setOptions(this, options);
114             this._latlng = latlng;
115             this._heading = heading;
116             this.createIcon();
117         },
118
119         setHeading: function(heading) {
120             this._heading = heading;
121         },
122
123         /**
124          * Create a styled arrow compass marker
125          */
126         _getIconSVG: function(options, style) {
127             var r = options.radius;
128             var w = (options.width + options.weight);
129             var h = (r+options.depth + options.weight)*2;
130             var path = 'M0,0 l'+(options.width/2)+','+options.depth+' l-'+(w)+',0 z';
131             var svgstyle = 'transform: rotate('+this._heading+'deg)';
132             var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="'+(w)+'" height="'+h+'" version="1.1" viewBox="-'+(w/2)+' 0 '+w+' '+h+'" style="'+svgstyle+'">'+
133             '<path d="'+path+'" style="'+style+'" />'+
134             '</svg>';
135             return {
136                 className: 'leafet-control-locate-heading',
137                 svg: svg,
138                 w: w,
139                 h: h
140             };
141         },
142     });
143
144
145     var LocateControl = L.Control.extend({
146         options: {
147             /** Position of the control */
148             position: 'topleft',
149             /** The layer that the user's location should be drawn on. By default creates a new layer. */
150             layer: undefined,
151             /**
152              * Automatically sets the map view (zoom and pan) to the user's location as it updates.
153              * While the map is following the user's location, the control is in the `following` state,
154              * which changes the style of the control and the circle marker.
155              *
156              * Possible values:
157              *  - false: never updates the map view when location changes.
158              *  - 'once': set the view when the location is first determined
159              *  - 'always': always updates the map view when location changes.
160              *              The map view follows the user's location.
161              *  - 'untilPan': like 'always', except stops updating the
162              *                view if the user has manually panned the map.
163              *                The map view follows the user's location until she pans.
164              *  - 'untilPanOrZoom': (default) like 'always', except stops updating the
165              *                view if the user has manually panned the map.
166              *                The map view follows the user's location until she pans.
167              */
168             setView: 'untilPanOrZoom',
169             /** Keep the current map zoom level when setting the view and only pan. */
170             keepCurrentZoomLevel: false,
171             /** Smooth pan and zoom to the location of the marker. Only works in Leaflet 1.0+. */
172             flyTo: false,
173             /**
174              * The user location can be inside and outside the current view when the user clicks on the
175              * control that is already active. Both cases can be configures separately.
176              * Possible values are:
177              *  - 'setView': zoom and pan to the current location
178              *  - 'stop': stop locating and remove the location marker
179              */
180             clickBehavior: {
181                 /** What should happen if the user clicks on the control while the location is within the current view. */
182                 inView: 'stop',
183                 /** What should happen if the user clicks on the control while the location is outside the current view. */
184                 outOfView: 'setView',
185             },
186             /**
187              * If set, save the map bounds just before centering to the user's
188              * location. When control is disabled, set the view back to the
189              * bounds that were saved.
190              */
191             returnToPrevBounds: false,
192             /**
193              * Keep a cache of the location after the user deactivates the control. If set to false, the user has to wait
194              * until the locate API returns a new location before they see where they are again.
195              */
196             cacheLocation: true,
197             /** If set, a circle that shows the location accuracy is drawn. */
198             drawCircle: true,
199             /** If set, the marker at the users' location is drawn. */
200             drawMarker: true,
201             /** If set and supported then show the compass heading */
202             showCompass: true,
203             /** The class to be used to create the marker. For example L.CircleMarker or L.Marker */
204             markerClass: LocationMarker,
205             /** The class us be used to create the compass bearing arrow */
206             compassClass: CompassMarker,
207             /** Accuracy circle style properties. NOTE these styles should match the css animations styles */
208             circleStyle: {
209                 className:   'leaflet-control-locate-circle',
210                 color:       '#136AEC',
211                 fillColor:   '#136AEC',
212                 fillOpacity: 0.15,
213                 weight:      0
214             },
215             /** Inner marker style properties. Only works if your marker class supports `setStyle`. */
216             markerStyle: {
217                 className:   'leaflet-control-locate-marker',
218                 color:       '#fff',
219                 fillColor:   '#2A93EE',
220                 fillOpacity: 1,
221                 weight:      3,
222                 opacity:     1,
223                 radius:      9
224             },
225             /** Compass */
226             compassStyle: {
227                 fillColor:   '#2A93EE',
228                 fillOpacity: 1,
229                 weight:      0,
230                 color:       '#fff',
231                 opacity:     1,
232                 radius:      9, // How far is the arrow is from the center of of the marker
233                 width:       9, // Width of the arrow
234                 depth:       6  // Length of the arrow
235             },
236             /**
237              * Changes to accuracy circle and inner marker while following.
238              * It is only necessary to provide the properties that should change.
239              */
240             followCircleStyle: {},
241             followMarkerStyle: {
242                 // color: '#FFA500',
243                 // fillColor: '#FFB000'
244             },
245             followCompassStyle: {},
246             /** The CSS class for the icon. For example fa-location-arrow or fa-map-marker */
247             icon: 'fa fa-map-marker',
248             iconLoading: 'fa fa-spinner fa-spin',
249             /** The element to be created for icons. For example span or i */
250             iconElementTag: 'span',
251             /** Padding around the accuracy circle. */
252             circlePadding: [0, 0],
253             /** Use metric units. */
254             metric: true,
255             /**
256              * This callback can be used in case you would like to override button creation behavior.
257              * This is useful for DOM manipulation frameworks such as angular etc.
258              * This function should return an object with HtmlElement for the button (link property) and the icon (icon property).
259              */
260             createButtonCallback: function (container, options) {
261                 var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
262                 link.title = options.strings.title;
263                 var icon = L.DomUtil.create(options.iconElementTag, options.icon, link);
264                 return { link: link, icon: icon };
265             },
266             /** This event is called in case of any location error that is not a time out error. */
267             onLocationError: function(err, control) {
268                 alert(err.message);
269             },
270             /**
271              * This event is called when the user's location is outside the bounds set on the map.
272              * The event is called repeatedly when the location changes.
273              */
274             onLocationOutsideMapBounds: function(control) {
275                 control.stop();
276                 alert(control.options.strings.outsideMapBoundsMsg);
277             },
278             /** Display a pop-up when the user click on the inner marker. */
279             showPopup: true,
280             strings: {
281                 title: "Show me where I am",
282                 metersUnit: "meters",
283                 feetUnit: "feet",
284                 popup: "You are within {distance} {unit} from this point",
285                 outsideMapBoundsMsg: "You seem located outside the boundaries of the map"
286             },
287             /** The default options passed to leaflets locate method. */
288             locateOptions: {
289                 maxZoom: Infinity,
290                 watch: true,  // if you overwrite this, visualization cannot be updated
291                 setView: false // have to set this to false because we have to
292                                // do setView manually
293             }
294         },
295
296         initialize: function (options) {
297             // set default options if nothing is set (merge one step deep)
298             for (var i in options) {
299                 if (typeof this.options[i] === 'object') {
300                     L.extend(this.options[i], options[i]);
301                 } else {
302                     this.options[i] = options[i];
303                 }
304             }
305
306             // extend the follow marker style and circle from the normal style
307             this.options.followMarkerStyle = L.extend({}, this.options.markerStyle, this.options.followMarkerStyle);
308             this.options.followCircleStyle = L.extend({}, this.options.circleStyle, this.options.followCircleStyle);
309             this.options.followCompassStyle = L.extend({}, this.options.compassStyle, this.options.followCompassStyle);
310         },
311
312         /**
313          * Add control to map. Returns the container for the control.
314          */
315         onAdd: function (map) {
316             var container = L.DomUtil.create('div',
317                 'leaflet-control-locate leaflet-bar leaflet-control');
318
319             this._layer = this.options.layer || new L.LayerGroup();
320             this._layer.addTo(map);
321             this._event = undefined;
322             this._compassHeading = null;
323             this._prevBounds = null;
324
325             var linkAndIcon = this.options.createButtonCallback(container, this.options);
326             this._link = linkAndIcon.link;
327             this._icon = linkAndIcon.icon;
328
329             L.DomEvent
330                 .on(this._link, 'click', L.DomEvent.stopPropagation)
331                 .on(this._link, 'click', L.DomEvent.preventDefault)
332                 .on(this._link, 'click', this._onClick, this)
333                 .on(this._link, 'dblclick', L.DomEvent.stopPropagation);
334
335             this._resetVariables();
336
337             this._map.on('unload', this._unload, this);
338
339             return container;
340         },
341
342         /**
343          * This method is called when the user clicks on the control.
344          */
345         _onClick: function() {
346             this._justClicked = true;
347             this._userPanned = false;
348             this._userZoomed = false;
349
350             if (this._active && !this._event) {
351                 // click while requesting
352                 this.stop();
353             } else if (this._active && this._event !== undefined) {
354                 var behavior = this._map.getBounds().contains(this._event.latlng) ?
355                     this.options.clickBehavior.inView : this.options.clickBehavior.outOfView;
356                 switch (behavior) {
357                     case 'setView':
358                         this.setView();
359                         break;
360                     case 'stop':
361                         this.stop();
362                         if (this.options.returnToPrevBounds) {
363                             var f = this.options.flyTo ? this._map.flyToBounds : this._map.fitBounds;
364                             f.bind(this._map)(this._prevBounds);
365                         }
366                         break;
367                 }
368             } else {
369                 if (this.options.returnToPrevBounds) {
370                   this._prevBounds = this._map.getBounds();
371                 }
372                 this.start();
373             }
374
375             this._updateContainerStyle();
376         },
377
378         /**
379          * Starts the plugin:
380          * - activates the engine
381          * - draws the marker (if coordinates available)
382          */
383         start: function() {
384             this._activate();
385
386             if (this._event) {
387                 this._drawMarker(this._map);
388
389                 // if we already have a location but the user clicked on the control
390                 if (this.options.setView) {
391                     this.setView();
392                 }
393             }
394             this._updateContainerStyle();
395         },
396
397         /**
398          * Stops the plugin:
399          * - deactivates the engine
400          * - reinitializes the button
401          * - removes the marker
402          */
403         stop: function() {
404             this._deactivate();
405
406             this._cleanClasses();
407             this._resetVariables();
408
409             this._removeMarker();
410         },
411
412         /**
413          * This method launches the location engine.
414          * It is called before the marker is updated,
415          * event if it does not mean that the event will be ready.
416          *
417          * Override it if you want to add more functionalities.
418          * It should set the this._active to true and do nothing if
419          * this._active is true.
420          */
421         _activate: function() {
422             if (!this._active) {
423                 this._map.locate(this.options.locateOptions);
424                 this._active = true;
425
426                 // bind event listeners
427                 this._map.on('locationfound', this._onLocationFound, this);
428                 this._map.on('locationerror', this._onLocationError, this);
429                 this._map.on('dragstart', this._onDrag, this);
430                 this._map.on('zoomstart', this._onZoom, this);
431                 this._map.on('zoomend', this._onZoomEnd, this);
432                 if (this.options.showCompass) {
433                     if ('ondeviceorientationabsolute' in window) {
434                         L.DomEvent.on(window, 'deviceorientationabsolute', this._onDeviceOrientation, this);
435                     } else if ('ondeviceorientation' in window) {
436                         L.DomEvent.on(window, 'deviceorientation', this._onDeviceOrientation, this);
437                     }
438                 }
439             }
440         },
441
442         /**
443          * Called to stop the location engine.
444          *
445          * Override it to shutdown any functionalities you added on start.
446          */
447         _deactivate: function() {
448             this._map.stopLocate();
449             this._active = false;
450
451             if (!this.options.cacheLocation) {
452                 this._event = undefined;
453             }
454
455             // unbind event listeners
456             this._map.off('locationfound', this._onLocationFound, this);
457             this._map.off('locationerror', this._onLocationError, this);
458             this._map.off('dragstart', this._onDrag, this);
459             this._map.off('zoomstart', this._onZoom, this);
460             this._map.off('zoomend', this._onZoomEnd, this);
461             if (this.options.showCompass) {
462                 this._compassHeading = null;
463                 if ('ondeviceorientationabsolute' in window) {
464                     L.DomEvent.off(window, 'deviceorientationabsolute', this._onDeviceOrientation, this);
465                 } else if ('ondeviceorientation' in window) {
466                     L.DomEvent.off(window, 'deviceorientation', this._onDeviceOrientation, this);
467                 }
468             }
469         },
470
471         /**
472          * Zoom (unless we should keep the zoom level) and an to the current view.
473          */
474         setView: function() {
475             this._drawMarker();
476             if (this._isOutsideMapBounds()) {
477                 this._event = undefined;  // clear the current location so we can get back into the bounds
478                 this.options.onLocationOutsideMapBounds(this);
479             } else {
480                 if (this.options.keepCurrentZoomLevel) {
481                     var f = this.options.flyTo ? this._map.flyTo : this._map.panTo;
482                     f.bind(this._map)([this._event.latitude, this._event.longitude]);
483                 } else {
484                     var f = this.options.flyTo ? this._map.flyToBounds : this._map.fitBounds;
485                     f.bind(this._map)(this._event.bounds, {
486                         padding: this.options.circlePadding,
487                         maxZoom: this.options.locateOptions.maxZoom
488                     });
489                 }
490             }
491         },
492
493         /**
494          *
495          */
496         _drawCompass: function() {
497             var latlng = this._event.latlng;
498
499             if (this.options.showCompass && latlng && this._compassHeading !== null) {
500                 var cStyle = this._isFollowing() ? this.options.followCompassStyle : this.options.compassStyle;
501                 if (!this._compass) {
502                     this._compass = new this.options.compassClass(latlng, this._compassHeading, cStyle).addTo(this._layer);
503                 } else {
504                     this._compass.setLatLng(latlng);
505                     this._compass.setHeading(this._compassHeading);
506                     // If the compassClass can be updated with setStyle, update it.
507                     if (this._compass.setStyle) {
508                         this._compass.setStyle(cStyle);
509                     }
510                 }
511                 // 
512             }
513             if (this._compass && (!this.options.showCompass || this._compassHeading === null)) {
514                 this._compass.removeFrom(this._layer);
515                 this._compass = null;
516             }
517         },
518
519         /**
520          * Draw the marker and accuracy circle on the map.
521          *
522          * Uses the event retrieved from onLocationFound from the map.
523          */
524         _drawMarker: function() {
525             if (this._event.accuracy === undefined) {
526                 this._event.accuracy = 0;
527             }
528
529             var radius = this._event.accuracy;
530             var latlng = this._event.latlng;
531
532             // circle with the radius of the location's accuracy
533             if (this.options.drawCircle) {
534                 var style = this._isFollowing() ? this.options.followCircleStyle : this.options.circleStyle;
535
536                 if (!this._circle) {
537                     this._circle = L.circle(latlng, radius, style).addTo(this._layer);
538                 } else {
539                     this._circle.setLatLng(latlng).setRadius(radius).setStyle(style);
540                 }
541             }
542
543             var distance, unit;
544             if (this.options.metric) {
545                 distance = radius.toFixed(0);
546                 unit =  this.options.strings.metersUnit;
547             } else {
548                 distance = (radius * 3.2808399).toFixed(0);
549                 unit = this.options.strings.feetUnit;
550             }
551
552             // small inner marker
553             if (this.options.drawMarker) {
554                 var mStyle = this._isFollowing() ? this.options.followMarkerStyle : this.options.markerStyle;
555                 if (!this._marker) {
556                     this._marker = new this.options.markerClass(latlng, mStyle).addTo(this._layer);
557                 } else {
558                     this._marker.setLatLng(latlng);
559                     // If the markerClass can be updated with setStyle, update it.
560                     if (this._marker.setStyle) {
561                         this._marker.setStyle(mStyle);
562                     }
563                 }
564             }
565
566             this._drawCompass();
567
568             var t = this.options.strings.popup;
569             if (this.options.showPopup && t && this._marker) {
570                 this._marker
571                     .bindPopup(L.Util.template(t, {distance: distance, unit: unit}))
572                     ._popup.setLatLng(latlng);
573             }
574             if (this.options.showPopup && t && this._compass) {
575                 this._compass
576                     .bindPopup(L.Util.template(t, {distance: distance, unit: unit}))
577                     ._popup.setLatLng(latlng);
578             }
579         },
580
581         /**
582          * Remove the marker from map.
583          */
584         _removeMarker: function() {
585             this._layer.clearLayers();
586             this._marker = undefined;
587             this._circle = undefined;
588         },
589
590         /**
591          * Unload the plugin and all event listeners.
592          * Kind of the opposite of onAdd.
593          */
594         _unload: function() {
595             this.stop();
596             this._map.off('unload', this._unload, this);
597         },
598
599         /**
600          * Sets the compass heading
601          */
602         _setCompassHeading: function(angle) {
603             if (!isNaN(parseFloat(angle)) && isFinite(angle)) {
604                 angle = Math.round(angle);
605
606                 this._compassHeading = angle;
607                 L.Util.requestAnimFrame(this._drawCompass, this);
608             } else {
609                 this._compassHeading = null;
610             }
611         },
612
613         /**
614          * If the compass fails calibration just fail safely and remove the compass
615          */
616         _onCompassNeedsCalibration: function() {
617             this._setCompassHeading();
618         },
619
620         /**
621          * Process and normalise compass events
622          */
623         _onDeviceOrientation: function(e) {
624             if (!this._active) {
625                 return;
626             }
627
628             if (e.webkitCompassHeading) {
629                 // iOS
630                 this._setCompassHeading(e.webkitCompassHeading);
631             } else if (e.absolute && e.alpha) {
632                 // Android
633                 this._setCompassHeading(360 - e.alpha)
634             }
635         },
636
637         /**
638          * Calls deactivate and dispatches an error.
639          */
640         _onLocationError: function(err) {
641             // ignore time out error if the location is watched
642             if (err.code == 3 && this.options.locateOptions.watch) {
643                 return;
644             }
645
646             this.stop();
647             this.options.onLocationError(err, this);
648         },
649
650         /**
651          * Stores the received event and updates the marker.
652          */
653         _onLocationFound: function(e) {
654             // no need to do anything if the location has not changed
655             if (this._event &&
656                 (this._event.latlng.lat === e.latlng.lat &&
657                  this._event.latlng.lng === e.latlng.lng &&
658                      this._event.accuracy === e.accuracy)) {
659                 return;
660             }
661
662             if (!this._active) {
663                 // we may have a stray event
664                 return;
665             }
666
667             this._event = e;
668
669             this._drawMarker();
670             this._updateContainerStyle();
671
672             switch (this.options.setView) {
673                 case 'once':
674                     if (this._justClicked) {
675                         this.setView();
676                     }
677                     break;
678                 case 'untilPan':
679                     if (!this._userPanned) {
680                         this.setView();
681                     }
682                     break;
683                 case 'untilPanOrZoom':
684                     if (!this._userPanned && !this._userZoomed) {
685                         this.setView();
686                     }
687                     break;
688                 case 'always':
689                     this.setView();
690                     break;
691                 case false:
692                     // don't set the view
693                     break;
694             }
695
696             this._justClicked = false;
697         },
698
699         /**
700          * When the user drags. Need a separate event so we can bind and unbind event listeners.
701          */
702         _onDrag: function() {
703             // only react to drags once we have a location
704             if (this._event) {
705                 this._userPanned = true;
706                 this._updateContainerStyle();
707                 this._drawMarker();
708             }
709         },
710
711         /**
712          * When the user zooms. Need a separate event so we can bind and unbind event listeners.
713          */
714         _onZoom: function() {
715             // only react to drags once we have a location
716             if (this._event) {
717                 this._userZoomed = true;
718                 this._updateContainerStyle();
719                 this._drawMarker();
720             }
721         },
722
723         /**
724          * After a zoom ends update the compass
725          */
726         _onZoomEnd: function() {
727             if (this._event) {
728                 this._drawCompass();
729             }
730         },
731
732         /**
733          * Compute whether the map is following the user location with pan and zoom.
734          */
735         _isFollowing: function() {
736             if (!this._active) {
737                 return false;
738             }
739
740             if (this.options.setView === 'always') {
741                 return true;
742             } else if (this.options.setView === 'untilPan') {
743                 return !this._userPanned;
744             } else if (this.options.setView === 'untilPanOrZoom') {
745                 return !this._userPanned && !this._userZoomed;
746             }
747         },
748
749         /**
750          * Check if location is in map bounds
751          */
752         _isOutsideMapBounds: function() {
753             if (this._event === undefined) {
754                 return false;
755             }
756             return this._map.options.maxBounds &&
757                 !this._map.options.maxBounds.contains(this._event.latlng);
758         },
759
760         /**
761          * Toggles button class between following and active.
762          */
763         _updateContainerStyle: function() {
764             if (!this._container) {
765                 return;
766             }
767
768             if (this._active && !this._event) {
769                 // active but don't have a location yet
770                 this._setClasses('requesting');
771             } else if (this._isFollowing()) {
772                 this._setClasses('following');
773             } else if (this._active) {
774                 this._setClasses('active');
775             } else {
776                 this._cleanClasses();
777             }
778         },
779
780         /**
781          * Sets the CSS classes for the state.
782          */
783         _setClasses: function(state) {
784             if (state == 'requesting') {
785                 removeClasses(this._container, "active following");
786                 addClasses(this._container, "requesting");
787
788                 removeClasses(this._icon, this.options.icon);
789                 addClasses(this._icon, this.options.iconLoading);
790             } else if (state == 'active') {
791                 removeClasses(this._container, "requesting following");
792                 addClasses(this._container, "active");
793
794                 removeClasses(this._icon, this.options.iconLoading);
795                 addClasses(this._icon, this.options.icon);
796             } else if (state == 'following') {
797                 removeClasses(this._container, "requesting");
798                 addClasses(this._container, "active following");
799
800                 removeClasses(this._icon, this.options.iconLoading);
801                 addClasses(this._icon, this.options.icon);
802             }
803         },
804
805         /**
806          * Removes all classes from button.
807          */
808         _cleanClasses: function() {
809             L.DomUtil.removeClass(this._container, "requesting");
810             L.DomUtil.removeClass(this._container, "active");
811             L.DomUtil.removeClass(this._container, "following");
812
813             removeClasses(this._icon, this.options.iconLoading);
814             addClasses(this._icon, this.options.icon);
815         },
816
817         /**
818          * Reinitializes state variables.
819          */
820         _resetVariables: function() {
821             // whether locate is active or not
822             this._active = false;
823
824             // true if the control was clicked for the first time
825             // we need this so we can pan and zoom once we have the location
826             this._justClicked = false;
827
828             // true if the user has panned the map after clicking the control
829             this._userPanned = false;
830
831             // true if the user has zoomed the map after clicking the control
832             this._userZoomed = false;
833         }
834     });
835
836     L.control.locate = function (options) {
837         return new L.Control.Locate(options);
838     };
839
840     return LocateControl;
841 }, window));