Improve map touch area and popup display behaviour

MTG · Feb 13, 2024 · f5c2705 · f5c2705
1 parent efbd7bf
commit f5c2705
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 13 deletions.
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
diff --git 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
diff --git a/freesound/static/bw-frontend/public/map_marker_v2_2x.png b/freesound/static/bw-frontend/public/map_marker_v2_2x.png
diff --git a/freesound/static/bw-frontend/src/components/mapsMapbox.js b/freesound/static/bw-frontend/src/components/mapsMapbox.js
@@ -5,8 +5,8 @@ import { stopAllPlayers } from '../components/player/utils'
 var FREESOUND_SATELLITE_STYLE_ID = 'cjgxefqkb00142roas6kmqneq';
 var FREESOUND_STREETS_STYLE_ID = 'cjkmk0h7p79z32spe9j735hrd';
 var MIN_INPUT_CHARACTERS_FOR_GEOCODER =  3; // From mapbox docs: "Minimum number of characters to enter before [geocoder] results are shown"
-var MAP_MARKER_URL = '/static/bw-frontend/dist/map_marker.png'; 
-var MAP_MARKER_2X_URL = '/static/bw-frontend/dist/map_marker_2x.png';
+var MAP_MARKER_URL = '/static/bw-frontend/dist/map_marker_v2.png'; 
+var MAP_MARKER_2X_URL = '/static/bw-frontend/dist/map_marker_v2_2x.png';
 
 function setMaxZoomCenter(lat, lng, zoom) {
     window.map.flyTo({'center': [lng, lat], 'zoom': zoom - 1});  // Subtract 1 for compatibility with gmaps zoom levels
@@ -231,40 +231,64 @@ function makeSoundsMap(geotags_url, map_element_id, on_built_callback, on_bounds
                 }
 
                 // Add popups
-                let popupAlreadyLoading = false;
+                map.popups = {};
                 map.on('click', 'sounds-unclustered', function (e) {
-                    if (!popupAlreadyLoading){3
-                        popupAlreadyLoading = true;
+                    var sound_id = e.features[0].properties.id;
+                    if (map.popups.hasOwnProperty(sound_id) === false){
+                        // Close all other popups
+                        Object.keys(map.popups).forEach(function(key) {
+                            if (map.popups[key] !== undefined){
+                                map.popups[key].remove();
+                            }
+                            delete map.popups[key];
+                        })
+                        // Set new popup as loading
+                        map.popups[sound_id] = undefined;
+
                         stopAllPlayers();
+
                         var coordinates = e.features[0].geometry.coordinates.slice();
-                        var sound_id = e.features[0].properties.id;
                         let url = '/geotags/infowindow/' + sound_id;
                         if (document.getElementById(map_element_id).offsetWidth < 500){
                             // If map is small, use minimal info windows
                             url += '/?minimal=1'
                         }
                         ajaxLoad(url , function(data, responseCode)
                         {
+                            // Check if the popup should still be shown (it might have been cancelled if another one is loading)
+                            if (map.popups.hasOwnProperty(sound_id) === false){
+                                return;
+                            }
+
                             // Ensure that if the map is zoomed out such that multiple
                             // copies of the feature are visible, the popup appears
                             // over the copy being pointed to.
                             while (Math.abs(e.lngLat.lng - coordinates[0]) > 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)};
 
                             // 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
@@ -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);