]> git.openstreetmap.org Git - rails.git/blob - vendor/assets/leaflet/leaflet.locate.js
Merge remote-tracking branch 'openstreetmap/pull/1449'
[rails.git] / vendor / assets / leaflet / leaflet.locate.js
1 /*!
2 Copyright (c) 2016 Dominik Moritz
3
4 This file is part of the leaflet locate control. It is licensed under the MIT license.
5 You can find the project at: https://github.com/domoritz/leaflet-locatecontrol
6 */
7 (function (factory, window) {
8      // see https://github.com/Leaflet/Leaflet/blob/master/PLUGIN-GUIDE.md#module-loaders
9      // for details on how to structure a leaflet plugin.
10
11     // define an AMD module that relies on 'leaflet'
12     if (typeof define === 'function' && define.amd) {
13         define(['leaflet'], factory);
14
15     // define a Common JS module that relies on 'leaflet'
16     } else if (typeof exports === 'object') {
17         if (typeof window !== 'undefined' && window.L) {
18             module.exports = factory(L);
19         } else {
20             module.exports = factory(require('leaflet'));
21         }
22     }
23
24     // attach your plugin to the global 'L' variable
25     if(typeof window !== 'undefined' && window.L){
26         window.L.Control.Locate = factory(L);
27     }
28 } (function (L) {
29     var 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));