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 000000000..e7da5b7a4 Binary files /dev/null and b/freesound/static/bw-frontend/public/embeds/images/map_marker_v2.png differ 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 000000000..e7da5b7a4 Binary files /dev/null and b/freesound/static/bw-frontend/public/map_marker_v2.png differ 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 000000000..bc75a2d01 Binary files /dev/null and b/freesound/static/bw-frontend/public/map_marker_v2_2x.png differ diff --git a/freesound/static/bw-frontend/src/components/mapsMapbox.js b/freesound/static/bw-frontend/src/components/mapsMapbox.js index 98c6ab476..559f3a75a 100644 --- 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,13 +231,23 @@ 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 @@ -245,17 +255,26 @@ function makeSoundsMap(geotags_url, map_element_id, on_built_callback, on_bounds } 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)}; @@ -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);