From 3452518035dbbb4619810f020acb34ee247df8c8 Mon Sep 17 00:00:00 2001 From: secondl1ght <85003930+secondl1ght@users.noreply.github.com> Date: Sun, 23 Apr 2023 22:02:14 -0600 Subject: [PATCH] make any part of map shareable via url --- src/lib/map/setup.js | 2 -- src/routes/map/+page.svelte | 25 ++++++++++++++++++++++--- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/lib/map/setup.js b/src/lib/map/setup.js index b5f0e2be..bc0d3c1f 100644 --- a/src/lib/map/setup.js +++ b/src/lib/map/setup.js @@ -286,7 +286,6 @@ export const changeDefaultIcons = (layers, L, mapElement, DomEvent) => { const fullscreenButton = L.DomUtil.create('a'); fullscreenButton.classList.add('leaflet-control-full-screen'); - fullscreenButton.href = '#'; fullscreenButton.title = 'Full screen'; fullscreenButton.role = 'button'; fullscreenButton.ariaLabel = 'Full screen'; @@ -431,7 +430,6 @@ export const dataRefresh = (L, map, DomEvent) => { const dataRefreshButton = L.DomUtil.create('a'); dataRefreshButton.classList.add('leaflet-control-data-refresh'); - dataRefreshButton.href = '#'; dataRefreshButton.title = 'Data refresh available'; dataRefreshButton.role = 'button'; dataRefreshButton.ariaLabel = 'Data refresh available'; diff --git a/src/routes/map/+page.svelte b/src/routes/map/+page.svelte index cb44b180..410dec08 100644 --- a/src/routes/map/+page.svelte +++ b/src/routes/map/+page.svelte @@ -194,8 +194,24 @@ // add map and tiles map = leaflet.map(mapElement); + // use url hash if present + if (location.hash) { + try { + const coords = location.hash.split('/'); + map.setView([coords[1], coords[2]], coords[0].slice(1)); + mapCenter = map.getCenter(); + } catch (error) { + map.setView([0, 0], 3); + mapCenter = map.getCenter(); + errToast( + 'Could not set map view to provided coordinates, please try again or contact BTC Map.' + ); + console.log(error); + } + } + // set view to community if in url params - if (community && communitySelected) { + else if (community && communitySelected) { try { // eslint-disable-next-line no-undef map.fitBounds(L.geoJSON(communitySelected.tags.geo_json).getBounds()); @@ -304,6 +320,11 @@ Thanks for using BTC Map!`); mapCenter = map.getCenter(); + if (!community && !communitiesOnly && !urlLat.length && !urlLong.length) { + const zoom = map.getZoom(); + location.hash = zoom + '/' + mapCenter.lat.toFixed(5) + '/' + mapCenter.lng.toFixed(5); + } + localforage .setItem('coords', coords) // eslint-disable-next-line no-unused-vars @@ -348,7 +369,6 @@ Thanks for using BTC Map!`); // eslint-disable-next-line no-undef const searchButton = L.DomUtil.create('a'); searchButton.classList.add('leaflet-control-search-toggle'); - searchButton.href = '#'; searchButton.title = 'Search toggle'; searchButton.role = 'button'; searchButton.ariaLabel = 'Search toggle'; @@ -435,7 +455,6 @@ Thanks for using BTC Map!`); // eslint-disable-next-line no-undef const boostLayerButton = L.DomUtil.create('a'); boostLayerButton.classList.add('leaflet-control-boost-layer'); - boostLayerButton.href = '#'; boostLayerButton.title = 'Boosted locations'; boostLayerButton.role = 'button'; boostLayerButton.ariaLabel = 'Boosted locations';