From a458f5f4575ca66fa86202f08029280ba7a78976 Mon Sep 17 00:00:00 2001 From: Bartek Fabiszewski Date: Tue, 3 Sep 2019 21:45:40 +0200 Subject: [PATCH] Use SVG markers --- images/marker-gold.png | Bin 724 -> 0 bytes images/marker-green.png | Bin 696 -> 0 bytes images/marker-red.png | Bin 677 -> 0 bytes images/marker-white.png | Bin 359 -> 0 bytes js/config.js | 70 ++++++++++++++++++++++++++++ js/constants.js | 6 +++ js/mapapi/api_gmaps.js | 30 ++++++++---- js/mapapi/api_openlayers.js | 88 ++++++++++++++++++++++-------------- js/ui.js | 41 +++++++++++++++++ 9 files changed, 191 insertions(+), 44 deletions(-) delete mode 100644 images/marker-gold.png delete mode 100644 images/marker-green.png delete mode 100644 images/marker-red.png delete mode 100644 images/marker-white.png diff --git a/images/marker-gold.png b/images/marker-gold.png deleted file mode 100644 index 82dd7c4e360c669a1a90aeda01c9d26a0b3f88d8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 724 zcmV;_0xSKAP)X1^@s6IQ*`u0000PbVXQnQ*UN; zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!c1c7*RCwBAWIzQ1Dk}U5fk8^~TAG3e z3JQE+!3PgMFFHVm0s`y|*uaMmKN)7u zy!N58;&>sDy8v#0mbOsB)G2oJ?H!~ThyfQaykUrm*^_wf>bnI@K)yk0iWbqDLBPO3 zgrT*?d_IWD=;Ny}f72$f1Y`vV4?JU7vg9O#vhqJL|L$ET1|J^-2LAv>6oca8_HJPD z@lgms76b+o!_s93fr@$IVmi7E414#UV$cWLte}7pH#QOtU{Y5T5I{Cy`}R8wetx_d z&USX@2Fsy)g$Wcz$bg%h38&xDP3=#v$A%lJUo*V#0 zW5T`rvGbArwr0&OhW-04F=%KoF>v!RF`PZ~hr!WFk0B&P4J9g#3|BdV(?L>_=J`2u z9SzVE&BY6E!E9_%?Buxdz<~o#9hpI#^XK23eE$4v1TacDU@pZAFF$@^ z+0t8{K;{o-sMw3MXJ7C9@#9Z~i;FA=zC@Itclben|3yn!eqcnCci6u_U_Y)@xp2V^ zhQ!2uhM*vTi7}(8d2sXA2Z7*VB@2)j(8DAua(Cm055HC*i=!LB@Z`ytlLCSq88$YO zC|)TqJN{tTuE&8yWfow-HN1PD{QuwoEHDN}^M6ouV^fPY*?|g;Rjcm83yp;fZ#;nI zf1-i0vFLo53qUSnAOi%PJ0JFc{d!N3^A&I@V!>m;hEu0reE=pfkXIg%V*tbL+aC_x zy!qh+1Gxa|_XK=unDI#h6Ah@ad4bOhOavT(*Z&{@5MTgQ$Mu%6m00Tl0000X1^@s6IQ*`u0000PbVXQnQ*UN; zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!T1iAfRCwByR9i?CVHEy$Mq|rOwyUs< zU5svmuw5wZA=ZeWQ22S&2c3u#=ZtFr8%b_bG&uOhvz32TD>3CP_-=iDe1 zneMTJ7m=+$xl-|K0r)Wqn5CEqZUWYCL89~mnX1S!bnQK7S17-PK6nScRIkc+au9F4 zgzjCZEuCmHu=5nU14pi5w&5(oVpR18TIf@CBovR|#B;ICp$s5xj9SKwFK>`{F=nWh zH;b|ca=;Xc__JV9=CpBoAD`{r%?=6se>}Uoqxj_ZbWv?XpMZ(wIWVhV3hY)4z?X1^@s6IQ*`u0000PbVXQnQ*UN; zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!M@d9MRCwB)lS^n5Q51&1Bn7ikCnADE zArz5TL6SwmLXiY?p&+CRq9B^O@UamEY2B6X#7$FlVFgLLQmSC;rub?GL_-Bhs#fbG zIAYaQ#SU7bRiWNH&EsY|O+$aUBy%4Bz32SrxTu7-aW&Ds4IF9m5%8~?HyS_T)fCx* zcMKZ8hzXNfOmHd5k@GFYk8eiPR^SM87W!Udo=bB^d?rc+ThV zHdc}xen8UI7h>v|s9U`?oFpv&+Aa;HBBa#U#GZkBlU7ca82UigA=%s0 zz*`gjwYm6qE=h1R$EawiQ7y((%_)XP?nb^^3GO8tS+#zN{{jpEQGmwfe$yQ@00000 LNkvXXu0mjfk?u0n diff --git a/images/marker-white.png b/images/marker-white.png deleted file mode 100644 index 6e70481753a08b4b4b47b682e62c0b4e7c6ca71f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 359 zcmV-t0hs=YP)X1^@s6IQ*`u0000PbVXQnQ*UN; zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz2}wjjRCwC#RIv?%Fc2gp0~jW-SRfvO z2@qu}lr~#r14i%&WCO?qkdg+cOlLMA|HzRdgE0H)UaD~{dw0gfSdbuk+%N_FFiYsGk3mIIm! { markers[id].setIcon(icon); diff --git a/js/mapapi/api_openlayers.js b/js/mapapi/api_openlayers.js index 3c1bcf7..9c9bb46 100644 --- a/js/mapapi/api_openlayers.js +++ b/js/mapapi/api_openlayers.js @@ -160,44 +160,57 @@ function initLayers() { initLayerSwitcher(); } - function initStyles() { olStyles = {}; - const iconRed = new ol.style.Icon({ + const iconStart = new ol.style.Icon({ anchor: [ 0.5, 1 ], - src: 'images/marker-red.png' + src: uUI.getSvgSrc(config.colorStart, true) }); - const iconGreen = new ol.style.Icon({ + const iconStop = new ol.style.Icon({ anchor: [ 0.5, 1 ], - src: 'images/marker-green.png' + src: uUI.getSvgSrc(config.colorStop, true) }); - const iconWhite = new ol.style.Icon({ + const iconStartExtra = new ol.style.Icon({ + anchor: [ 0.5, 1 ], + src: uUI.getSvgSrc(config.colorStart, true, true) + }); + const iconStopExtra = new ol.style.Icon({ + anchor: [ 0.5, 1 ], + src: uUI.getSvgSrc(config.colorStop, true, true) + }); + const iconNormal = new ol.style.Icon({ anchor: [ 0.5, 1 ], opacity: 0.7, - src: 'images/marker-white.png' + src: uUI.getSvgSrc(config.colorNormal, false) }); - const iconGray = new ol.style.Icon({ + const iconExtra = new ol.style.Icon({ anchor: [ 0.5, 1 ], - src: 'images/marker-gray.png' + src: uUI.getSvgSrc(config.colorExtra, false, true) }); - const iconGold = new ol.style.Icon({ + const iconHilite = new ol.style.Icon({ anchor: [ 0.5, 1 ], - src: 'images/marker-gold.png' + src: uUI.getSvgSrc(config.colorHilite, false) }); - olStyles['red'] = new ol.style.Style({ - image: iconRed + olStyles['start'] = new ol.style.Style({ + image: iconStart }); - olStyles['green'] = new ol.style.Style({ - image: iconGreen + olStyles['stop'] = new ol.style.Style({ + image: iconStop }); - olStyles['white'] = new ol.style.Style({ - image: iconWhite + olStyles['startExtra'] = new ol.style.Style({ + image: iconStartExtra }); - olStyles['gray'] = new ol.style.Style({ - image: iconGray + olStyles['stopExtra'] = new ol.style.Style({ + image: iconStopExtra }); - olStyles['gold'] = new ol.style.Style({ - image: iconGold + olStyles['normal'] = new ol.style.Style({ + image: iconNormal + }); + olStyles['extra'] = new ol.style.Style({ + image: iconExtra + }); + olStyles['hilite'] = new ol.style.Style({ + image: iconHilite }); } @@ -411,6 +424,24 @@ function clearMap() { } } +function getMarkerStyle(position, id, posLen) { + let iconStyle = olStyles['normal']; + if (position.hasComment() || position.hasImage()) { + if (id === posLen - 1) { + iconStyle = olStyles['stopExtra']; + } else if (id === 0) { + iconStyle = olStyles['startExtra']; + } else { + iconStyle = olStyles['extra']; + } + } else if (id === posLen - 1) { + iconStyle = olStyles['stop']; + } else if (id === 0) { + iconStyle = olStyles['start']; + } + return iconStyle; +} + /** * Set marker * @param {number} id @@ -424,18 +455,7 @@ function setMarker(id, track) { geometry: new ol.geom.Point(ol.proj.fromLonLat([ position.longitude, position.latitude ])) }); - let iconStyle; - if (config.showLatest) { - iconStyle = olStyles['red']; - } else if (id === 0) { - iconStyle = olStyles['green']; - } else if (id === posLen - 1) { - iconStyle = olStyles['red']; - } else if (position.hasComment() || position.hasImage()) { - iconStyle = olStyles['gray']; - } else { - iconStyle = olStyles['white']; - } + const iconStyle = getMarkerStyle(position, id, posLen); marker.setStyle(iconStyle); marker.setId(id); layerMarkers.getSource().addFeature(marker); @@ -448,7 +468,7 @@ function setMarker(id, track) { function animateMarker(id) { const marker = layerMarkers.getSource().getFeatureById(id); const initStyle = marker.getStyle(); - const iconStyle = olStyles['gold']; + const iconStyle = olStyles['hilite']; marker.setStyle(iconStyle); setTimeout(() => marker.setStyle(initStyle), 2000); } diff --git a/js/ui.js b/js/ui.js index d53742b..3ae4c83 100644 --- a/js/ui.js +++ b/js/ui.js @@ -515,4 +515,45 @@ export default class uUI { static toggleLatest() { config.showLatest = !config.showLatest; } + + /** + * Get SVG marker path + * @param {boolean} isLarge Large marker with hole if true + * @return {string} + */ + static getMarkerPath(isLarge) { + const markerHole = 'M15,34.911c0,0,0.359-3.922,1.807-8.588c0.414-1.337,1.011-2.587,2.495-4.159' + + 'c1.152-1.223,3.073-2.393,3.909-4.447c1.681-6.306-3.676-9.258-8.211-9.258c-4.536,0-9.893,2.952-8.211,9.258' + + 'c0.836,2.055,2.756,3.225,3.91,4.447c1.484,1.572,2.08,2.822,2.495,4.159C14.64,30.989,15,34.911,15,34.911z M18,15.922' + + 'c0,1.705-1.342,3.087-2.999,3.087c-1.657,0-3-1.382-3-3.087c0-1.704,1.343-3.086,3-3.086C16.658,12.836,18,14.218,18,15.922z'; + const marker = 'M14.999,34.911c0,0,0.232-1.275,1.162-4.848c0.268-1.023,0.652-1.98,1.605-3.184' + + 'c0.742-0.937,1.975-1.832,2.514-3.404c1.082-4.828-2.363-7.088-5.281-7.088c-2.915,0-6.361,2.26-5.278,7.088' + + 'c0.538,1.572,1.771,2.468,2.514,3.404c0.953,1.203,1.337,2.16,1.604,3.184C14.77,33.635,14.999,34.911,14.999,34.911z'; + return isLarge ? markerHole : marker; + } + + /** + * Get marker extra mark + * @param {boolean} isLarge + * @return {string} + */ + static getMarkerExtra(isLarge) { + const offset1 = isLarge ? 'M26.074,13.517' : 'M23.328,20.715'; + const offset2 = isLarge ? 'M28.232,10.942' : 'M25.486,18.141'; + return ` + `; + } + + /** + * Get inline SVG source + * @param {string} fill + * @param {boolean=} isLarge + * @param {boolean=} isExtra + * @return {string} + */ + static getSvgSrc(fill, isLarge, isExtra) { + const svg = ` + ${isExtra ? uUI.getMarkerExtra(isLarge) : ''}`; + return `data:image/svg+xml,${encodeURIComponent(svg)}`; + } }