Update to iD v2.18.1

[rails.git] / vendor / assets / leaflet / leaflet.locate.js

diff --git a/vendor/assets/leaflet/leaflet.locate.js b/vendor/assets/leaflet/leaflet.locate.js
index f1e6d39e18eaf625c64b30d5f09864dae7bcc12a..99aa3433712beeb5f34a986cfea073fffc45e9d7 100644 (file)
--- a/vendor/assets/leaflet/leaflet.locate.js
+++ b/vendor/assets/leaflet/leaflet.locate.js
@@ -22,10 +22,126 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
     }
 
     // attach your plugin to the global 'L' variable
     }
 
     // attach your plugin to the global 'L' variable

-    if(typeof window !== 'undefined' && window.L){
+    if (typeof window !== 'undefined' && window.L){

         window.L.Control.Locate = factory(L);
     }
 } (function (L) {
         window.L.Control.Locate = factory(L);
     }
 } (function (L) {

+    var LDomUtilApplyClassesMethod = function(method, element, classNames) {
+        classNames = classNames.split(' ');
+        classNames.forEach(function(className) {
+            L.DomUtil[method].call(this, element, className);
+        });
+    };
+
+    var addClasses = function(el, names) { LDomUtilApplyClassesMethod('addClass', el, names); };
+    var removeClasses = function(el, names) { LDomUtilApplyClassesMethod('removeClass', el, names); };
+
+    /**
+     * Compatible with L.Circle but a true marker instead of a path
+     */
+    var LocationMarker = L.Marker.extend({
+        initialize: function (latlng, options) {
+            L.Util.setOptions(this, options);
+            this._latlng = latlng;
+            this.createIcon();
+        },
+
+        /**
+         * Create a styled circle location marker
+         */
+        createIcon: function() {
+            var opt = this.options;
+
+            var style = '';
+
+            if (opt.color !== undefined) {
+                style += 'stroke:'+opt.color+';';
+            }
+            if (opt.weight !== undefined) {
+                style += 'stroke-width:'+opt.weight+';';
+            }
+            if (opt.fillColor !== undefined) {
+                style += 'fill:'+opt.fillColor+';';
+            }
+            if (opt.fillOpacity !== undefined) {
+                style += 'fill-opacity:'+opt.fillOpacity+';';
+            }
+            if (opt.opacity !== undefined) {
+                style += 'opacity:'+opt.opacity+';';
+            }
+
+            var icon = this._getIconSVG(opt, style);
+
+            this._locationIcon = L.divIcon({
+                className: icon.className,
+                html: icon.svg,
+                iconSize: [icon.w,icon.h],
+            });
+
+            this.setIcon(this._locationIcon);
+        },
+
+        /**
+         * Return the raw svg for the shape
+         *
+         * Split so can be easily overridden
+         */
+        _getIconSVG: function(options, style) {
+            var r = options.radius;
+            var w = options.weight;
+            var s = r + w;
+            var s2 = s * 2;
+            var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="'+s2+'" height="'+s2+'" version="1.1" viewBox="-'+s+' -'+s+' '+s2+' '+s2+'">' +
+            '<circle r="'+r+'" style="'+style+'" />' +
+            '</svg>';
+            return {
+                className: 'leaflet-control-locate-location',
+                svg: svg,
+                w: s2,
+                h: s2
+            };
+        },
+
+        setStyle: function(style) {
+            L.Util.setOptions(this, style);
+            this.createIcon();
+        }
+    });
+
+    var CompassMarker = LocationMarker.extend({
+        initialize: function (latlng, heading, options) {
+            L.Util.setOptions(this, options);
+            this._latlng = latlng;
+            this._heading = heading;
+            this.createIcon();
+        },
+
+        setHeading: function(heading) {
+            this._heading = heading;
+        },
+
+        /**
+         * Create a styled arrow compass marker
+         */
+        _getIconSVG: function(options, style) {
+            var r = options.radius;
+            var w = (options.width + options.weight);
+            var h = (r+options.depth + options.weight)*2;
+            var path = 'M0,0 l'+(options.width/2)+','+options.depth+' l-'+(w)+',0 z';
+            var svgstyle = 'transform: rotate('+this._heading+'deg)';
+            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+'">'+
+            '<path d="'+path+'" style="'+style+'" />'+
+            '</svg>';
+            return {
+                className: 'leaflet-control-locate-heading',
+                svg: svg,
+                w: w,
+                h: h
+            };
+        },
+    });
+
+

     var LocateControl = L.Control.extend({
         options: {
             /** Position of the control */
     var LocateControl = L.Control.extend({
         options: {
             /** Position of the control */


@@ -41,14 +157,32 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
              *  - 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.
              *  - 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
+             *              The map view follows the user's location.
+             *  - 'untilPan': like 'always', except stops updating the
+             *                view if the user has manually panned the map.
+             *                The map view follows the user's location until she pans.
+             *  - 'untilPanOrZoom': (default) like 'always', except stops updating the

              *                view if the user has manually panned the map.
              *                view if the user has manually panned the map.

-             *                The map view follows the users location until she pans.
+             *                The map view follows the user's location until she pans.

              */
              */

-            setView: 'untilPan',
+            setView: 'untilPanOrZoom',

             /** Keep the current map zoom level when setting the view and only pan. */
             keepCurrentZoomLevel: false,
             /** Keep the current map zoom level when setting the view and only pan. */
             keepCurrentZoomLevel: false,

+           /** 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. */
+           initialZoomLevel: false,
+            /**
+             * This callback can be used to override the viewport tracking
+             * This function should return a LatLngBounds object.
+             *
+             * For example to extend the viewport to ensure that a particular LatLng is visible:
+             *
+             * getLocationBounds: function(locationEvent) {
+             *    return locationEvent.bounds.extend([-33.873085, 151.219273]);
+             * },
+             */
+            getLocationBounds: function (locationEvent) {
+                return locationEvent.bounds;
+            },

             /** Smooth pan and zoom to the location of the marker. Only works in Leaflet 1.0+. */
             flyTo: false,
             /**
             /** Smooth pan and zoom to the location of the marker. Only works in Leaflet 1.0+. */
             flyTo: false,
             /**


@@ -63,6 +197,11 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
                 inView: 'stop',
                 /** What should happen if the user clicks on the control while the location is outside the current view. */
                 outOfView: 'setView',
                 inView: 'stop',
                 /** What should happen if the user clicks on the control while the location is outside the current view. */
                 outOfView: 'setView',

+                /**
+                 * What should happen if the user clicks on the control while the location is within the current view
+                 * and we could be following but are not. Defaults to a special value which inherits from 'inView';
+                 */
+                inViewNotFollowing: 'inView',

             },
             /**
              * If set, save the map bounds just before centering to the user's
             },
             /**
              * If set, save the map bounds just before centering to the user's


@@ -70,28 +209,49 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
              * bounds that were saved.
              */
             returnToPrevBounds: false,
              * bounds that were saved.
              */
             returnToPrevBounds: false,

+            /**
+             * 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.
+             */
+            cacheLocation: true,

             /** 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,
             /** 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,

+            /** If set and supported then show the compass heading */
+            showCompass: true,

             /** The class to be used to create the marker. For example L.CircleMarker or L.Marker */
             /** The class to be used to create the marker. For example L.CircleMarker or L.Marker */

-            markerClass: L.CircleMarker,
-            /** Accuracy circle style properties. */
+            markerClass: LocationMarker,
+            /** The class us be used to create the compass bearing arrow */
+            compassClass: CompassMarker,
+            /** Accuracy circle style properties. NOTE these styles should match the css animations styles */

             circleStyle: {
             circleStyle: {

-                color: '#136AEC',
-                fillColor: '#136AEC',
+                className:   'leaflet-control-locate-circle',
+                color:       '#136AEC',
+                fillColor:   '#136AEC',

                 fillOpacity: 0.15,
                 fillOpacity: 0.15,

-                weight: 2,
-                opacity: 0.5
+                weight:      0

             },
             },

-            /** Inner marker style properties. */
+            /** Inner marker style properties. Only works if your marker class supports `setStyle`. */

             markerStyle: {
             markerStyle: {

-                color: '#136AEC',
-                fillColor: '#2A93EE',
-                fillOpacity: 0.7,
-                weight: 2,
-                opacity: 0.9,
-                radius: 5
+                className:   'leaflet-control-locate-marker',
+                color:       '#fff',
+                fillColor:   '#2A93EE',
+                fillOpacity: 1,
+                weight:      3,
+                opacity:     1,
+                radius:      9
+            },
+            /** Compass */
+            compassStyle: {
+                fillColor:   '#2A93EE',
+                fillOpacity: 1,
+                weight:      0,
+                color:       '#fff',
+                opacity:     1,
+                radius:      9, // How far is the arrow is from the center of of the marker
+                width:       9, // Width of the arrow
+                depth:       6  // Length of the arrow

             },
             /**
              * Changes to accuracy circle and inner marker while following.
             },
             /**
              * Changes to accuracy circle and inner marker while following.


@@ -102,6 +262,7 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
                 // color: '#FFA500',
                 // fillColor: '#FFB000'
             },
                 // color: '#FFA500',
                 // fillColor: '#FFB000'
             },

+            followCompassStyle: {},

             /** 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 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',


@@ -111,12 +272,23 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
             circlePadding: [0, 0],
             /** Use metric units. */
             metric: true,
             circlePadding: [0, 0],
             /** Use metric units. */
             metric: true,

+            /**
+             * This callback can be used in case you would like to override button creation behavior.
+             * This is useful for DOM manipulation frameworks such as angular etc.
+             * This function should return an object with HtmlElement for the button (link property) and the icon (icon property).
+             */
+            createButtonCallback: function (container, options) {
+                var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
+                link.title = options.strings.title;
+                var icon = L.DomUtil.create(options.iconElementTag, options.icon, link);
+                return { link: link, icon: icon };
+            },

             /** 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 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.
+             * This event 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) {
              * The event is called repeatedly when the location changes.
              */
             onLocationOutsideMapBounds: function(control) {


@@ -154,6 +326,7 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
             // extend the follow marker style and circle from the normal style
             this.options.followMarkerStyle = L.extend({}, this.options.markerStyle, this.options.followMarkerStyle);
             this.options.followCircleStyle = L.extend({}, this.options.circleStyle, this.options.followCircleStyle);
             // extend the follow marker style and circle from the normal style
             this.options.followMarkerStyle = L.extend({}, this.options.markerStyle, this.options.followMarkerStyle);
             this.options.followCircleStyle = L.extend({}, this.options.circleStyle, this.options.followCircleStyle);

+            this.options.followCompassStyle = L.extend({}, this.options.compassStyle, this.options.followCompassStyle);

         },
 
         /**
         },
 
         /**


@@ -166,11 +339,12 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
             this._layer = this.options.layer || new L.LayerGroup();
             this._layer.addTo(map);
             this._event = undefined;
             this._layer = this.options.layer || new L.LayerGroup();
             this._layer.addTo(map);
             this._event = undefined;

+            this._compassHeading = null;
+            this._prevBounds = null;

 
 

-            this._link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
-            this._link.href = '#';
-            this._link.title = this.options.strings.title;
-            this._icon = L.DomUtil.create(this.options.iconElementTag, this.options.icon, this._link);
+            var linkAndIcon = this.options.createButtonCallback(container, this.options);
+            this._link = linkAndIcon.link;
+            this._icon = linkAndIcon.icon;

 
             L.DomEvent
                 .on(this._link, 'click', L.DomEvent.stopPropagation)
 
             L.DomEvent
                 .on(this._link, 'click', L.DomEvent.stopPropagation)


@@ -190,15 +364,25 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
          */
         _onClick: function() {
             this._justClicked = true;
          */
         _onClick: function() {
             this._justClicked = true;

+            var wasFollowing =  this._isFollowing();

             this._userPanned = false;
             this._userPanned = false;

-            this._prevBounds = null;
+            this._userZoomed = false;

 
             if (this._active && !this._event) {
                 // click while requesting
                 this.stop();
             } else if (this._active && this._event !== undefined) {
 
             if (this._active && !this._event) {
                 // click while requesting
                 this.stop();
             } else if (this._active && this._event !== undefined) {

-                var behavior = this._map.getBounds().contains(this._event.latlng) ?
-                    this.options.clickBehavior.inView : this.options.clickBehavior.outOfView;
+                var behaviors = this.options.clickBehavior;
+                var behavior = behaviors.outOfView;
+                if (this._map.getBounds().contains(this._event.latlng)) {
+                    behavior = wasFollowing ? behaviors.inView : behaviors.inViewNotFollowing;
+                }
+
+                // Allow inheriting from another behavior
+                if (behaviors[behavior]) {
+                    behavior = behaviors[behavior];
+                }
+

                 switch (behavior) {
                     case 'setView':
                         this.setView();
                 switch (behavior) {
                     case 'setView':
                         this.setView();


@@ -255,6 +439,15 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
             this._removeMarker();
         },
 
             this._removeMarker();
         },
 

+        /**
+         * Keep the control active but stop following the location
+         */
+        stopFollowing: function() {
+            this._userPanned = true;
+            this._updateContainerStyle();
+            this._drawMarker();
+        },
+

         /**
          * This method launches the location engine.
          * It is called before the marker is updated,
         /**
          * This method launches the location engine.
          * It is called before the marker is updated,


@@ -273,6 +466,26 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
                 this._map.on('locationfound', this._onLocationFound, this);
                 this._map.on('locationerror', this._onLocationError, this);
                 this._map.on('dragstart', this._onDrag, this);
                 this._map.on('locationfound', this._onLocationFound, this);
                 this._map.on('locationerror', this._onLocationError, this);
                 this._map.on('dragstart', this._onDrag, this);

+                this._map.on('zoomstart', this._onZoom, this);
+                this._map.on('zoomend', this._onZoomEnd, this);
+                if (this.options.showCompass) {
+                    var oriAbs = 'ondeviceorientationabsolute' in window;
+                    if (oriAbs || ('ondeviceorientation' in window)) {
+                        var _this = this;
+                        var deviceorientation = function () {
+                            L.DomEvent.on(window, oriAbs ? 'deviceorientationabsolute' : 'deviceorientation', _this._onDeviceOrientation, _this);
+                        };
+                        if (DeviceOrientationEvent && typeof DeviceOrientationEvent.requestPermission === 'function') {
+                            DeviceOrientationEvent.requestPermission().then(function (permissionState) {
+                                if (permissionState === 'granted') {
+                                    deviceorientation();
+                                }
+                            })
+                        } else {
+                            deviceorientation();
+                        }
+                    }
+                }

             }
         },
 
             }
         },
 


@@ -285,10 +498,24 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
             this._map.stopLocate();
             this._active = false;
 
             this._map.stopLocate();
             this._active = false;
 

+            if (!this.options.cacheLocation) {
+                this._event = undefined;
+            }
+

             // unbind event listeners
             this._map.off('locationfound', this._onLocationFound, this);
             this._map.off('locationerror', this._onLocationError, this);
             this._map.off('dragstart', this._onDrag, this);
             // unbind event listeners
             this._map.off('locationfound', this._onLocationFound, this);
             this._map.off('locationerror', this._onLocationError, this);
             this._map.off('dragstart', this._onDrag, this);

+            this._map.off('zoomstart', this._onZoom, this);
+            this._map.off('zoomend', this._onZoomEnd, this);
+            if (this.options.showCompass) {
+                this._compassHeading = null;
+                if ('ondeviceorientationabsolute' in window) {
+                    L.DomEvent.off(window, 'deviceorientationabsolute', this._onDeviceOrientation, this);
+                } else if ('ondeviceorientation' in window) {
+                    L.DomEvent.off(window, 'deviceorientation', this._onDeviceOrientation, this);
+                }
+            }

         },
 
         /**
         },
 
         /**


@@ -297,21 +524,63 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
         setView: function() {
             this._drawMarker();
             if (this._isOutsideMapBounds()) {
         setView: function() {
             this._drawMarker();
             if (this._isOutsideMapBounds()) {

+                this._event = undefined;  // clear the current location so we can get back into the bounds

                 this.options.onLocationOutsideMapBounds(this);
             } else {
                 this.options.onLocationOutsideMapBounds(this);
             } else {

+               if (this._justClicked && this.options.initialZoomLevel !== false) {
+                    var f = this.options.flyTo ? this._map.flyTo : this._map.setView;
+                    f.bind(this._map)([this._event.latitude, this._event.longitude], this.options.initialZoomLevel);
+               } else

                 if (this.options.keepCurrentZoomLevel) {
                     var f = this.options.flyTo ? this._map.flyTo : this._map.panTo;
                     f.bind(this._map)([this._event.latitude, this._event.longitude]);
                 } else {
                     var f = this.options.flyTo ? this._map.flyToBounds : this._map.fitBounds;
                 if (this.options.keepCurrentZoomLevel) {
                     var f = this.options.flyTo ? this._map.flyTo : this._map.panTo;
                     f.bind(this._map)([this._event.latitude, this._event.longitude]);
                 } else {
                     var f = this.options.flyTo ? this._map.flyToBounds : this._map.fitBounds;

-                    f.bind(this._map)(this._event.bounds, {
+                    // Ignore zoom events while setting the viewport as these would stop following
+                    this._ignoreEvent = true;
+                    f.bind(this._map)(this.options.getLocationBounds(this._event), {

                         padding: this.options.circlePadding,
                         maxZoom: this.options.locateOptions.maxZoom
                     });
                         padding: this.options.circlePadding,
                         maxZoom: this.options.locateOptions.maxZoom
                     });

+                    L.Util.requestAnimFrame(function(){
+                        // Wait until after the next animFrame because the flyTo can be async
+                        this._ignoreEvent = false;
+                    }, this);
+

                 }
             }
         },
 
                 }
             }
         },
 

+        /**
+         *
+         */
+        _drawCompass: function() {
+            if (!this._event) {
+                return;
+            }
+
+            var latlng = this._event.latlng;
+
+            if (this.options.showCompass && latlng && this._compassHeading !== null) {
+                var cStyle = this._isFollowing() ? this.options.followCompassStyle : this.options.compassStyle;
+                if (!this._compass) {
+                    this._compass = new this.options.compassClass(latlng, this._compassHeading, cStyle).addTo(this._layer);
+                } else {
+                    this._compass.setLatLng(latlng);
+                    this._compass.setHeading(this._compassHeading);
+                    // If the compassClass can be updated with setStyle, update it.
+                    if (this._compass.setStyle) {
+                        this._compass.setStyle(cStyle);
+                    }
+                }
+                // 
+            }
+            if (this._compass && (!this.options.showCompass || this._compassHeading === null)) {
+                this._compass.removeFrom(this._layer);
+                this._compass = null;
+            }
+        },
+

         /**
          * Draw the marker and accuracy circle on the map.
          *
         /**
          * Draw the marker and accuracy circle on the map.
          *


@@ -348,18 +617,37 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
             // small inner marker
             if (this.options.drawMarker) {
                 var mStyle = this._isFollowing() ? this.options.followMarkerStyle : this.options.markerStyle;
             // small inner marker
             if (this.options.drawMarker) {
                 var mStyle = this._isFollowing() ? this.options.followMarkerStyle : this.options.markerStyle;

-

                 if (!this._marker) {
                     this._marker = new this.options.markerClass(latlng, mStyle).addTo(this._layer);
                 } else {
                 if (!this._marker) {
                     this._marker = new this.options.markerClass(latlng, mStyle).addTo(this._layer);
                 } else {

-                    this._marker.setLatLng(latlng).setStyle(mStyle);
+                    this._marker.setLatLng(latlng);
+                    // If the markerClass can be updated with setStyle, update it.
+                    if (this._marker.setStyle) {
+                        this._marker.setStyle(mStyle);
+                    }

                 }
             }
 
                 }
             }
 

+            this._drawCompass();
+

             var t = this.options.strings.popup;
             var t = this.options.strings.popup;

+            function getPopupText() {
+                if (typeof t === 'string') {
+                    return L.Util.template(t, {distance: distance, unit: unit});
+                } else if (typeof t === 'function') {
+                    return t({distance: distance, unit: unit});
+                } else {
+                    return t;
+                }
+            }

             if (this.options.showPopup && t && this._marker) {
                 this._marker
             if (this.options.showPopup && t && this._marker) {
                 this._marker

-                    .bindPopup(L.Util.template(t, {distance: distance, unit: unit}))
+                    .bindPopup(getPopupText())
+                    ._popup.setLatLng(latlng);
+            }
+            if (this.options.showPopup && t && this._compass) {
+                this._compass
+                    .bindPopup(getPopupText())

                     ._popup.setLatLng(latlng);
             }
         },
                     ._popup.setLatLng(latlng);
             }
         },


@@ -382,6 +670,44 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
             this._map.off('unload', this._unload, this);
         },
 
             this._map.off('unload', this._unload, this);
         },
 

+        /**
+         * Sets the compass heading
+         */
+        _setCompassHeading: function(angle) {
+            if (!isNaN(parseFloat(angle)) && isFinite(angle)) {
+                angle = Math.round(angle);
+
+                this._compassHeading = angle;
+                L.Util.requestAnimFrame(this._drawCompass, this);
+            } else {
+                this._compassHeading = null;
+            }
+        },
+
+        /**
+         * If the compass fails calibration just fail safely and remove the compass
+         */
+        _onCompassNeedsCalibration: function() {
+            this._setCompassHeading();
+        },
+
+        /**
+         * Process and normalise compass events
+         */
+        _onDeviceOrientation: function(e) {
+            if (!this._active) {
+                return;
+            }
+
+            if (e.webkitCompassHeading) {
+                // iOS
+                this._setCompassHeading(e.webkitCompassHeading);
+            } else if (e.absolute && e.alpha) {
+                // Android
+                this._setCompassHeading(360 - e.alpha)
+            }
+        },
+

         /**
          * Calls deactivate and dispatches an error.
          */
         /**
          * Calls deactivate and dispatches an error.
          */


@@ -428,6 +754,11 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
                         this.setView();
                     }
                     break;
                         this.setView();
                     }
                     break;

+                case 'untilPanOrZoom':
+                    if (!this._userPanned && !this._userZoomed) {
+                        this.setView();
+                    }
+                    break;

                 case 'always':
                     this.setView();
                     break;
                 case 'always':
                     this.setView();
                     break;


@@ -440,17 +771,47 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
         },
 
         /**
         },
 
         /**

-         * When the user drags. Need a separate even so we can bind and unbind even listeners.
+         * When the user drags. Need a separate event so we can bind and unbind event listeners.

          */
         _onDrag: function() {
             // only react to drags once we have a location
          */
         _onDrag: function() {
             // only react to drags once we have a location

-            if (this._event) {
+            if (this._event && !this._ignoreEvent) {

                 this._userPanned = true;
                 this._updateContainerStyle();
                 this._drawMarker();
             }
         },
 
                 this._userPanned = true;
                 this._updateContainerStyle();
                 this._drawMarker();
             }
         },
 

+        /**
+         * When the user zooms. Need a separate event so we can bind and unbind event listeners.
+         */
+        _onZoom: function() {
+            // only react to drags once we have a location
+            if (this._event && !this._ignoreEvent) {
+                this._userZoomed = true;
+                this._updateContainerStyle();
+                this._drawMarker();
+            }
+        },
+
+        /**
+         * After a zoom ends update the compass and handle sideways zooms
+         */
+        _onZoomEnd: function() {
+            if (this._event) {
+                this._drawCompass();
+            }
+
+            if (this._event && !this._ignoreEvent) {
+                // If we have zoomed in and out and ended up sideways treat it as a pan
+                if (this._marker && !this._map.getBounds().pad(-.3).contains(this._marker.getLatLng())) {
+                    this._userPanned = true;
+                    this._updateContainerStyle();
+                    this._drawMarker();
+                }
+            }
+        },
+

         /**
          * Compute whether the map is following the user location with pan and zoom.
          */
         /**
          * Compute whether the map is following the user location with pan and zoom.
          */


@@ -463,6 +824,8 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
                 return true;
             } else if (this.options.setView === 'untilPan') {
                 return !this._userPanned;
                 return true;
             } else if (this.options.setView === 'untilPan') {
                 return !this._userPanned;

+            } else if (this.options.setView === 'untilPanOrZoom') {
+                return !this._userPanned && !this._userZoomed;

             }
         },
 
             }
         },
 


@@ -502,23 +865,23 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
          */
         _setClasses: function(state) {
             if (state == 'requesting') {
          */
         _setClasses: function(state) {
             if (state == 'requesting') {

-                L.DomUtil.removeClasses(this._container, "active following");
-                L.DomUtil.addClasses(this._container, "requesting");
+                removeClasses(this._container, "active following");
+                addClasses(this._container, "requesting");

 
 

-                L.DomUtil.removeClasses(this._icon, this.options.icon);
-                L.DomUtil.addClasses(this._icon, this.options.iconLoading);
+                removeClasses(this._icon, this.options.icon);
+                addClasses(this._icon, this.options.iconLoading);

             } else if (state == 'active') {
             } else if (state == 'active') {

-                L.DomUtil.removeClasses(this._container, "requesting following");
-                L.DomUtil.addClasses(this._container, "active");
+                removeClasses(this._container, "requesting following");
+                addClasses(this._container, "active");

 
 

-                L.DomUtil.removeClasses(this._icon, this.options.iconLoading);
-                L.DomUtil.addClasses(this._icon, this.options.icon);
+                removeClasses(this._icon, this.options.iconLoading);
+                addClasses(this._icon, this.options.icon);

             } else if (state == 'following') {
             } else if (state == 'following') {

-                L.DomUtil.removeClasses(this._container, "requesting");
-                L.DomUtil.addClasses(this._container, "active following");
+                removeClasses(this._container, "requesting");
+                addClasses(this._container, "active following");

 
 

-                L.DomUtil.removeClasses(this._icon, this.options.iconLoading);
-                L.DomUtil.addClasses(this._icon, this.options.icon);
+                removeClasses(this._icon, this.options.iconLoading);
+                addClasses(this._icon, this.options.icon);

             }
         },
 
             }
         },
 


@@ -530,8 +893,8 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
             L.DomUtil.removeClass(this._container, "active");
             L.DomUtil.removeClass(this._container, "following");
 
             L.DomUtil.removeClass(this._container, "active");
             L.DomUtil.removeClass(this._container, "following");
 

-            L.DomUtil.removeClasses(this._icon, this.options.iconLoading);
-            L.DomUtil.addClasses(this._icon, this.options.icon);
+            removeClasses(this._icon, this.options.iconLoading);
+            addClasses(this._icon, this.options.icon);

         },
 
         /**
         },
 
         /**


@@ -547,6 +910,9 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
 
             // true if the user has panned the map after clicking the control
             this._userPanned = false;
 
             // true if the user has panned the map after clicking the control
             this._userPanned = false;

+
+            // true if the user has zoomed the map after clicking the control
+            this._userZoomed = false;

         }
     });
 
         }
     });
 


@@ -554,19 +920,5 @@ You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
         return new L.Control.Locate(options);
     };
 
         return new L.Control.Locate(options);
     };
 

-    (function(){
-      // leaflet.js raises bug when trying to addClass / removeClass multiple classes at once
-      // Let's create a wrapper on it which fixes it.
-      var LDomUtilApplyClassesMethod = function(method, element, classNames) {
-        classNames = classNames.split(' ');
-        classNames.forEach(function(className) {
-            L.DomUtil[method].call(this, element, className);
-        });
-      };
-
-      L.DomUtil.addClasses = function(el, names) { LDomUtilApplyClassesMethod('addClass', el, names); };
-      L.DomUtil.removeClasses = function(el, names) { LDomUtilApplyClassesMethod('removeClass', el, names); };
-    })();
-

     return LocateControl;
 }, window));
     return LocateControl;
 }, window));