jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a blinking marker on user position on geolocate

Browse source 
fix #339
This commit is contained in:
Yohan Boniface 2020-03-17 18:59:29 +01:00
parent fda5bc4283
commit 85abb4b57e
4 changed files with 158 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
umap/static/umap/img/24.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 15 KiB

161
umap/static/umap/img/24.svg
View file

@ -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 @@
<sodipodi:guide
orientation="1,0"
position="80,112"
id="guide3084" />
id="guide3084"
inkscape:locked="false" />
<sodipodi:guide
orientation="0,1"
position="0,40"
id="guide3086" />
id="guide3086"
inkscape:locked="false" />
<sodipodi:guide
orientation="1,0"
position="40,104"
id="guide3088" />
id="guide3088"
inkscape:locked="false" />
<sodipodi:guide
orientation="0,1"
position="0,80"
id="guide3090" />
id="guide3090"
inkscape:locked="false" />
<sodipodi:guide
orientation="1,0"
position="120,84"
id="guide3512" />
id="guide3512"
inkscape:locked="false" />
<sodipodi:guide
orientation="1,0"
position="160,84"
id="guide3872" />
id="guide3872"
inkscape:locked="false" />
<sodipodi:guide
orientation="0,1"
position="0,120"
id="guide25561" />
id="guide25561"
inkscape:locked="false" />
<sodipodi:guide
orientation="0,1"
position="-12,160"
id="guide25563" />
id="guide25563"
inkscape:locked="false" />
</sodipodi:namedview>
<metadata
id="metadata7">
@ -105,15 +113,15 @@
sodipodi:nodetypes="cccccccccccccc" />
<text
xml:space="preserve"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
x="13.786797"
y="953.80786"
id="text4457"
sodipodi:linespacing="125%"><tspan
id="text4457"><tspan
y="953.80786"
x="13.786797"
sodipodi:role="line"
id="tspan4459" /></text>
id="tspan4459"
style="font-size:40px;line-height:1.25;font-family:sans-serif"> </tspan></text>
<path
style="fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 58,862.36216 0,2 c -2,0 -4,0 -5,2 l 0,1 14,0 0,-1 c -1,-2 -3,-2 -5,-2 l 0,-2 z m -5,6 3,14.00002 8,0 3,-14.00002 z"
@ -131,29 +139,27 @@
d="m 47.999998,965.36218 3.000002,0 0,8 2,0 0,-8 2,0 0,5 1,0 0,-5 2,0 0,5 1,0 0,-5 2,0 0,5 1,0 0,-5 2,0 0,5 1,0 0,-5 2,0 0,8 2,0 0,-8 3,0 0,11 -24,0 z"
style="fill:#4d4d4d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<text
sodipodi:linespacing="125%"
id="text4455"
y="964.36218"
x="49.170559"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none;font-family:Sans"
style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none"
xml:space="preserve"><tspan
style="font-size:8px;font-weight:bold;fill:#4d4d4d;fill-opacity:1;-inkscape-font-specification:Sans Bold"
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"
y="964.36218"
x="49.170559"
id="tspan4457"
sodipodi:role="line">0</tspan></text>
<text
xml:space="preserve"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none;font-family:Sans"
style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none"
x="65.048965"
y="964.36218"
id="text4459"
sodipodi:linespacing="125%"><tspan
id="text4459"><tspan
sodipodi:role="line"
id="tspan4461"
x="65.048965"
y="964.36218"
style="font-size:8px;font-weight:bold;fill:#4d4d4d;fill-opacity:1;-inkscape-font-specification:Sans Bold">1</tspan></text>
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</tspan></text>
</g>
<g
id="g3702"
@ -284,54 +290,40 @@
id="path4611"
style="fill:#4d4d4d;fill-opacity:1" />
<g
id="g4758"
transform="translate(36.000001,-11.999806)">
<path
transform="matrix(1.3996164,0,0,1.3996164,46.585677,990.77388)"
d="M 20.301507,9.7085428 A 7.8592963,7.8592963 0 0 1 12.442211,17.567839 7.8592963,7.8592963 0 0 1 4.5829148,9.7085428 7.8592963,7.8592963 0 0 1 12.442211,1.8492465 7.8592963,7.8592963 0 0 1 20.301507,9.7085428 Z"
sodipodi:ry="7.8592963"
sodipodi:rx="7.8592963"
sodipodi:cy="9.7085428"
sodipodi:cx="12.442211"
id="g4760">
<circle
id="path4309"
style="fill:none;stroke:#464646;stroke-width:1.42896295;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
sodipodi:type="arc" />
<path
transform="matrix(-1.5942497,-3.9814712,3.9814712,-1.5942497,44.942766,1049.7278)"
d="M 7.4773872,8.0603018 A 0.58291459,0.58291459 0 0 1 6.8944726,8.6432164 0.58291459,0.58291459 0 0 1 6.311558,8.0603018 0.58291459,0.58291459 0 0 1 6.8944726,7.4773872 0.58291459,0.58291459 0 0 1 7.4773872,8.0603018 Z"
sodipodi:ry="0.58291459"
sodipodi:rx="0.58291459"
sodipodi:cy="8.0603018"
sodipodi:cx="6.8944726"
style="fill:none;stroke:#464646;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
cx="100"
cy="992.3623"
r="11" />
<circle
transform="rotate(-111.82202)"
id="path4819"
style="fill:#464646;fill-opacity:1;stroke:none"
sodipodi:type="arc" />
<path
transform="matrix(-1.5942497,-3.9814712,3.9814712,-1.5942497,37.400316,1044.6618)"
d="M 7.4773872,8.0603018 A 0.58291459,0.58291459 0 0 1 6.8944726,8.6432164 0.58291459,0.58291459 0 0 1 6.311558,8.0603018 0.58291459,0.58291459 0 0 1 6.8944726,7.4773872 0.58291459,0.58291459 0 0 1 7.4773872,8.0603018 Z"
sodipodi:ry="0.58291459"
sodipodi:rx="0.58291459"
sodipodi:cy="8.0603018"
sodipodi:cx="6.8944726"
style="fill:#464646;fill-opacity:1;stroke:none;stroke-width:4.28879309"
cx="-963.88702"
cy="-276.03735"
r="2.5" />
<circle
transform="rotate(-111.82202)"
id="path4819-2"
style="fill:#464646;fill-opacity:1;stroke:none"
sodipodi:type="arc" />
<path
transform="matrix(-1.5942497,-3.9814712,3.9814712,-1.5942497,45.211124,1039.6862)"
d="M 7.4773872,8.0603018 A 0.58291459,0.58291459 0 0 1 6.8944726,8.6432164 0.58291459,0.58291459 0 0 1 6.311558,8.0603018 0.58291459,0.58291459 0 0 1 6.8944726,7.4773872 0.58291459,0.58291459 0 0 1 7.4773872,8.0603018 Z"
sodipodi:ry="0.58291459"
sodipodi:rx="0.58291459"
sodipodi:cy="8.0603018"
sodipodi:cx="6.8944726"
style="fill:#464646;fill-opacity:1;stroke:none;stroke-width:4.28879309"
cx="-956.38037"
cy="-281.15619"
r="2.5" />
<circle
transform="rotate(-111.82202)"
id="path4819-0"
style="fill:#464646;fill-opacity:1;stroke:none"
sodipodi:type="arc" />
style="fill:#464646;fill-opacity:1;stroke:none;stroke-width:4.28879309"
cx="-954.66473"
cy="-272.05554"
r="2.5" />
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path4850"
d="m 66.386295,999.47498 -8.019134,4.91992 8.13935,5.3224"
style="fill:none;stroke:#464646;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
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" />
</g>
<path
inkscape:connector-curvature="0"
@ -393,18 +385,21 @@
id="rect4058-1-2-0"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccccc" />
<path
inkscape:connector-curvature="0"
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
d="m 51,1020.3622 0,0.5 0,3 0,0.5 0.5,0 3,0 0.5,0 0,-0.5 0,-0.3438 10,4 0,1.3438 0,0.4375 1.09375,0.062 2.40625,0 0.5,0 0,-0.5 0,-3 0,-0.5 -0.5,0 -3,0 -0.5,0 0,0.5 0,0.5625 -10,-4 0,-1.5625 0,-0.5 -0.5,0 -3,0 z m 1,1 2,0 0,2 -2,0 z m 14,5 2,0 0,2 -2,0 z"
id="rect4058-9"
sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccc" />
<path
inkscape:connector-curvature="0"
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
d="m 55.09375,1030.5184 0,1.3438 0,0.4375 7.09375,11.0625 2.40625,0 0.5,0 0,0.5 0,3 0,0.5 -0.5,0 -3,0 -0.5,0 0,-0.5 0,-3 0,-0.375 -7.09375,-11.125 -2.40625,0 -0.5,0 0,-0.5 0,-3 0,-0.5 0.5,0 3,0 0.5,0 0,0.5 0,0.5625 z m -1,-1.1562 -2,0 0,2 2,0 z m 10,15 -2,0 0,2 2,0 z"
id="rect4058-9-5"
sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccc" />
<g
id="g4733">
<path
sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccc"
id="rect4058-9"
d="m 51,1020.3622 0,0.5 0,3 0,0.5 0.5,0 3,0 0.5,0 0,-0.5 0,-0.3438 10,4 0,1.3438 0,0.4375 1.09375,0.062 2.40625,0 0.5,0 0,-0.5 0,-3 0,-0.5 -0.5,0 -3,0 -0.5,0 0,0.5 0,0.5625 -10,-4 0,-1.5625 0,-0.5 -0.5,0 -3,0 z m 1,1 2,0 0,2 -2,0 z m 14,5 2,0 0,2 -2,0 z"
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
inkscape:connector-curvature="0" />
<path
sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccc"
id="rect4058-9-5"
d="m 55.09375,1030.5184 0,1.3438 0,0.4375 7.09375,11.0625 2.40625,0 0.5,0 0,0.5 0,3 0,0.5 -0.5,0 -3,0 -0.5,0 0,-0.5 0,-3 0,-0.375 -7.09375,-11.125 -2.40625,0 -0.5,0 0,-0.5 0,-3 0,-0.5 0.5,0 3,0 0.5,0 0,0.5 0,0.5625 z m -1,-1.1562 -2,0 0,2 2,0 z m 10,15 -2,0 0,2 2,0 z"
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
inkscape:connector-curvature="0" />
</g>
<g
transform="matrix(0.30998724,0,0,0.31293167,40.505808,935.9527)"
id="g5939"
@ -457,5 +452,17 @@
id="path5957"
style="fill:#4d4d4d;fill-opacity:1" />
</g>
<path
inkscape:connector-curvature="0"
d="m 112.00002,1032.3625 c 0,-0.4507 -0.0293,-0.8947 -0.0787,-1.3334 h -1.348 c -0.60133,-4.8226 -4.41733,-8.6387 -9.24,-9.2413 v -1.3467 c -0.43867,-0.049 -0.88267,-0.079 -1.333332,-0.079 -0.450667,0 -0.894667,0.029 -1.333333,0.079 v 1.348 c -4.822667,0.6013 -8.638667,4.4174 -9.241334,9.24 h -1.346667 c -0.04933,0.4387 -0.07867,0.8827 -0.07867,1.3334 0,0.4506 0.02933,0.8946 0.07867,1.3333 h 1.348001 c 0.601333,4.8227 4.417333,8.6387 9.24,9.2414 v 1.348 c 0.438666,0.048 0.882666,0.077 1.333333,0.077 0.450662,0 0.894662,-0.029 1.333332,-0.079 v -1.348 c 4.82134,-0.6026 8.63867,-4.4173 9.24134,-9.24 h 1.348 c 0.048,-0.4373 0.0773,-0.8813 0.0773,-1.3333 z m -10.66667,7.88 v -1.2134 c 0,-0.7373 -0.59733,-1.3333 -1.33333,-1.3333 -0.735999,0 -1.333332,0.596 -1.333332,1.3333 v 1.2134 c -3.346667,-0.5627 -5.982667,-3.1974 -6.545334,-6.5454 h 1.212 c 0.737334,0 1.333334,-0.5973 1.333334,-1.3333 0,-0.736 -0.596,-1.3333 -1.333334,-1.3333 h -1.213333 c 0.564,-3.3467 3.2,-5.9827 6.546667,-6.5467 v 1.2133 c 0,0.736 0.597333,1.3334 1.333332,1.3334 0.736,0 1.33333,-0.5974 1.33333,-1.3334 v -1.2133 c 3.34801,0.5627 5.98401,3.1987 6.54667,6.5467 h -1.21333 c -0.73733,0 -1.33333,0.5973 -1.33333,1.3333 0,0.736 0.596,1.3333 1.33333,1.3333 h 1.21333 c -0.564,3.348 -3.19866,5.9827 -6.54667,6.5454 z"
id="path4611-6"
style="fill:#4d4d4d;fill-opacity:1" />
<circle
r="2.5"
cy="-290.92014"
cx="-995.55865"
style="fill:#464646;fill-opacity:1;stroke:none;stroke-width:4.28879309"
id="path4819-7"
transform="rotate(-111.82202)" />
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

56
umap/static/umap/js/umap.controls.js
View file

@ -826,21 +826,63 @@ 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,
className: "blinking"
});
map._geolocated_marker = L.marker(map.getCenter(), {
icon: L.divIcon({className: 'geolocated blinking', iconAnchor: [4, 7]}),
});
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;

26
umap/static/umap/map.css
View file

@ -76,7 +76,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;
@ -1329,6 +1333,26 @@ a.add-datalayer:hover,
line-height: 36px;
}
/* *********** */
/* Geolocation */
/* *********** */
@keyframes fade {
from { opacity: 0.5; }
}
.blinking {
animation: fade 1s infinite alternate;
}
.geolocated {
width: 10px !important;
height: 10px!important;
background-color: #3388ff;
border: 1px solid white;
border-radius: 5px;
box-shadow: 1px 5px 5px black;
}
/* ****** */
/* Mobile */
/* ****** */