Merge pull request #1031 from aleksejspopovs/use-locatecontrol

Use Leaflet.Locate instead of a custom locate control

Makefile

@@ -41,6 +41,7 @@ vendors:
 	mkdir -p umap/static/umap/vendors/georsstogeojson/ && cp -r node_modules/georsstogeojson/GeoRSSToGeoJSON.js umap/static/umap/vendors/georsstogeojson/
 	mkdir -p umap/static/umap/vendors/togpx/ && cp -r node_modules/togpx/togpx.js umap/static/umap/vendors/togpx/
 	mkdir -p umap/static/umap/vendors/tokml && cp -r node_modules/tokml/tokml.js umap/static/umap/vendors/tokml
+	mkdir -p umap/static/umap/vendors/locatecontrol/ && cp -r node_modules/leaflet.locatecontrol/{dist/L.Control.Locate.css,src/L.Control.Locate.js} umap/static/umap/vendors/locatecontrol/
 installjs:
 	npm install
 testjsfx:

package.json

@@ -48,6 +48,7 @@
     "leaflet-minimap": "^3.6.1",
     "leaflet-toolbar": "umap-project/Leaflet.toolbar",
     "leaflet.heat": "0.2.0",
+    "leaflet.locatecontrol": "^0.78.0",
     "leaflet.markercluster": "^1.4.0",
     "leaflet.path.drag": "0.0.6",
     "leaflet.photon": "0.8.0",

umap/static/umap/js/umap.controls.js

@@ -820,76 +820,6 @@ L.U.AttributionControl = L.Control.Attribution.extend({
 });
 
 
-L.U.LocateControl = L.Control.extend({
-
-    options: {
-        position: 'topleft'
-    },
-
-    onFound: function (e) {
-        this._map._geolocated_circle.setRadius(e.accuracy);
-        this._map._geolocated_circle.setLatLng(e.latlng);
-        this._map._geolocated_marker.setLatLng(e.latlng);
-        this._map.addLayer(this._map._geolocated_circle);
-        this._map.addLayer(this._map._geolocated_marker);
-    },
-
-    onError: function (e) {
-        this.ui.alert({content: L._('Unable to locate you.'), 'level': 'error'});
-    },
-
-    activate: function () {
-        this._map.locate({
-            setView: true,
-            maxZoom: this._map.getZoom(),
-            enableHighAccuracy: true,
-            watch: true
-        });
-        this._active = true;
-    },
-
-    deactivate: function () {
-        this._map._geolocated_marker.removeFrom(this._map)
-        this._map._geolocated_circle.removeFrom(this._map)
-        this._map.stopLocate();
-        this._active = false;
-    },
-
-    toggle: function () {
-        if (!this._active) this.activate();
-        else this.deactivate();
-        L.DomUtil.classIf(this._container, "active", this._active);
-    },
-
-    onAdd: function (map) {
-        var container = L.DomUtil.create('div', 'leaflet-control-locate umap-control'),
-            link = L.DomUtil.create('a', '', container);
-        link.href = '#';
-        link.title = L._('Center map on your location');
-
-        map._geolocated_circle = L.circle(map.getCenter(), {
-            radius: 10,
-            weight: 0
-        });
-
-        map._geolocated_marker = L.marker(map.getCenter(), {
-            icon: L.divIcon({className: 'geolocated', iconAnchor: [8, 9]}),
-        });
-
-        map.on("locationerror", this.onError, this);
-
-        map.on("locationfound", this.onFound, this);
-
-        L.DomEvent
-            .on(link, 'click', L.DomEvent.stop)
-            .on(link, 'click', this.toggle, this)
-            .on(link, 'dblclick', L.DomEvent.stopPropagation);
-
-        return container;
-    }
-});
-
-
 L.U.Search = L.PhotonSearch.extend({
 
     initialize: function (map, input, options) {

umap/static/umap/js/umap.js

@@ -250,7 +250,18 @@ L.U.Map.include({
         }
         this._controls.zoom = new L.Control.Zoom({zoomInTitle: L._('Zoom in'), zoomOutTitle: L._('Zoom out')});
         this._controls.datalayers = new L.U.DataLayersControl(this);
-        this._controls.locate = new L.U.LocateControl();
+        this._controls.locate = L.control.locate({
+            strings: {
+                title: L._('Center map on your location'),
+            },
+            showPopup: false,
+            // We style this control in our own CSS for consistency with other controls,
+            // but the control breaks if we don't specify a class here, so a fake class
+            // will do.
+            icon: 'umap-fake-class',
+            iconLoading: 'umap-fake-class',
+            flyTo: true,
+        });
         this._controls.fullscreen = new L.Control.Fullscreen({title: {'false': L._('View Fullscreen'), 'true': L._('Exit Fullscreen')}});
         this._controls.search = new L.U.SearchControl();
         this._controls.embed = new L.Control.Embed(this, this.options.embedOptions);

umap/static/umap/map.css

@@ -41,6 +41,7 @@
     background-position: 0 -32px;
 }
 .leaflet-measure-control a,
+.leaflet-control-locate a,
 .umap-control a {
     background-position: 50% 50%;
     background-repeat: no-repeat;
@@ -81,7 +82,9 @@ a.umap-control-less {
 .leaflet-control-locate a {
     background-position: -1px -121px;
 }
-.leaflet-control-locate.active a {
+.leaflet-control-locate.active a,
+.leaflet-control-locate.requesting a
+ {
     background-position: -80px -161px;
     box-shadow: 0 0 4px 0 black inset;
 }
@@ -263,6 +266,10 @@ ul.photon-autocomplete {
     display: inline-block;
     vertical-align: middle;
 }
+.leaflet-control-locate-location circle {
+  animation: none;
+}
+
 
 
 /* ********************************* */
@@ -1338,18 +1345,6 @@ a.add-datalayer:hover,
     line-height: 36px;
 }
 
-/* *********** */
-/* Geolocation */
-/* *********** */
-.geolocated {
-    width: 16px !important;
-    height: 16px!important;
-    background-color: #3388ff;
-    border: 1px solid white;
-    border-radius: 8px;
-    box-shadow: 1px 5px 5px black;
-}
-
 /* ****** */
 /* Mobile */
 /* ****** */

umap/static/umap/test/index.html

@@ -21,6 +21,7 @@
         <script src="../vendors/toolbar/leaflet.toolbar-src.js"></script>
         <script src="../vendors/formbuilder/Leaflet.FormBuilder.js"></script>
         <script src="../vendors/measurable/Leaflet.Measurable.js"></script>
+        <script src="../vendors/locatecontrol/L.Control.Locate.js"></script>
         <script src="../js/umap.core.js"></script>
         <script src="../js/umap.autocomplete.js"></script>
         <script src="../js/umap.popup.js"></script>

umap/templates/umap/css.html

@@ -7,6 +7,7 @@
 <link rel="stylesheet" href="{{ STATIC_URL }}umap/vendors/toolbar/leaflet.toolbar.css" />
 <link rel="stylesheet" href="{{ STATIC_URL }}umap/vendors/measurable/Leaflet.Measurable.css" />
 <link rel="stylesheet" href="{{ STATIC_URL }}umap/vendors/fullscreen/leaflet.fullscreen.css" />
+<link rel="stylesheet" href="{{ STATIC_URL }}umap/vendors/locatecontrol/L.Control.Locate.css" />
 <link rel="stylesheet" href="{{ STATIC_URL }}umap/font.css">
 <link rel="stylesheet" href="{{ STATIC_URL }}umap/base.css">
 <link rel="stylesheet" href="{{ STATIC_URL }}umap/content.css">

umap/templates/umap/js.html

@@ -22,6 +22,7 @@
     <script src="{{ STATIC_URL }}umap/vendors/measurable/Leaflet.Measurable.js"></script>
     <script src="{{ STATIC_URL }}umap/vendors/togpx/togpx.js"></script>
     <script src="{{ STATIC_URL }}umap/vendors/tokml/tokml.js"></script>
+    <script src="{{ STATIC_URL }}umap/vendors/locatecontrol/L.Control.Locate.js"></script>
 {% endcompress %}
 {% if locale %}
     <script src="{{ STATIC_URL }}umap/locale/{{ locale }}.js"></script>