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 LocateControl = L.Control.extend({
  30         options: {
  31             /** Position of the control */
  32             position: 'topleft',
  33             /** The layer that the user's location should be drawn on. By default creates a new layer. */
  34             layer: undefined,
  35             /**
  36              * Automatically sets the map view (zoom and pan) to the user's location as it updates.
  37              * While the map is following the user's location, the control is in the `following` state,
  38              * which changes the style of the control and the circle marker.
  39              *
  40              * Possible values:
  41              *  - false: never updates the map view when location changes.
  42              *  - 'once': set the view when the location is first determined
  43              *  - 'always': always updates the map view when location changes.
  44              *              The map view follows the users location.
  45              *  - 'untilPan': (default) like 'always', except stops updating the
  46              *                view if the user has manually panned the map.
  47              *                The map view follows the users location until she pans.
  48              */
  49             setView: 'untilPan',
  50             /** Keep the current map zoom level when setting the view and only pan. */
  51             keepCurrentZoomLevel: false,
  52             /** Smooth pan and zoom to the location of the marker. Only works in Leaflet 1.0+. */
  53             flyTo: false,
  54             /**
  55              * The user location can be inside and outside the current view when the user clicks on the
  56              * control that is already active. Both cases can be configures separately.
  57              * Possible values are:
  58              *  - 'setView': zoom and pan to the current location
  59              *  - 'stop': stop locating and remove the location marker
  60              */
  61             clickBehavior: {
  62                 /** What should happen if the user clicks on the control while the location is within the current view. */
  63                 inView: 'stop',
  64                 /** What should happen if the user clicks on the control while the location is outside the current view. */
  65                 outOfView: 'setView',
  66             },
  67             /**
  68              * If set, save the map bounds just before centering to the user's
  69              * location. When control is disabled, set the view back to the
  70              * bounds that were saved.
  71              */
  72             returnToPrevBounds: false,
  73             /** If set, a circle that shows the location accuracy is drawn. */
  74             drawCircle: true,
  75             /** If set, the marker at the users' location is drawn. */
  76             drawMarker: true,
  77             /** The class to be used to create the marker. For example L.CircleMarker or L.Marker */
  78             markerClass: L.CircleMarker,
  79             /** Accuracy circle style properties. */
  80             circleStyle: {
  81                 color: '#136AEC',
  82                 fillColor: '#136AEC',
  83                 fillOpacity: 0.15,
  84                 weight: 2,
  85                 opacity: 0.5
  86             },
  87             /** Inner marker style properties. */
  88             markerStyle: {
  89                 color: '#136AEC',
  90                 fillColor: '#2A93EE',
  91                 fillOpacity: 0.7,
  92                 weight: 2,
  93                 opacity: 0.9,
  94                 radius: 5
  95             },
  96             /**
  97              * Changes to accuracy circle and inner marker while following.
  98              * It is only necessary to provide the properties that should change.
  99              */
 100             followCircleStyle: {},
 101             followMarkerStyle: {
 102                 // color: '#FFA500',
 103                 // fillColor: '#FFB000'
 104             },
 105             /** The CSS class for the icon. For example fa-location-arrow or fa-map-marker */
 106             icon: 'fa fa-map-marker',
 107             iconLoading: 'fa fa-spinner fa-spin',
 108             /** The element to be created for icons. For example span or i */
 109             iconElementTag: 'span',
 110             /** Padding around the accuracy circle. */
 111             circlePadding: [0, 0],
 112             /** Use metric units. */
 113             metric: true,
 114             /** This event is called in case of any location error that is not a time out error. */
 115             onLocationError: function(err, control) {
 116                 alert(err.message);
 117             },
 118             /**
 119              * This even is called when the user's location is outside the bounds set on the map.
 120              * The event is called repeatedly when the location changes.
 121              */
 122             onLocationOutsideMapBounds: function(control) {
 123                 control.stop();
 124                 alert(control.options.strings.outsideMapBoundsMsg);
 125             },
 126             /** Display a pop-up when the user click on the inner marker. */
 127             showPopup: true,
 128             strings: {
 129                 title: "Show me where I am",
 130                 metersUnit: "meters",
 131                 feetUnit: "feet",
 132                 popup: "You are within {distance} {unit} from this point",
 133                 outsideMapBoundsMsg: "You seem located outside the boundaries of the map"
 134             },
 135             /** The default options passed to leaflets locate method. */
 136             locateOptions: {
 137                 maxZoom: Infinity,
 138                 watch: true,  // if you overwrite this, visualization cannot be updated
 139                 setView: false // have to set this to false because we have to
 140                                // do setView manually
 141             }
 142         },
 143
 144         initialize: function (options) {
 145             // set default options if nothing is set (merge one step deep)
 146             for (var i in options) {
 147                 if (typeof this.options[i] === 'object') {
 148                     L.extend(this.options[i], options[i]);
 149                 } else {
 150                     this.options[i] = options[i];
 151                 }
 152             }
 153
 154             // extend the follow marker style and circle from the normal style
 155             this.options.followMarkerStyle = L.extend({}, this.options.markerStyle, this.options.followMarkerStyle);
 156             this.options.followCircleStyle = L.extend({}, this.options.circleStyle, this.options.followCircleStyle);
 157         },
 158
 159         /**
 160          * Add control to map. Returns the container for the control.
 161          */
 162         onAdd: function (map) {
 163             var container = L.DomUtil.create('div',
 164                 'leaflet-control-locate leaflet-bar leaflet-control');
 165
 166             this._layer = this.options.layer || new L.LayerGroup();
 167             this._layer.addTo(map);
 168             this._event = undefined;
 169
 170             this._link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
 171             this._link.href = '#';
 172             this._link.title = this.options.strings.title;
 173             this._icon = L.DomUtil.create(this.options.iconElementTag, this.options.icon, this._link);
 174
 175             L.DomEvent
 176                 .on(this._link, 'click', L.DomEvent.stopPropagation)
 177                 .on(this._link, 'click', L.DomEvent.preventDefault)
 178                 .on(this._link, 'click', this._onClick, this)
 179                 .on(this._link, 'dblclick', L.DomEvent.stopPropagation);
 180
 181             this._resetVariables();
 182
 183             this._map.on('unload', this._unload, this);
 184
 185             return container;
 186         },
 187
 188         /**
 189          * This method is called when the user clicks on the control.
 190          */
 191         _onClick: function() {
 192             this._justClicked = true;
 193             this._userPanned = false;
 194             this._prevBounds = null;
 195
 196             if (this._active && !this._event) {
 197                 // click while requesting
 198                 this.stop();
 199             } else if (this._active && this._event !== undefined) {
 200                 var behavior = this._map.getBounds().contains(this._event.latlng) ?
 201                     this.options.clickBehavior.inView : this.options.clickBehavior.outOfView;
 202                 switch (behavior) {
 203                     case 'setView':
 204                         this.setView();
 205                         break;
 206                     case 'stop':
 207                         this.stop();
 208                         if (this.options.returnToPrevBounds) {
 209                             var f = this.options.flyTo ? this._map.flyToBounds : this._map.fitBounds;
 210                             f.bind(this._map)(this._prevBounds);
 211                         }
 212                         break;
 213                 }
 214             } else {
 215                 if (this.options.returnToPrevBounds) {
 216                   this._prevBounds = this._map.getBounds();
 217                 }
 218                 this.start();
 219             }
 220
 221             this._updateContainerStyle();
 222         },
 223
 224         /**
 225          * Starts the plugin:
 226          * - activates the engine
 227          * - draws the marker (if coordinates available)
 228          */
 229         start: function() {
 230             this._activate();
 231
 232             if (this._event) {
 233                 this._drawMarker(this._map);
 234
 235                 // if we already have a location but the user clicked on the control
 236                 if (this.options.setView) {
 237                     this.setView();
 238                 }
 239             }
 240             this._updateContainerStyle();
 241         },
 242
 243         /**
 244          * Stops the plugin:
 245          * - deactivates the engine
 246          * - reinitializes the button
 247          * - removes the marker
 248          */
 249         stop: function() {
 250             this._deactivate();
 251
 252             this._cleanClasses();
 253             this._resetVariables();
 254
 255             this._removeMarker();
 256         },
 257
 258         /**
 259          * This method launches the location engine.
 260          * It is called before the marker is updated,
 261          * event if it does not mean that the event will be ready.
 262          *
 263          * Override it if you want to add more functionalities.
 264          * It should set the this._active to true and do nothing if
 265          * this._active is true.
 266          */
 267         _activate: function() {
 268             if (!this._active) {
 269                 this._map.locate(this.options.locateOptions);
 270                 this._active = true;
 271
 272                 // bind event listeners
 273                 this._map.on('locationfound', this._onLocationFound, this);
 274                 this._map.on('locationerror', this._onLocationError, this);
 275                 this._map.on('dragstart', this._onDrag, this);
 276             }
 277         },
 278
 279         /**
 280          * Called to stop the location engine.
 281          *
 282          * Override it to shutdown any functionalities you added on start.
 283          */
 284         _deactivate: function() {
 285             this._map.stopLocate();
 286             this._active = false;
 287
 288             // unbind event listeners
 289             this._map.off('locationfound', this._onLocationFound, this);
 290             this._map.off('locationerror', this._onLocationError, this);
 291             this._map.off('dragstart', this._onDrag, this);
 292         },
 293
 294         /**
 295          * Zoom (unless we should keep the zoom level) and an to the current view.
 296          */
 297         setView: function() {
 298             this._drawMarker();
 299             if (this._isOutsideMapBounds()) {
 300                 this.options.onLocationOutsideMapBounds(this);
 301             } else {
 302                 if (this.options.keepCurrentZoomLevel) {
 303                     var f = this.options.flyTo ? this._map.flyTo : this._map.panTo;
 304                     f.bind(this._map)([this._event.latitude, this._event.longitude]);
 305                 } else {
 306                     var f = this.options.flyTo ? this._map.flyToBounds : this._map.fitBounds;
 307                     f.bind(this._map)(this._event.bounds, {
 308                         padding: this.options.circlePadding,
 309                         maxZoom: this.options.locateOptions.maxZoom
 310                     });
 311                 }
 312             }
 313         },
 314
 315         /**
 316          * Draw the marker and accuracy circle on the map.
 317          *
 318          * Uses the event retrieved from onLocationFound from the map.
 319          */
 320         _drawMarker: function() {
 321             if (this._event.accuracy === undefined) {
 322                 this._event.accuracy = 0;
 323             }
 324
 325             var radius = this._event.accuracy;
 326             var latlng = this._event.latlng;
 327
 328             // circle with the radius of the location's accuracy
 329             if (this.options.drawCircle) {
 330                 var style = this._isFollowing() ? this.options.followCircleStyle : this.options.circleStyle;
 331
 332                 if (!this._circle) {
 333                     this._circle = L.circle(latlng, radius, style).addTo(this._layer);
 334                 } else {
 335                     this._circle.setLatLng(latlng).setRadius(radius).setStyle(style);
 336                 }
 337             }
 338
 339             var distance, unit;
 340             if (this.options.metric) {
 341                 distance = radius.toFixed(0);
 342                 unit =  this.options.strings.metersUnit;
 343             } else {
 344                 distance = (radius * 3.2808399).toFixed(0);
 345                 unit = this.options.strings.feetUnit;
 346             }
 347
 348             // small inner marker
 349             if (this.options.drawMarker) {
 350                 var mStyle = this._isFollowing() ? this.options.followMarkerStyle : this.options.markerStyle;
 351
 352                 if (!this._marker) {
 353                     this._marker = new this.options.markerClass(latlng, mStyle).addTo(this._layer);
 354                 } else {
 355                     this._marker.setLatLng(latlng).setStyle(mStyle);
 356                 }
 357             }
 358
 359             var t = this.options.strings.popup;
 360             if (this.options.showPopup && t && this._marker) {
 361                 this._marker
 362                     .bindPopup(L.Util.template(t, {distance: distance, unit: unit}))
 363                     ._popup.setLatLng(latlng);
 364             }
 365         },
 366
 367         /**
 368          * Remove the marker from map.
 369          */
 370         _removeMarker: function() {
 371             this._layer.clearLayers();
 372             this._marker = undefined;
 373             this._circle = undefined;
 374         },
 375
 376         /**
 377          * Unload the plugin and all event listeners.
 378          * Kind of the opposite of onAdd.
 379          */
 380         _unload: function() {
 381             this.stop();
 382             this._map.off('unload', this._unload, this);
 383         },
 384
 385         /**
 386          * Calls deactivate and dispatches an error.
 387          */
 388         _onLocationError: function(err) {
 389             // ignore time out error if the location is watched
 390             if (err.code == 3 && this.options.locateOptions.watch) {
 391                 return;
 392             }
 393
 394             this.stop();
 395             this.options.onLocationError(err, this);
 396         },
 397
 398         /**
 399          * Stores the received event and updates the marker.
 400          */
 401         _onLocationFound: function(e) {
 402             // no need to do anything if the location has not changed
 403             if (this._event &&
 404                 (this._event.latlng.lat === e.latlng.lat &&
 405                  this._event.latlng.lng === e.latlng.lng &&
 406                      this._event.accuracy === e.accuracy)) {
 407                 return;
 408             }
 409
 410             if (!this._active) {
 411                 // we may have a stray event
 412                 return;
 413             }
 414
 415             this._event = e;
 416
 417             this._drawMarker();
 418             this._updateContainerStyle();
 419
 420             switch (this.options.setView) {
 421                 case 'once':
 422                     if (this._justClicked) {
 423                         this.setView();
 424                     }
 425                     break;
 426                 case 'untilPan':
 427                     if (!this._userPanned) {
 428                         this.setView();
 429                     }
 430                     break;
 431                 case 'always':
 432                     this.setView();
 433                     break;
 434                 case false:
 435                     // don't set the view
 436                     break;
 437             }
 438
 439             this._justClicked = false;
 440         },
 441
 442         /**
 443          * When the user drags. Need a separate even so we can bind and unbind even listeners.
 444          */
 445         _onDrag: function() {
 446             // only react to drags once we have a location
 447             if (this._event) {
 448                 this._userPanned = true;
 449                 this._updateContainerStyle();
 450                 this._drawMarker();
 451             }
 452         },
 453
 454         /**
 455          * Compute whether the map is following the user location with pan and zoom.
 456          */
 457         _isFollowing: function() {
 458             if (!this._active) {
 459                 return false;
 460             }
 461
 462             if (this.options.setView === 'always') {
 463                 return true;
 464             } else if (this.options.setView === 'untilPan') {
 465                 return !this._userPanned;
 466             }
 467         },
 468
 469         /**
 470          * Check if location is in map bounds
 471          */
 472         _isOutsideMapBounds: function() {
 473             if (this._event === undefined) {
 474                 return false;
 475             }
 476             return this._map.options.maxBounds &&
 477                 !this._map.options.maxBounds.contains(this._event.latlng);
 478         },
 479
 480         /**
 481          * Toggles button class between following and active.
 482          */
 483         _updateContainerStyle: function() {
 484             if (!this._container) {
 485                 return;
 486             }
 487
 488             if (this._active && !this._event) {
 489                 // active but don't have a location yet
 490                 this._setClasses('requesting');
 491             } else if (this._isFollowing()) {
 492                 this._setClasses('following');
 493             } else if (this._active) {
 494                 this._setClasses('active');
 495             } else {
 496                 this._cleanClasses();
 497             }
 498         },
 499
 500         /**
 501          * Sets the CSS classes for the state.
 502          */
 503         _setClasses: function(state) {
 504             if (state == 'requesting') {
 505                 L.DomUtil.removeClasses(this._container, "active following");
 506                 L.DomUtil.addClasses(this._container, "requesting");
 507
 508                 L.DomUtil.removeClasses(this._icon, this.options.icon);
 509                 L.DomUtil.addClasses(this._icon, this.options.iconLoading);
 510             } else if (state == 'active') {
 511                 L.DomUtil.removeClasses(this._container, "requesting following");
 512                 L.DomUtil.addClasses(this._container, "active");
 513
 514                 L.DomUtil.removeClasses(this._icon, this.options.iconLoading);
 515                 L.DomUtil.addClasses(this._icon, this.options.icon);
 516             } else if (state == 'following') {
 517                 L.DomUtil.removeClasses(this._container, "requesting");
 518                 L.DomUtil.addClasses(this._container, "active following");
 519
 520                 L.DomUtil.removeClasses(this._icon, this.options.iconLoading);
 521                 L.DomUtil.addClasses(this._icon, this.options.icon);
 522             }
 523         },
 524
 525         /**
 526          * Removes all classes from button.
 527          */
 528         _cleanClasses: function() {
 529             L.DomUtil.removeClass(this._container, "requesting");
 530             L.DomUtil.removeClass(this._container, "active");
 531             L.DomUtil.removeClass(this._container, "following");
 532
 533             L.DomUtil.removeClasses(this._icon, this.options.iconLoading);
 534             L.DomUtil.addClasses(this._icon, this.options.icon);
 535         },
 536
 537         /**
 538          * Reinitializes state variables.
 539          */
 540         _resetVariables: function() {
 541             // whether locate is active or not
 542             this._active = false;
 543
 544             // true if the control was clicked for the first time
 545             // we need this so we can pan and zoom once we have the location
 546             this._justClicked = false;
 547
 548             // true if the user has panned the map after clicking the control
 549             this._userPanned = false;
 550         }
 551     });
 552
 553     L.control.locate = function (options) {
 554         return new L.Control.Locate(options);
 555     };
 556
 557     (function(){
 558       // leaflet.js raises bug when trying to addClass / removeClass multiple classes at once
 559       // Let's create a wrapper on it which fixes it.
 560       var LDomUtilApplyClassesMethod = function(method, element, classNames) {
 561         classNames = classNames.split(' ');
 562         classNames.forEach(function(className) {
 563             L.DomUtil[method].call(this, element, className);
 564         });
 565       };
 566
 567       L.DomUtil.addClasses = function(el, names) { LDomUtilApplyClassesMethod('addClass', el, names); };
 568       L.DomUtil.removeClasses = function(el, names) { LDomUtilApplyClassesMethod('removeClass', el, names); };
 569     })();
 570
 571     return LocateControl;
 572 }, window));