diff --git a/umap/static/umap/img/24.png b/umap/static/umap/img/24.png index bfac46be..c4a9bddf 100644 Binary files a/umap/static/umap/img/24.png and b/umap/static/umap/img/24.png differ diff --git a/umap/static/umap/img/24.svg b/umap/static/umap/img/24.svg index 083830c9..5835faf0 100644 --- a/umap/static/umap/img/24.svg +++ b/umap/static/umap/img/24.svg @@ -13,7 +13,7 @@ height="200" id="svg2" version="1.1" - inkscape:version="0.91 r13725" + inkscape:version="0.92.4 5da689c313, 2019-01-14" sodipodi:docname="24.svg" inkscape:export-filename="/home/ybon/Code/js/Leaflet.Storage/src/img/24.png" inkscape:export-xdpi="89.996864" @@ -27,16 +27,16 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="31.678384" - inkscape:cx="65.861168" - inkscape:cy="104.42429" + inkscape:zoom="15.839192" + inkscape:cx="101.80916" + inkscape:cy="48.17346" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="3840" - inkscape:window-height="2031" + inkscape:window-height="2032" inkscape:window-x="0" - inkscape:window-y="55" + inkscape:window-y="54" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true"> @@ -50,35 +50,43 @@ + id="guide3084" + inkscape:locked="false" /> + id="guide3086" + inkscape:locked="false" /> + id="guide3088" + inkscape:locked="false" /> + id="guide3090" + inkscape:locked="false" /> + id="guide3512" + inkscape:locked="false" /> + id="guide3872" + inkscape:locked="false" /> + id="guide25561" + inkscape:locked="false" /> + id="guide25563" + inkscape:locked="false" /> @@ -105,15 +113,15 @@ sodipodi:nodetypes="cccccccccccccc" /> + id="tspan4459" + style="font-size:40px;line-height:1.25;font-family:sans-serif">  0 1 + style="font-weight:bold;font-size:8px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'Sans Bold';fill:#4d4d4d;fill-opacity:1">1 - + - + - + - + + style="fill:#464646;fill-opacity:1;stroke:none;stroke-width:4.28879309" + cx="-954.66473" + cy="-272.05554" + r="2.5" /> + d="m 102.3863,987.47517 -8.019138,4.91992 8.139348,5.3224" + style="fill:none;stroke:#464646;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> - - + + + + + + diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 82425e25..91be2abe 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -826,21 +826,62 @@ L.U.LocateControl = L.Control.extend({ 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, + 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'); - var fn = function () { - map.locate({ - setView: true, - enableHighAccuracy: true - }); - }; + + 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', fn, map) + .on(link, 'click', this.toggle, this) .on(link, 'dblclick', L.DomEvent.stopPropagation); return container; diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 0869b505..b9ec18c2 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -79,7 +79,11 @@ a.umap-control-less { background-position: -122px -82px; } .leaflet-control-locate a { - background-position: -2px -122px; + background-position: -1px -121px; +} +.leaflet-control-locate.active a { + background-position: -80px -161px; + box-shadow: 0 0 4px 0 black inset; } .leaflet-control-search a { background-position: -41px -121px; @@ -1332,6 +1336,18 @@ 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 */ /* ****** */