From f5c27057b8488cabc1d92fdbcd121567bbbda4fe Mon Sep 17 00:00:00 2001 From: ffont Date: Tue, 13 Feb 2024 13:43:43 +0100 Subject: [PATCH] Improve map touch area and popup display behaviour --- .../public/embeds/images/map_marker_v2.png | Bin 0 -> 3084 bytes .../bw-frontend/public/embeds/maps-mapbox.js | 4 +- .../bw-frontend/public/map_marker_v2.png | Bin 0 -> 3084 bytes .../bw-frontend/public/map_marker_v2_2x.png | Bin 0 -> 4181 bytes .../bw-frontend/src/components/mapsMapbox.js | 44 ++++++++++++++---- freesound/static/bw-frontend/src/pages/map.js | 6 ++- 6 files changed, 41 insertions(+), 13 deletions(-) create mode 100644 freesound/static/bw-frontend/public/embeds/images/map_marker_v2.png create mode 100644 freesound/static/bw-frontend/public/map_marker_v2.png create mode 100644 freesound/static/bw-frontend/public/map_marker_v2_2x.png diff --git a/freesound/static/bw-frontend/public/embeds/images/map_marker_v2.png b/freesound/static/bw-frontend/public/embeds/images/map_marker_v2.png new file mode 100644 index 0000000000000000000000000000000000000000..e7da5b7a478892e8acbfeea1eafd175bc9595559 GIT binary patch literal 3084 zcmai03s6&M7QO+B5a04Bibx2Iuwb4dEol;j1SDd3nQCws>xJBq3we3(MG}w>rY@`5 z7F1dvjIIh*w(QD`TNRPfDg_^1K&DVyw51gh$0E8ep!lfne-lVTCUldz_y2SL?>p!G z=ltjV*`1!cW-fIJ6@s9-l4Nlv7=6LR_VNVpg=aP~z(Bz>*CapeTv7!763VBT8i@`{KlEDKs zSw}9L%jK~-JWe!?!{M!D^Vn<%az93~TRi4w)8Ko|-8Kg>2&x!M`2q~y`s6Gef@b@W z4+W||8~{PHbf`>D$ffIexjGFKR_JmNra_}8SrFgA15*t`z%+wKt;Kl;0o{V&fjKE= z(P97XngTG8pK0a44vCZqml}0g4ARu|5rLZ{+PPEL@G^0QRWrNe>1asJyWd$@g1x&#I zUxg!Zx)Q0BmyF_s4l_D!h1}nIWb1UPLx9M2J&fT9S&0HVnGv!SZJp3sM%FjqQqeqI zrzDDC42jPJ$3qyeRHEP%8flx+jO^@jmg}I1g ziasfxnOCGj$P#rOc&iH*h_i;@Oa1hKS@P#Hzrd6vK&) ziD7V=pmtp1>>fGjv9v01q!1y9pq*wHPqM7;J6utg3|pn(0u)k#*Hf3Nkot9}ydGTN z3Ud2jD?fK}Uz4)V|OQRi4 z;m;Iq>Dk}Slf9Qdvihw18*~=^v(8e_EsJNbj)Gp~LACQ~U&&HquUv04Z2zEi#kMm$ zkfPq+9(Houxu9#AbMBV*vL6laUv-({YZ?fN7q6|`ccXvRjlri$`w^43ffZQ3>eBfM zy)5IF$?y9KA10-zad}ncxs%<^eexAUmCsA7Yx1jye~tO}WYg9I$ap2>EBVo95Xui+ zwEMW`!PwtaVX}AclWr$9yP65SJ~n3)MdV0yE`$0O8YfKLS>(p z6QY!VUx|voc(iO;)Z)tEU3bMl*DUgu8wWhpB~Ry^n>YV!bH%(}J-sgipz}AqtA$Cc zH|`J_OmOeQJwNp94c+tT;j1Q1zUlqC)Ex}3%k$?gG8YW1irpzcQvYDSB}?n>@M!f9 z{_sy*j8^p3>bB>XgtRo8-CzV&DV*Z)HEm3Tpc zV0(Zbk*{02I0U}Aq#|@PG5KcvLGn@wE7#U+MeXJH~?!+>1FpFfPsfPADr@ z#Y8>$Z+-nx^oZvjqsff+AM)SX81|pKZ5w>o+~jpe+$k|FEel0&bsR=Fg~@MxSat7l zR(9Ou`$kj1L+;1TKKwT=X%Y9|HYZM0cL-ziZa;o?_-BudV-fkc`ixmazkQzh`eRyq zvKiwA%%-{(4-B*RjYU*OMl?R$zRch6MDUS9;dO8CoP^~EhO393r^R#o(x@#5|6c$0 z^?qFn6@yw#Cw~%k`&>wx$bVwSg15HdyFX2#4upSGUtGAn>Umk|o9b^An=kf^7kt?M z_<-MF*Qx|oEgaYpoi&k7UvhQ)my(^Wrx{VZKFX3d^P{|~ez;b!d7rTULjOyA;|p98 zKko>?w!U`oWoO^hlAXUrHtihRXF6D!^shgDTR2OazAUJ(WbtQRSje;c|M=5_yWJI| z+t1dlYr2HYWwf=OHk%r|;>v^02`Z90T3*M^&Y@&{AHL^MLsV9`U&}$ NSCW`2Zb;Z-`X56V1XKV3 literal 0 HcmV?d00001 diff --git a/freesound/static/bw-frontend/public/embeds/maps-mapbox.js b/freesound/static/bw-frontend/public/embeds/maps-mapbox.js index e596d9e88..132ffc995 100644 --- a/freesound/static/bw-frontend/public/embeds/maps-mapbox.js +++ b/freesound/static/bw-frontend/public/embeds/maps-mapbox.js @@ -203,7 +203,7 @@ function make_sounds_map(geotags_url, map_element_id, on_built_callback, on_boun map.on('style.load', function () { // Triggered when `setStyle` is called, add all data layers - map.loadImage('/static/bw-frontend/public/embeds/images/map_marker.png', function(error, image) { + map.loadImage('/static/bw-frontend/public/embeds/images/map_marker_v2.png', function(error, image) { map.addImage("custom-marker", image); // Setup clustering @@ -359,7 +359,7 @@ function make_geotag_edit_map(map_element_id, arrow_url, on_bounds_changed_callb }); map.on('style.load', function () { // Triggered when `setStyle` is called, add all data layers - map.loadImage('/static/bw-frontend/public/embeds/images/map_marker.png', function(error, image) { + map.loadImage('/static/bw-frontend/public/embeds/images/map_marker_v2.png', function(error, image) { map.addImage("custom-marker", image); // Add position marker diff --git a/freesound/static/bw-frontend/public/map_marker_v2.png b/freesound/static/bw-frontend/public/map_marker_v2.png new file mode 100644 index 0000000000000000000000000000000000000000..e7da5b7a478892e8acbfeea1eafd175bc9595559 GIT binary patch literal 3084 zcmai03s6&M7QO+B5a04Bibx2Iuwb4dEol;j1SDd3nQCws>xJBq3we3(MG}w>rY@`5 z7F1dvjIIh*w(QD`TNRPfDg_^1K&DVyw51gh$0E8ep!lfne-lVTCUldz_y2SL?>p!G z=ltjV*`1!cW-fIJ6@s9-l4Nlv7=6LR_VNVpg=aP~z(Bz>*CapeTv7!763VBT8i@`{KlEDKs zSw}9L%jK~-JWe!?!{M!D^Vn<%az93~TRi4w)8Ko|-8Kg>2&x!M`2q~y`s6Gef@b@W z4+W||8~{PHbf`>D$ffIexjGFKR_JmNra_}8SrFgA15*t`z%+wKt;Kl;0o{V&fjKE= z(P97XngTG8pK0a44vCZqml}0g4ARu|5rLZ{+PPEL@G^0QRWrNe>1asJyWd$@g1x&#I zUxg!Zx)Q0BmyF_s4l_D!h1}nIWb1UPLx9M2J&fT9S&0HVnGv!SZJp3sM%FjqQqeqI zrzDDC42jPJ$3qyeRHEP%8flx+jO^@jmg}I1g ziasfxnOCGj$P#rOc&iH*h_i;@Oa1hKS@P#Hzrd6vK&) ziD7V=pmtp1>>fGjv9v01q!1y9pq*wHPqM7;J6utg3|pn(0u)k#*Hf3Nkot9}ydGTN z3Ud2jD?fK}Uz4)V|OQRi4 z;m;Iq>Dk}Slf9Qdvihw18*~=^v(8e_EsJNbj)Gp~LACQ~U&&HquUv04Z2zEi#kMm$ zkfPq+9(Houxu9#AbMBV*vL6laUv-({YZ?fN7q6|`ccXvRjlri$`w^43ffZQ3>eBfM zy)5IF$?y9KA10-zad}ncxs%<^eexAUmCsA7Yx1jye~tO}WYg9I$ap2>EBVo95Xui+ zwEMW`!PwtaVX}AclWr$9yP65SJ~n3)MdV0yE`$0O8YfKLS>(p z6QY!VUx|voc(iO;)Z)tEU3bMl*DUgu8wWhpB~Ry^n>YV!bH%(}J-sgipz}AqtA$Cc zH|`J_OmOeQJwNp94c+tT;j1Q1zUlqC)Ex}3%k$?gG8YW1irpzcQvYDSB}?n>@M!f9 z{_sy*j8^p3>bB>XgtRo8-CzV&DV*Z)HEm3Tpc zV0(Zbk*{02I0U}Aq#|@PG5KcvLGn@wE7#U+MeXJH~?!+>1FpFfPsfPADr@ z#Y8>$Z+-nx^oZvjqsff+AM)SX81|pKZ5w>o+~jpe+$k|FEel0&bsR=Fg~@MxSat7l zR(9Ou`$kj1L+;1TKKwT=X%Y9|HYZM0cL-ziZa;o?_-BudV-fkc`ixmazkQzh`eRyq zvKiwA%%-{(4-B*RjYU*OMl?R$zRch6MDUS9;dO8CoP^~EhO393r^R#o(x@#5|6c$0 z^?qFn6@yw#Cw~%k`&>wx$bVwSg15HdyFX2#4upSGUtGAn>Umk|o9b^An=kf^7kt?M z_<-MF*Qx|oEgaYpoi&k7UvhQ)my(^Wrx{VZKFX3d^P{|~ez;b!d7rTULjOyA;|p98 zKko>?w!U`oWoO^hlAXUrHtihRXF6D!^shgDTR2OazAUJ(WbtQRSje;c|M=5_yWJI| z+t1dlYr2HYWwf=OHk%r|;>v^02`Z90T3*M^&Y@&{AHL^MLsV9`U&}$ NSCW`2Zb;Z-`X56V1XKV3 literal 0 HcmV?d00001 diff --git a/freesound/static/bw-frontend/public/map_marker_v2_2x.png b/freesound/static/bw-frontend/public/map_marker_v2_2x.png new file mode 100644 index 0000000000000000000000000000000000000000..bc75a2d016e9026becec46130f50f3537fc81ca7 GIT binary patch literal 4181 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 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } - var popup = new mapboxgl.Popup() + var popup = new mapboxgl.Popup({ closeOnClick: false }) .setLngLat(coordinates) .setHTML(data.response) .addTo(map); - + popup.on('close', function(e) { + delete map.popups[sound_id]; + }) + map.popups[sound_id] = popup; + // Zoom to position on "zoom in" click const zoomLinkElement = document.getElementById('infoWindowZoomLink-' + sound_id); zoomLinkElement.onclick = () => {setMaxZoomCenter(zoomLinkElement.dataset.lat, zoomLinkElement.dataset.lon, zoomLinkElement.dataset.zoom)}; @@ -263,8 +282,13 @@ function makeSoundsMap(geotags_url, map_element_id, on_built_callback, on_bounds // Init sound player inside popup initializeStuffInContainer(document.getElementById('infoWindowPlayerWrapper-' + sound_id), true, false); }); + } else { + // If popup already open, close it + if (map.popups[sound_id] !== undefined){ + map.popups[sound_id].remove(); + delete map.popups[sound_id]; + } } - setTimeout(() => { popupAlreadyLoading = false; }, 500); // Avoid problems loading popups two times with double clicks }); map.on("dblclick", "sounds-unclustered", function(e) { @@ -394,6 +418,8 @@ function makeSoundsMap(geotags_url, map_element_id, on_built_callback, on_bounds layout: { "icon-image": "custom-marker", "icon-allow-overlap": true, + //"icon-anchor": "center", + //"icon-offset": [0, -40], } }); }); diff --git a/freesound/static/bw-frontend/src/pages/map.js b/freesound/static/bw-frontend/src/pages/map.js index 8c8c1182e..d3f6dafbf 100644 --- a/freesound/static/bw-frontend/src/pages/map.js +++ b/freesound/static/bw-frontend/src/pages/map.js @@ -147,8 +147,10 @@ const initMap = (mapCanvas) => { if (loadingIndicator !== null){ loadingIndicator.innerText = `${numLoadedSounds} sound${ numLoadedSounds === 1 ? '': 's'}`; } - embedWidthInputElement.value = mapCanvas.offsetWidth; - embedHeightInputElement.value = mapCanvas.offsetHeight; + if (embedWidthInputElement !== null){ + embedWidthInputElement.value = mapCanvas.offsetWidth; + embedHeightInputElement.value = mapCanvas.offsetHeight; + } }, updateEmbedCode, centerLat, centerLon, zoom, showSearch, showStyleSelector, clusterGeotags, showMapEvenIfNoGeotags);