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: 'leaflet-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: 'leaflet-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             /** After activating the plugin by clicking on the icon, zoom to the selected zoom level, even when keepCurrentZoomLevel is true. Set to 'false' to disable this feature. */
 172             initialZoomLevel: false,
 173             /**
 174              * This callback can be used to override the viewport tracking
 175              * This function should return a LatLngBounds object.
 176              *
 177              * For example to extend the viewport to ensure that a particular LatLng is visible:
 178              *
 179              * getLocationBounds: function(locationEvent) {
 180              *    return locationEvent.bounds.extend([-33.873085, 151.219273]);
 181              * },
 182              */
 183             getLocationBounds: function (locationEvent) {
 184                 return locationEvent.bounds;
 185             },
 186             /** Smooth pan and zoom to the location of the marker. Only works in Leaflet 1.0+. */
 187             flyTo: false,
 188             /**
 189              * The user location can be inside and outside the current view when the user clicks on the
 190              * control that is already active. Both cases can be configures separately.
 191              * Possible values are:
 192              *  - 'setView': zoom and pan to the current location
 193              *  - 'stop': stop locating and remove the location marker
 194              */
 195             clickBehavior: {
 196                 /** What should happen if the user clicks on the control while the location is within the current view. */
 197                 inView: 'stop',
 198                 /** What should happen if the user clicks on the control while the location is outside the current view. */
 199                 outOfView: 'setView',
 200                 /**
 201                  * What should happen if the user clicks on the control while the location is within the current view
 202                  * and we could be following but are not. Defaults to a special value which inherits from 'inView';
 203                  */
 204                 inViewNotFollowing: 'inView',
 205             },
 206             /**
 207              * If set, save the map bounds just before centering to the user's
 208              * location. When control is disabled, set the view back to the
 209              * bounds that were saved.
 210              */
 211             returnToPrevBounds: false,
 212             /**
 213              * Keep a cache of the location after the user deactivates the control. If set to false, the user has to wait
 214              * until the locate API returns a new location before they see where they are again.
 215              */
 216             cacheLocation: true,
 217             /** If set, a circle that shows the location accuracy is drawn. */
 218             drawCircle: true,
 219             /** If set, the marker at the users' location is drawn. */
 220             drawMarker: true,
 221             /** If set and supported then show the compass heading */
 222             showCompass: true,
 223             /** The class to be used to create the marker. For example L.CircleMarker or L.Marker */
 224             markerClass: LocationMarker,
 225             /** The class us be used to create the compass bearing arrow */
 226             compassClass: CompassMarker,
 227             /** Accuracy circle style properties. NOTE these styles should match the css animations styles */
 228             circleStyle: {
 229                 className:   'leaflet-control-locate-circle',
 230                 color:       '#136AEC',
 231                 fillColor:   '#136AEC',
 232                 fillOpacity: 0.15,
 233                 weight:      0
 234             },
 235             /** Inner marker style properties. Only works if your marker class supports `setStyle`. */
 236             markerStyle: {
 237                 className:   'leaflet-control-locate-marker',
 238                 color:       '#fff',
 239                 fillColor:   '#2A93EE',
 240                 fillOpacity: 1,
 241                 weight:      3,
 242                 opacity:     1,
 243                 radius:      9
 244             },
 245             /** Compass */
 246             compassStyle: {
 247                 fillColor:   '#2A93EE',
 248                 fillOpacity: 1,
 249                 weight:      0,
 250                 color:       '#fff',
 251                 opacity:     1,
 252                 radius:      9, // How far is the arrow is from the center of of the marker
 253                 width:       9, // Width of the arrow
 254                 depth:       6  // Length of the arrow
 255             },
 256             /**
 257              * Changes to accuracy circle and inner marker while following.
 258              * It is only necessary to provide the properties that should change.
 259              */
 260             followCircleStyle: {},
 261             followMarkerStyle: {
 262                 // color: '#FFA500',
 263                 // fillColor: '#FFB000'
 264             },
 265             followCompassStyle: {},
 266             /** The CSS class for the icon. For example fa-location-arrow or fa-map-marker */
 267             icon: 'fa fa-map-marker',
 268             iconLoading: 'fa fa-spinner fa-spin',
 269             /** The element to be created for icons. For example span or i */
 270             iconElementTag: 'span',
 271             /** Padding around the accuracy circle. */
 272             circlePadding: [0, 0],
 273             /** Use metric units. */
 274             metric: true,
 275             /**
 276              * This callback can be used in case you would like to override button creation behavior.
 277              * This is useful for DOM manipulation frameworks such as angular etc.
 278              * This function should return an object with HtmlElement for the button (link property) and the icon (icon property).
 279              */
 280             createButtonCallback: function (container, options) {
 281                 var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
 282                 link.title = options.strings.title;
 283                 var icon = L.DomUtil.create(options.iconElementTag, options.icon, link);
 284                 return { link: link, icon: icon };
 285             },
 286             /** This event is called in case of any location error that is not a time out error. */
 287             onLocationError: function(err, control) {
 288                 alert(err.message);
 289             },
 290             /**
 291              * This event is called when the user's location is outside the bounds set on the map.
 292              * The event is called repeatedly when the location changes.
 293              */
 294             onLocationOutsideMapBounds: function(control) {
 295                 control.stop();
 296                 alert(control.options.strings.outsideMapBoundsMsg);
 297             },
 298             /** Display a pop-up when the user click on the inner marker. */
 299             showPopup: true,
 300             strings: {
 301                 title: "Show me where I am",
 302                 metersUnit: "meters",
 303                 feetUnit: "feet",
 304                 popup: "You are within {distance} {unit} from this point",
 305                 outsideMapBoundsMsg: "You seem located outside the boundaries of the map"
 306             },
 307             /** The default options passed to leaflets locate method. */
 308             locateOptions: {
 309                 maxZoom: Infinity,
 310                 watch: true,  // if you overwrite this, visualization cannot be updated
 311                 setView: false // have to set this to false because we have to
 312                                // do setView manually
 313             }
 314         },
 315
 316         initialize: function (options) {
 317             // set default options if nothing is set (merge one step deep)
 318             for (var i in options) {
 319                 if (typeof this.options[i] === 'object') {
 320                     L.extend(this.options[i], options[i]);
 321                 } else {
 322                     this.options[i] = options[i];
 323                 }
 324             }
 325
 326             // extend the follow marker style and circle from the normal style
 327             this.options.followMarkerStyle = L.extend({}, this.options.markerStyle, this.options.followMarkerStyle);
 328             this.options.followCircleStyle = L.extend({}, this.options.circleStyle, this.options.followCircleStyle);
 329             this.options.followCompassStyle = L.extend({}, this.options.compassStyle, this.options.followCompassStyle);
 330         },
 331
 332         /**
 333          * Add control to map. Returns the container for the control.
 334          */
 335         onAdd: function (map) {
 336             var container = L.DomUtil.create('div',
 337                 'leaflet-control-locate leaflet-bar leaflet-control');
 338
 339             this._layer = this.options.layer || new L.LayerGroup();
 340             this._layer.addTo(map);
 341             this._event = undefined;
 342             this._compassHeading = null;
 343             this._prevBounds = null;
 344
 345             var linkAndIcon = this.options.createButtonCallback(container, this.options);
 346             this._link = linkAndIcon.link;
 347             this._icon = linkAndIcon.icon;
 348
 349             L.DomEvent
 350                 .on(this._link, 'click', L.DomEvent.stopPropagation)
 351                 .on(this._link, 'click', L.DomEvent.preventDefault)
 352                 .on(this._link, 'click', this._onClick, this)
 353                 .on(this._link, 'dblclick', L.DomEvent.stopPropagation);
 354
 355             this._resetVariables();
 356
 357             this._map.on('unload', this._unload, this);
 358
 359             return container;
 360         },
 361
 362         /**
 363          * This method is called when the user clicks on the control.
 364          */
 365         _onClick: function() {
 366             this._justClicked = true;
 367             var wasFollowing =  this._isFollowing();
 368             this._userPanned = false;
 369             this._userZoomed = false;
 370
 371             if (this._active && !this._event) {
 372                 // click while requesting
 373                 this.stop();
 374             } else if (this._active && this._event !== undefined) {
 375                 var behaviors = this.options.clickBehavior;
 376                 var behavior = behaviors.outOfView;
 377                 if (this._map.getBounds().contains(this._event.latlng)) {
 378                     behavior = wasFollowing ? behaviors.inView : behaviors.inViewNotFollowing;
 379                 }
 380
 381                 // Allow inheriting from another behavior
 382                 if (behaviors[behavior]) {
 383                     behavior = behaviors[behavior];
 384                 }
 385
 386                 switch (behavior) {
 387                     case 'setView':
 388                         this.setView();
 389                         break;
 390                     case 'stop':
 391                         this.stop();
 392                         if (this.options.returnToPrevBounds) {
 393                             var f = this.options.flyTo ? this._map.flyToBounds : this._map.fitBounds;
 394                             f.bind(this._map)(this._prevBounds);
 395                         }
 396                         break;
 397                 }
 398             } else {
 399                 if (this.options.returnToPrevBounds) {
 400                   this._prevBounds = this._map.getBounds();
 401                 }
 402                 this.start();
 403             }
 404
 405             this._updateContainerStyle();
 406         },
 407
 408         /**
 409          * Starts the plugin:
 410          * - activates the engine
 411          * - draws the marker (if coordinates available)
 412          */
 413         start: function() {
 414             this._activate();
 415
 416             if (this._event) {
 417                 this._drawMarker(this._map);
 418
 419                 // if we already have a location but the user clicked on the control
 420                 if (this.options.setView) {
 421                     this.setView();
 422                 }
 423             }
 424             this._updateContainerStyle();
 425         },
 426
 427         /**
 428          * Stops the plugin:
 429          * - deactivates the engine
 430          * - reinitializes the button
 431          * - removes the marker
 432          */
 433         stop: function() {
 434             this._deactivate();
 435
 436             this._cleanClasses();
 437             this._resetVariables();
 438
 439             this._removeMarker();
 440         },
 441
 442         /**
 443          * Keep the control active but stop following the location
 444          */
 445         stopFollowing: function() {
 446             this._userPanned = true;
 447             this._updateContainerStyle();
 448             this._drawMarker();
 449         },
 450
 451         /**
 452          * This method launches the location engine.
 453          * It is called before the marker is updated,
 454          * event if it does not mean that the event will be ready.
 455          *
 456          * Override it if you want to add more functionalities.
 457          * It should set the this._active to true and do nothing if
 458          * this._active is true.
 459          */
 460         _activate: function() {
 461             if (!this._active) {
 462                 this._map.locate(this.options.locateOptions);
 463                 this._active = true;
 464
 465                 // bind event listeners
 466                 this._map.on('locationfound', this._onLocationFound, this);
 467                 this._map.on('locationerror', this._onLocationError, this);
 468                 this._map.on('dragstart', this._onDrag, this);
 469                 this._map.on('zoomstart', this._onZoom, this);
 470                 this._map.on('zoomend', this._onZoomEnd, this);
 471                 if (this.options.showCompass) {
 472                     var oriAbs = 'ondeviceorientationabsolute' in window;
 473                     if (oriAbs || ('ondeviceorientation' in window)) {
 474                         var _this = this;
 475                         var deviceorientation = function () {
 476                             L.DomEvent.on(window, oriAbs ? 'deviceorientationabsolute' : 'deviceorientation', _this._onDeviceOrientation, _this);
 477                         };
 478                         if (DeviceOrientationEvent && typeof DeviceOrientationEvent.requestPermission === 'function') {
 479                             DeviceOrientationEvent.requestPermission().then(function (permissionState) {
 480                                 if (permissionState === 'granted') {
 481                                     deviceorientation();
 482                                 }
 483                             })
 484                         } else {
 485                             deviceorientation();
 486                         }
 487                     }
 488                 }
 489             }
 490         },
 491
 492         /**
 493          * Called to stop the location engine.
 494          *
 495          * Override it to shutdown any functionalities you added on start.
 496          */
 497         _deactivate: function() {
 498             this._map.stopLocate();
 499             this._active = false;
 500
 501             if (!this.options.cacheLocation) {
 502                 this._event = undefined;
 503             }
 504
 505             // unbind event listeners
 506             this._map.off('locationfound', this._onLocationFound, this);
 507             this._map.off('locationerror', this._onLocationError, this);
 508             this._map.off('dragstart', this._onDrag, this);
 509             this._map.off('zoomstart', this._onZoom, this);
 510             this._map.off('zoomend', this._onZoomEnd, this);
 511             if (this.options.showCompass) {
 512                 this._compassHeading = null;
 513                 if ('ondeviceorientationabsolute' in window) {
 514                     L.DomEvent.off(window, 'deviceorientationabsolute', this._onDeviceOrientation, this);
 515                 } else if ('ondeviceorientation' in window) {
 516                     L.DomEvent.off(window, 'deviceorientation', this._onDeviceOrientation, this);
 517                 }
 518             }
 519         },
 520
 521         /**
 522          * Zoom (unless we should keep the zoom level) and an to the current view.
 523          */
 524         setView: function() {
 525             this._drawMarker();
 526             if (this._isOutsideMapBounds()) {
 527                 this._event = undefined;  // clear the current location so we can get back into the bounds
 528                 this.options.onLocationOutsideMapBounds(this);
 529             } else {
 530                 if (this._justClicked && this.options.initialZoomLevel !== false) {
 531                     var f = this.options.flyTo ? this._map.flyTo : this._map.setView;
 532                     f.bind(this._map)([this._event.latitude, this._event.longitude], this.options.initialZoomLevel);
 533                 } else
 534                 if (this.options.keepCurrentZoomLevel) {
 535                     var f = this.options.flyTo ? this._map.flyTo : this._map.panTo;
 536                     f.bind(this._map)([this._event.latitude, this._event.longitude]);
 537                 } else {
 538                     var f = this.options.flyTo ? this._map.flyToBounds : this._map.fitBounds;
 539                     // Ignore zoom events while setting the viewport as these would stop following
 540                     this._ignoreEvent = true;
 541                     f.bind(this._map)(this.options.getLocationBounds(this._event), {
 542                         padding: this.options.circlePadding,
 543                         maxZoom: this.options.locateOptions.maxZoom
 544                     });
 545                     L.Util.requestAnimFrame(function(){
 546                         // Wait until after the next animFrame because the flyTo can be async
 547                         this._ignoreEvent = false;
 548                     }, this);
 549
 550                 }
 551             }
 552         },
 553
 554         /**
 555          *
 556          */
 557         _drawCompass: function() {
 558             if (!this._event) {
 559                 return;
 560             }
 561
 562             var latlng = this._event.latlng;
 563
 564             if (this.options.showCompass && latlng && this._compassHeading !== null) {
 565                 var cStyle = this._isFollowing() ? this.options.followCompassStyle : this.options.compassStyle;
 566                 if (!this._compass) {
 567                     this._compass = new this.options.compassClass(latlng, this._compassHeading, cStyle).addTo(this._layer);
 568                 } else {
 569                     this._compass.setLatLng(latlng);
 570                     this._compass.setHeading(this._compassHeading);
 571                     // If the compassClass can be updated with setStyle, update it.
 572                     if (this._compass.setStyle) {
 573                         this._compass.setStyle(cStyle);
 574                     }
 575                 }
 576                 //
 577             }
 578             if (this._compass && (!this.options.showCompass || this._compassHeading === null)) {
 579                 this._compass.removeFrom(this._layer);
 580                 this._compass = null;
 581             }
 582         },
 583
 584         /**
 585          * Draw the marker and accuracy circle on the map.
 586          *
 587          * Uses the event retrieved from onLocationFound from the map.
 588          */
 589         _drawMarker: function() {
 590             if (this._event.accuracy === undefined) {
 591                 this._event.accuracy = 0;
 592             }
 593
 594             var radius = this._event.accuracy;
 595             var latlng = this._event.latlng;
 596
 597             // circle with the radius of the location's accuracy
 598             if (this.options.drawCircle) {
 599                 var style = this._isFollowing() ? this.options.followCircleStyle : this.options.circleStyle;
 600
 601                 if (!this._circle) {
 602                     this._circle = L.circle(latlng, radius, style).addTo(this._layer);
 603                 } else {
 604                     this._circle.setLatLng(latlng).setRadius(radius).setStyle(style);
 605                 }
 606             }
 607
 608             var distance, unit;
 609             if (this.options.metric) {
 610                 distance = radius.toFixed(0);
 611                 unit =  this.options.strings.metersUnit;
 612             } else {
 613                 distance = (radius * 3.2808399).toFixed(0);
 614                 unit = this.options.strings.feetUnit;
 615             }
 616
 617             // small inner marker
 618             if (this.options.drawMarker) {
 619                 var mStyle = this._isFollowing() ? this.options.followMarkerStyle : this.options.markerStyle;
 620                 if (!this._marker) {
 621                     this._marker = new this.options.markerClass(latlng, mStyle).addTo(this._layer);
 622                 } else {
 623                     this._marker.setLatLng(latlng);
 624                     // If the markerClass can be updated with setStyle, update it.
 625                     if (this._marker.setStyle) {
 626                         this._marker.setStyle(mStyle);
 627                     }
 628                 }
 629             }
 630
 631             this._drawCompass();
 632
 633             var t = this.options.strings.popup;
 634             function getPopupText() {
 635                 if (typeof t === 'string') {
 636                     return L.Util.template(t, {distance: distance, unit: unit});
 637                 } else if (typeof t === 'function') {
 638                     return t({distance: distance, unit: unit});
 639                 } else {
 640                     return t;
 641                 }
 642             }
 643             if (this.options.showPopup && t && this._marker) {
 644                 this._marker
 645                     .bindPopup(getPopupText())
 646                     ._popup.setLatLng(latlng);
 647             }
 648             if (this.options.showPopup && t && this._compass) {
 649                 this._compass
 650                     .bindPopup(getPopupText())
 651                     ._popup.setLatLng(latlng);
 652             }
 653         },
 654
 655         /**
 656          * Remove the marker from map.
 657          */
 658         _removeMarker: function() {
 659             this._layer.clearLayers();
 660             this._marker = undefined;
 661             this._circle = undefined;
 662         },
 663
 664         /**
 665          * Unload the plugin and all event listeners.
 666          * Kind of the opposite of onAdd.
 667          */
 668         _unload: function() {
 669             this.stop();
 670             this._map.off('unload', this._unload, this);
 671         },
 672
 673         /**
 674          * Sets the compass heading
 675          */
 676         _setCompassHeading: function(angle) {
 677             if (!isNaN(parseFloat(angle)) && isFinite(angle)) {
 678                 angle = Math.round(angle);
 679
 680                 this._compassHeading = angle;
 681                 L.Util.requestAnimFrame(this._drawCompass, this);
 682             } else {
 683                 this._compassHeading = null;
 684             }
 685         },
 686
 687         /**
 688          * If the compass fails calibration just fail safely and remove the compass
 689          */
 690         _onCompassNeedsCalibration: function() {
 691             this._setCompassHeading();
 692         },
 693
 694         /**
 695          * Process and normalise compass events
 696          */
 697         _onDeviceOrientation: function(e) {
 698             if (!this._active) {
 699                 return;
 700             }
 701
 702             if (e.webkitCompassHeading) {
 703                 // iOS
 704                 this._setCompassHeading(e.webkitCompassHeading);
 705             } else if (e.absolute && e.alpha) {
 706                 // Android
 707                 this._setCompassHeading(360 - e.alpha)
 708             }
 709         },
 710
 711         /**
 712          * Calls deactivate and dispatches an error.
 713          */
 714         _onLocationError: function(err) {
 715             // ignore time out error if the location is watched
 716             if (err.code == 3 && this.options.locateOptions.watch) {
 717                 return;
 718             }
 719
 720             this.stop();
 721             this.options.onLocationError(err, this);
 722         },
 723
 724         /**
 725          * Stores the received event and updates the marker.
 726          */
 727         _onLocationFound: function(e) {
 728             // no need to do anything if the location has not changed
 729             if (this._event &&
 730                 (this._event.latlng.lat === e.latlng.lat &&
 731                  this._event.latlng.lng === e.latlng.lng &&
 732                      this._event.accuracy === e.accuracy)) {
 733                 return;
 734             }
 735
 736             if (!this._active) {
 737                 // we may have a stray event
 738                 return;
 739             }
 740
 741             this._event = e;
 742
 743             this._drawMarker();
 744             this._updateContainerStyle();
 745
 746             switch (this.options.setView) {
 747                 case 'once':
 748                     if (this._justClicked) {
 749                         this.setView();
 750                     }
 751                     break;
 752                 case 'untilPan':
 753                     if (!this._userPanned) {
 754                         this.setView();
 755                     }
 756                     break;
 757                 case 'untilPanOrZoom':
 758                     if (!this._userPanned && !this._userZoomed) {
 759                         this.setView();
 760                     }
 761                     break;
 762                 case 'always':
 763                     this.setView();
 764                     break;
 765                 case false:
 766                     // don't set the view
 767                     break;
 768             }
 769
 770             this._justClicked = false;
 771         },
 772
 773         /**
 774          * When the user drags. Need a separate event so we can bind and unbind event listeners.
 775          */
 776         _onDrag: function() {
 777             // only react to drags once we have a location
 778             if (this._event && !this._ignoreEvent) {
 779                 this._userPanned = true;
 780                 this._updateContainerStyle();
 781                 this._drawMarker();
 782             }
 783         },
 784
 785         /**
 786          * When the user zooms. Need a separate event so we can bind and unbind event listeners.
 787          */
 788         _onZoom: function() {
 789             // only react to drags once we have a location
 790             if (this._event && !this._ignoreEvent) {
 791                 this._userZoomed = true;
 792                 this._updateContainerStyle();
 793                 this._drawMarker();
 794             }
 795         },
 796
 797         /**
 798          * After a zoom ends update the compass and handle sideways zooms
 799          */
 800         _onZoomEnd: function() {
 801             if (this._event) {
 802                 this._drawCompass();
 803             }
 804
 805             if (this._event && !this._ignoreEvent) {
 806                 // If we have zoomed in and out and ended up sideways treat it as a pan
 807                 if (this._marker && !this._map.getBounds().pad(-.3).contains(this._marker.getLatLng())) {
 808                     this._userPanned = true;
 809                     this._updateContainerStyle();
 810                     this._drawMarker();
 811                 }
 812             }
 813         },
 814
 815         /**
 816          * Compute whether the map is following the user location with pan and zoom.
 817          */
 818         _isFollowing: function() {
 819             if (!this._active) {
 820                 return false;
 821             }
 822
 823             if (this.options.setView === 'always') {
 824                 return true;
 825             } else if (this.options.setView === 'untilPan') {
 826                 return !this._userPanned;
 827             } else if (this.options.setView === 'untilPanOrZoom') {
 828                 return !this._userPanned && !this._userZoomed;
 829             }
 830         },
 831
 832         /**
 833          * Check if location is in map bounds
 834          */
 835         _isOutsideMapBounds: function() {
 836             if (this._event === undefined) {
 837                 return false;
 838             }
 839             return this._map.options.maxBounds &&
 840                 !this._map.options.maxBounds.contains(this._event.latlng);
 841         },
 842
 843         /**
 844          * Toggles button class between following and active.
 845          */
 846         _updateContainerStyle: function() {
 847             if (!this._container) {
 848                 return;
 849             }
 850
 851             if (this._active && !this._event) {
 852                 // active but don't have a location yet
 853                 this._setClasses('requesting');
 854             } else if (this._isFollowing()) {
 855                 this._setClasses('following');
 856             } else if (this._active) {
 857                 this._setClasses('active');
 858             } else {
 859                 this._cleanClasses();
 860             }
 861         },
 862
 863         /**
 864          * Sets the CSS classes for the state.
 865          */
 866         _setClasses: function(state) {
 867             if (state == 'requesting') {
 868                 removeClasses(this._container, "active following");
 869                 addClasses(this._container, "requesting");
 870
 871                 removeClasses(this._icon, this.options.icon);
 872                 addClasses(this._icon, this.options.iconLoading);
 873             } else if (state == 'active') {
 874                 removeClasses(this._container, "requesting following");
 875                 addClasses(this._container, "active");
 876
 877                 removeClasses(this._icon, this.options.iconLoading);
 878                 addClasses(this._icon, this.options.icon);
 879             } else if (state == 'following') {
 880                 removeClasses(this._container, "requesting");
 881                 addClasses(this._container, "active following");
 882
 883                 removeClasses(this._icon, this.options.iconLoading);
 884                 addClasses(this._icon, this.options.icon);
 885             }
 886         },
 887
 888         /**
 889          * Removes all classes from button.
 890          */
 891         _cleanClasses: function() {
 892             L.DomUtil.removeClass(this._container, "requesting");
 893             L.DomUtil.removeClass(this._container, "active");
 894             L.DomUtil.removeClass(this._container, "following");
 895
 896             removeClasses(this._icon, this.options.iconLoading);
 897             addClasses(this._icon, this.options.icon);
 898         },
 899
 900         /**
 901          * Reinitializes state variables.
 902          */
 903         _resetVariables: function() {
 904             // whether locate is active or not
 905             this._active = false;
 906
 907             // true if the control was clicked for the first time
 908             // we need this so we can pan and zoom once we have the location
 909             this._justClicked = false;
 910
 911             // true if the user has panned the map after clicking the control
 912             this._userPanned = false;
 913
 914             // true if the user has zoomed the map after clicking the control
 915             this._userZoomed = false;
 916         }
 917     });
 918
 919     L.control.locate = function (options) {
 920         return new L.Control.Locate(options);
 921     };
 922
 923     return LocateControl;
 924 }, window));