Skip to content

Commit 64a0021

Browse files
rbrundrittrbrundritt
committed
Update geolocation control module
Update geolocation control module to latest version
1 parent 409f9fa commit 64a0021

2 files changed

Lines changed: 52 additions & 19 deletions

File tree

‎Static/lib/azure-maps/azure-maps-geolocation-control.js‎

Lines changed: 51 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,10 @@ MIT License
156156
_this._hclStyle = null;
157157
_this._isActive = false;
158158
_this._updateMapCamera = true;
159+
//When the page is unloaded, stop tracking the user location.
160+
_this._pageUnload = function () {
161+
_this._stopTracking();
162+
};
159163
/****************************
160164
* Private Methods
161165
***************************/
@@ -223,31 +227,33 @@ MIT License
223227
pos = lastKnownPosition.geometry.coordinates;
224228
}
225229
if (self._isActive) {
226-
var icon = self._getMarkerIcon();
227230
if (options.showUserLocation) {
228231
if (!gpsMarker) {
232+
var icon = self._getMarkerIcon();
229233
self._gpsMarker = new azmaps.HtmlMarker({
230234
position: pos,
231235
htmlContent: icon,
232-
color: options.markerColor
236+
anchor: 'center'
233237
});
238+
//@ts-ignore
239+
self._gpsMarker.marker.setPitchAlignment('map');
240+
//@ts-ignore
241+
self._gpsMarker.marker.setRotationAlignment('map');
234242
map.markers.add(self._gpsMarker);
235243
}
236244
else {
237245
gpsMarker.setOptions({
238246
position: pos,
239-
htmlContent: icon,
240247
visible: self._isActive && options.showUserLocation
241248
});
242249
}
250+
self._updateMarkerHeading();
243251
}
244252
else {
245253
gpsMarker.setOptions({
246254
visible: false
247255
});
248256
}
249-
//@ts-ignore
250-
self._gpsMarker.marker.setPitchAlignment('map');
251257
if (self._updateMapCamera) {
252258
var opt = {
253259
center: pos
@@ -386,6 +392,7 @@ MIT License
386392
self._map.events.add('movestart', self._mapMoveStarted);
387393
self._map.events.add('moveend', self._mapMoveEnded);
388394
self.setOptions(self._options);
395+
addEventListener('beforeunload', self._pageUnload, false);
389396
return c;
390397
};
391398
/**
@@ -408,6 +415,7 @@ MIT License
408415
self._map.markers.remove(self._gpsMarker);
409416
}
410417
self._map = null;
418+
removeEventListener('beforeunload', self._pageUnload);
411419
};
412420
/** Gets the options of the geolocation control. */
413421
GeolocationControl.prototype.getOptions = function () {
@@ -449,9 +457,8 @@ MIT License
449457
if (options.markerColor) {
450458
o.markerColor = options.markerColor;
451459
if (self._gpsMarker) {
452-
self._gpsMarker.setOptions({
453-
color: options.markerColor
454-
});
460+
//@ts-ignore
461+
self._gpsMarker.getOptions().htmlContent.querySelector('.gps-dot').style.backgroundColor = options.markerColor;
455462
}
456463
}
457464
if (typeof options.maxZoom === 'number') {
@@ -593,15 +600,37 @@ MIT License
593600
};
594601
/** Generates the mark icon HTML */
595602
GeolocationControl.prototype._getMarkerIcon = function () {
596-
var icon = GeolocationControl._gpsDotIcon;
597-
var h = this._lastKnownPosition.properties.heading;
598-
if (this._options.trackUserLocation && h !== null && !isNaN(h)) {
603+
var icon = document.createElement('div');
604+
icon.className = 'gps-container';
605+
icon.innerHTML = GeolocationControl._gpsDotIcon.replace('{color}', 'dodgerBlue');
606+
return icon;
607+
};
608+
GeolocationControl.prototype._updateMarkerHeading = function () {
609+
var self = this;
610+
var h = self._lastKnownPosition.properties.heading;
611+
var clipPath = 'none';
612+
var animate = true;
613+
if (!isNaN(h)) {
599614
h = Math.round(h);
600-
//TODO: update when markers support rotation.
601-
var transform = "-webkit-transform:rotate(" + h + "deg);transform:rotate(" + h + "deg)";
602-
icon = GeolocationControl._gpsArrowIcon.replace('{transform}', transform);
615+
//@ts-ignore
616+
self._gpsMarker.marker.setRotation(h);
617+
clipPath = 'polygon(50% 50%, 0% 0%, 100% 0%)';
618+
animate = false;
619+
}
620+
//@ts-ignore
621+
var gpsPluseElm = self._gpsMarker.getOptions().htmlContent.querySelector('.gps-pulse');
622+
gpsPluseElm.style.clipPath = clipPath;
623+
var animationClass = 'gps-pulse-animation';
624+
var cl = gpsPluseElm.classList;
625+
var hasClass = cl.contains(animationClass);
626+
if (animate) {
627+
if (!hasClass) {
628+
cl.add(animationClass);
629+
}
630+
}
631+
else if (hasClass) {
632+
cl.remove(animationClass);
603633
}
604-
return icon;
605634
};
606635
/**
607636
* Returns the set of translation text resources needed for the control for a given language.
@@ -620,15 +649,19 @@ MIT License
620649
}
621650
return r;
622651
};
623-
GeolocationControl._gpsArrowIcon = '<div style="{transform}"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><g transform="translate(2 2)"><polygon points="12,0 0,24 12,17 24,24" stroke-width="2" stroke="white" fill="{color}"/></g></svg></div>';
624-
GeolocationControl._gpsDotIcon = '<div class="azmaps-gpsPulseIcon" style="background-color:{color}"></div>';
652+
GeolocationControl._gpsDotIcon = '<div class="gps-dot" style="background-color:{color}"></div><div class="gps-wedge"><div class="gps-pulse"></div></div>';
625653
GeolocationControl._iconTemplate = "data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 561 561' xml:space='preserve'><g fill='{color}'><path d='M280.5,178.5c-56.1,0-102,45.9-102,102c0,56.1,45.9,102,102,102c56.1,0,102-45.9,102-102C382.5,224.4,336.6,178.5,280.5,178.5z M507.45,255C494.7,147.9,410.55,63.75,306,53.55V0h-51v53.55C147.9,63.75,63.75,147.9,53.55,255H0v51h53.55C66.3,413.1,150.45,497.25,255,507.45V561h51v-53.55C413.1,494.7,497.25,410.55,507.45,306H561v-51H507.45z M280.5,459C181.05,459,102,379.95,102,280.5S181.05,102,280.5,102S459,181.05,459,280.5S379.95,459,280.5,459z'/></g></svg>";
626654
GeolocationControl._gpsBtnCss = '.azmaps-gpsBtn{margin:0;padding:0;border:none;border-collapse:collapse;width:32px;height:32px;text-align:center;cursor:pointer;line-height:32px;background-repeat:no-repeat;background-size:20px;background-position:center center;z-index:200;box-shadow:0px 0px 4px rgba(0,0,0,0.16);}' +
627655
'.azmaps-gpsDisabled{background-image:url("{grayIcon}");}' +
628656
'.azmaps-gpsDisabled:hover{background-image:url("{blueIcon}");filter:brightness(90%);}' +
629657
'.azmaps-gpsEnabled{background-image:url("{blueIcon}");}' +
630658
'.azmaps-gpsEnabled:hover{background-image:url("{blueIcon}");filter:brightness(90%);}' +
631-
'.azmaps-gpsPulseIcon{display:block;width:15px;height:15px;border-radius:50%;background:orange;border:2px solid white;cursor:pointer;box-shadow:0 0 0 rgba(0, 204, 255, 0.6);animation:pulse 2s infinite;}@keyframes pulse {0% {box-shadow:0 0 0 0 rgba(0, 204, 255, 0.6);}70% {box-shadow:0 0 0 20px rgba(0, 204, 255, 0);}100% {box-shadow:0 0 0 0 rgba(0, 204, 255, 0);}}';
659+
'.gps-container{position:relative;width:16px;height:16px;}' +
660+
'.gps-dot{width:12px;height:12px;background-color:dodgerBlue;border:2px white solid;border-radius:50%;position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);z-index:100000;}' +
661+
'.gps-wedge{width:16px;height:16px;position:absolute;top:0;left:0;z-index:99999;}' +
662+
'.gps-pulse{width:100%;height:100%;border-radius:50%;background-image: radial-gradient(rgba(30,144,255,1),rgba(30,144,255,0.5));position:absolute;transform-origin:center;transform:scale(2.5);}' +
663+
'.gps-pulse-animation{animation:gps-pulse-animation-key 2s infinite ease-out;}' +
664+
'@keyframes gps-pulse-animation-key { 0% {transform:scale(0.5);opacity:1;} 100% {transform: scale(2.5);opacity:0.5;}}';
632665
GeolocationControl._translations = {
633666
//Afrikaans
634667
'af': ['begin dop', 'stop die dop', 'my plek', 'ligginggewing beheer'],

0 commit comments

Comments
 (0)