diff --git a/src/assets/javascripts/helpers/maps.js b/src/assets/javascripts/helpers/maps.js index c340557..582a70d 100644 --- a/src/assets/javascripts/helpers/maps.js +++ b/src/assets/javascripts/helpers/maps.js @@ -1,3 +1,5 @@ +"use strict"; + window.browser = window.browser || window.chrome; import commonHelper from './common.js' @@ -37,7 +39,7 @@ function addressToLatLng(address, callback) { if (xmlhttp.status === 200) { const json = JSON.parse(xmlhttp.responseText)[0]; if (json) callback( - `${json.lat}%2C${json.lon}`, + `${json.lat},${json.lon}`, `${json.boundingbox[2]},${json.boundingbox[1]},${json.boundingbox[3]},${json.boundingbox[0]}` ); } else @@ -72,156 +74,126 @@ function redirect(url, initiator) { if (disable) return; if (initiator && initiator.host === "earth.google.com") return; - if (!url.href.match(targets)) return; - let redirect; - let randomInstance + let randomInstance; if (frontend == 'osm') randomInstance = commonHelper.getRandomInstance(redirects.osm.normal); if (frontend == 'facil') randomInstance = commonHelper.getRandomInstance(redirects.facil.normal); - let mapCentre; - let params = ""; + + let mapCentre = "#"; + let prefs = {}; + // Set map centre if present if (url.pathname.match(mapCentreRegex)) { - const [, lat, lon, zoom] = url.pathname.match(mapCentreRegex); + var [, lat, lon, zoom] = url.pathname.match(mapCentreRegex); + } else if (url.searchParams.has("center")) { + var [lat, lon] = url.searchParams.get("center").split(","); + var zoom = url.searchParams.get("zoom") ?? "17"; + } + + if (lat && lon && zoom) { if (frontend == 'osm') mapCentre = `#map=${zoom}/${lat}/${lon}`; - if (frontend == 'facil') mapCentre = `#${zoom}/${lat}/${lon}` + if (frontend == 'facil') mapCentre = `#${zoom}/${lat}/${lon}`; console.log("lat", lat) // vertical console.log("lon", lon) // horizontal - console.log("zoom", zoom) - - } else if (url.search.includes("center=")) { - const [lat, lon] = url.searchParams.get("center").split(","); - const zoom = url.searchParams.get("zoom") || "17"; - if (frontend == 'osm') mapCentre = `#map=${zoom}/${lat}/${lon}`; - if (frontend == 'facil') mapCentre = `#${zoom}/${lat}/${lon}` - - console.log("lat", lat) - console.log("lon", lon) - console.log("zoom", zoom) + console.log("zoom", zoom); } - // Set map layer - let layer = osmLayers[url.searchParams.get("layer")] || osmLayers["none"]; - params = `${params}&layers=${layer}`; - - console.log("layer", layer); + if (url.searchParams.get("layer")) prefs.layers = osmLayers[url.searchParams.get("layer")]; // Handle Google Maps Embed API if (url.pathname.includes("/embed")) { let query = ""; if (url.searchParams.has("q")) query = url.searchParams.get("q"); else if (url.searchParams.has("query")) query = url.searchParams.has("query"); + else if (url.searchParams.has("pb")) - try { - query = url.searchParams.get("pb").split(/!2s(.*?)!/)[1]; - } catch (error) { - console.error(error); // Unable to find map marker in URL. + try { query = url.searchParams.get("pb").split(/!2s(.*?)!/)[1]; } + catch (error) { console.error(error); } // Unable to find map marker in URL. + + addressToLatLng( + query, + (coords, boundingbox) => { + prefs.bbox = boundingbox; + prefs.marker = coords; } + ); + prefs.layer = "mapnik"; - console.log("query", query) + let prefsEncoded = new URLSearchParams(prefs).toString(); + if (frontend == 'osm') return `${randomInstance}/export/embed.html?${prefsEncoded}`; - let marker, bbox; - addressToLatLng(query, (coords, boundingbox) => { - marker = coords; - bbox = boundingbox; + } else if (url.pathname.includes("/dir")) { // Handle Google Maps Directions + if (url.searchParams.has("travelmode")) prefs.engine = travelModes[url.searchParams.get("travelmode")]; - console.log("marker", marker) - console.log("bbox", bbox) - }); - if (frontend == 'osm') redirect = `${randomInstance}/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${marker}`; - if (frontend == 'facil') redirect = redirect = `${randomInstance}/${mapCentre}/Mpnk` + let origin; addressToLatLng(url.searchParams.get("origin"), a => origin = a); + let destination; addressToLatLng(url.searchParams.get("destination"), a => destination = a); + prefs.route = `${origin};${destination}`; - // Handle Google Maps Directions - } else if (url.pathname.includes("/dir")) { - const travelMode = travelModes[url.searchParams.get("travelmode")] || travelModes["driving"]; + let prefsEncoded = new URLSearchParams(prefs).toString(); + if (frontend == 'osm') return `${randomInstance}/directions?${prefsEncoded}${mapCentre}`; + } else if (url.pathname.includes("data=") && url.pathname.match(dataLatLngRegex)) { // Get marker from data attribute + console.log("data life"); - let origin; - console.log(url.searchParams.get("origin")) - addressToLatLng(url.searchParams.get("origin"), coords => origin = coords); - - let destination; - addressToLatLng(url.searchParams.get("destination"), coords => destination = coords); - - if (frontend == 'osm') redirect = `${randomInstance}/directions?engine=${travelMode}&route=${origin}%3B${destination}`; - // ${mapCentre}${params} - - if (frontend == 'facil') { - mapCentre = mapCentre ?? '#1/0/0'; - redirect = redirect = `${randomInstance}/${mapCentre}/Mpnk` - } - - console.log("travelMode", travelMode) - console.log("origin", origin) - console.log("destination", destination) - - // Get marker from data attribute - } else if (url.pathname.includes("data=") && url.pathname.match(dataLatLngRegex)) { const [mlat, mlon] = url.pathname.match(dataLatLngRegex); - - if (frontend == 'osm') redirect = `${randomInstance}/?mlat=${mlat.replace("!3d", "")}&mlon=${mlon.replace("!4d", "")}${mapCentre}${params}`; - - if (frontend == 'facil') redirect = redirect = `${randomInstance}/${mapCentre}/Mpnk` - - console.log("mlat", mlat) - console.log("mlon", mlon) + prefs.mlat = mlat.replace("!3d", ""); + prefs.mlon = mlon.replace("!4d", ""); // Get marker from ll param } else if (url.searchParams.has("ll")) { - const [mlat, mlon] = url.searchParams.get("ll").split(","); - redirect = `${randomInstance}/?mlat=${mlat}&mlon=${mlon}${mapCentre}${params}`; + console.log("ll life"); - console.log("mlat", mlat) - console.log("mlon", mlon) + const [mlat, mlon] = url.searchParams.get("ll").split(","); + prefs.mlat = mlat; + prefs.mlon = mlon; // Get marker from viewpoint param. } else if (url.searchParams.has("viewpoint")) { - const [mlat, mlon] = url.searchParams.get("viewpoint").split(","); - redirect = `${randomInstance}/?mlat=${mlat}&mlon=${mlon}${mapCentre}${params}`; + console.log("viewpoint life"); - console.log("mlat", mlat) - console.log("mlon", mlon) + const [mlat, mlon] = url.searchParams.get("viewpoint").split(","); + prefs.mlat = mlat; + prefs.mlon = mlon; // Use query as search if present. } else { - console.log("normal life") + console.log("normal life"); let query; if (url.searchParams.has("q")) query = url.searchParams.get("q"); else if (url.searchParams.has("query")) query = url.searchParams.get("query"); else if (url.pathname.match(placeRegex)) query = url.pathname.match(placeRegex)[1]; - if (frontend == 'osm') { - query = query ? "/search?query=" + query : ""; - mapCentre = mapCentre ?? '#'; - redirect = `${randomInstance}${query}${mapCentre}${params}`; + let prefsEncoded = new URLSearchParams(prefs).toString(); + if (query) { + if (frontend == 'osm') return `${randomInstance}/search?query="${query}${mapCentre}&${prefsEncoded}`; + if (frontend == 'facil') return `${randomInstance}/${mapCentre}/Mpnk/${query}` } - if (frontend == 'facil') { - query = query ? `/${query}` : ""; - mapCentre = mapCentre ?? '#1/0/0'; - redirect = `${randomInstance}/${mapCentre}/Mpnk${query}` - } - - console.log("query", query) } - return redirect; + + let prefsEncoded = new URLSearchParams(prefs).toString(); + console.log("prefs", prefs); + console.log("prefsEncoded", prefsEncoded) + if (frontend == 'osm') return `${randomInstance}/${mapCentre}&${prefsEncoded}` + if (frontend == 'facil') return `${randomInstance}/${mapCentre}/Mpnk` } async function init() { - return new Promise(resolve => { - browser.storage.local.get( - [ - "disableMaps", - "mapsFrontend" - ], - r => { - disable = r.disableMaps ?? false - frontend = r.mapsFrontend ?? 'osm' - resolve(); - } - ); - }); + return new Promise( + resolve => { + browser.storage.local.get( + [ + "disableMaps", + "mapsFrontend" + ], + r => { + disable = r.disableMaps ?? false + frontend = r.mapsFrontend ?? 'osm' + resolve(); + } + ); + }); } export default { diff --git a/src/assets/javascripts/helpers/maps.js.backup b/src/assets/javascripts/helpers/maps.js.backup new file mode 100644 index 0000000..81678c3 --- /dev/null +++ b/src/assets/javascripts/helpers/maps.js.backup @@ -0,0 +1,274 @@ +window.browser = window.browser || window.chrome; +import commonHelper from './common.js' + +const targets = /^https?:\/{2}(((www|maps)\.)?(google\.).*(\/maps)|maps\.(google\.).*)/; +let redirects = { + 'osm': { + "normal": [ + "https://openstreetmap.org" + ] + }, + 'facil': { + "normal": [ + "https://facilmap.org" + ] + } +}; +const mapCentreRegex = /@(-?\d[0-9.]*),(-?\d[0-9.]*),(\d{1,2})[.z]/; +const dataLatLngRegex = /(!3d|!4d)(-?[0-9]{1,10}.[0-9]{1,10})/g; +const placeRegex = /\/place\/(.*)\//; +const travelModes = { + driving: "fossgis_osrm_car", + walking: "fossgis_osrm_foot", + bicycling: "fossgis_osrm_bike", + transit: "fossgis_osrm_car", // not implemented on OSM, default to car. +}; +const osmLayers = { + none: "S", + transit: "T", + traffic: "S", // not implemented on OSM, default to standard. + bicycling: "C", +}; + +function addressToLatLng(address, callback) { + const xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = () => { + if (xmlhttp.readyState === XMLHttpRequest.DONE) { + if (xmlhttp.status === 200) { + const json = JSON.parse(xmlhttp.responseText)[0]; + if (json) callback( + `${json.lat},${json.lon}`, + `${json.boundingbox[2]},${json.boundingbox[1]},${json.boundingbox[3]},${json.boundingbox[0]}` + ); + } else + console.info("Error: Status is " + xmlhttp.status); + } + }; + xmlhttp.open( + "GET", + `https://nominatim.openstreetmap.org/search/${address}?format=json&limit=1`, + false + ); + xmlhttp.send(); +} + +let disable; +const getDisable = () => disable; +function setDisable(val) { + disable = val; + browser.storage.local.set({ disableMaps: disable }) + console.log("disableMaps: ", disable) +} + +let frontend; +const getFrontend = () => frontend; +function setFrontend(val) { + frontend = val; + browser.storage.local.set({ mapsFrontend: frontend }) + console.log("mapsFrontend: ", frontend) +}; + +function redirect(url, initiator) { + + if (disable) return; + if (initiator && initiator.host === "earth.google.com") return; + + if (!url.href.match(targets)) return; + + let redirect; + let randomInstance; + if (frontend == 'osm') randomInstance = commonHelper.getRandomInstance(redirects.osm.normal); + if (frontend == 'facil') randomInstance = commonHelper.getRandomInstance(redirects.facil.normal); + let mapCentre = ""; + let prefs = {}; + + // Set map centre if present + if (url.pathname.match(mapCentreRegex)) { + const [, lat, lon, zoom] = url.pathname.match(mapCentreRegex); + if (frontend == 'osm') { + prefs["#map"] = `${zoom}/${lat}/${lon}`; + mapCentre = `#map=${zoom}/${lat}/${lon}`; + console.log("prefs", prefs); + } + if (frontend == 'facil') mapCentre = `#${zoom}/${lat}/${lon}`; + + + console.log("lat", lat) // vertical + console.log("lon", lon) // horizontal + console.log("zoom", zoom) + + } else if (url.searchParams.has("center")) { + const [lat, lon] = url.searchParams.get("center").split(","); + const zoom = url.searchParams.get("zoom") ?? "17"; + if (frontend == 'osm') { + console.log("here"); + mapCentre = `#map=${zoom}/${lat}/${lon}`; + prefs["#map"] = `${zoom}/${lat}/${lon}`; + } + if (frontend == 'facil') mapCentre = `#${zoom}/${lat}/${lon}` + + console.log("lat", lat) + console.log("lon", lon) + console.log("zoom", zoom) + + console.log("prefs", prefs); + } + + // Set map layer + let params = ""; + if (url.searchParams.get("layer")) { + let layer = osmLayers[url.searchParams.get("layer")] + params = `&layers=${layer}`; + console.log("layer", layer); + } + + // Handle Google Maps Embed API + if (url.pathname.includes("/embed")) { + let query = ""; + if (url.searchParams.has("q")) query = url.searchParams.get("q"); + else if (url.searchParams.has("query")) query = url.searchParams.has("query"); + + else if (url.searchParams.has("pb")) + try { query = url.searchParams.get("pb").split(/!2s(.*?)!/)[1]; } + catch (error) { console.error(error); } // Unable to find map marker in URL. + + console.log("query", query); + + let prefs = {}; + addressToLatLng( + query, + (coords, boundingbox) => { + prefs.bbox = boundingbox; + prefs.marker = coords; + } + ); + prefs.layer = "mapnik"; + + let prefsEncoded = new URLSearchParams(prefs).toString(); + + if (frontend == 'osm') redirect = `${randomInstance}/export/embed.html?${prefsEncoded}`; + if (frontend == 'facil') redirect = redirect = `${randomInstance}/${mapCentre}/Mpnk`; + + // Handle Google Maps Directions + } else if (url.pathname.includes("/dir")) { + let prefs = {}; + + prefs.engine = travelModes[url.searchParams.get("travelmode")] ?? travelModes["driving"]; + + let origin; addressToLatLng(url.searchParams.get("origin"), a => origin = a); + let destination; addressToLatLng(url.searchParams.get("destination"), a => destination = a); + prefs.route = `${origin};${destination}`; + + let prefsEncoded = new URLSearchParams(prefs).toString(); + + if (frontend == 'osm') redirect = `${randomInstance}/directions?${prefsEncoded}`; + // ${mapCentre}${params} + + if (frontend == 'facil') { + mapCentre = mapCentre ?? '#1/0/0'; + redirect = redirect = `${randomInstance}/${mapCentre}/Mpnk` + } + + // Get marker from data attribute + } else if (url.pathname.includes("data=") && url.pathname.match(dataLatLngRegex)) { + console.log("data life"); + const [mlat, mlon] = url.pathname.match(dataLatLngRegex); + + let prefs = {}; + + prefs.mlat = mlat.replace("!3d", ""); + prefs.mlon = mlon.replace("!4d", ""); + + let prefsEncoded = new URLSearchParams(prefs).toString(); + + // Stil didn't finished nor tested this + if (frontend == 'osm') redirect = `${randomInstance}/?${prefsEncoded}${mapCentre}${params}`; + + if (frontend == 'facil') redirect = redirect = `${randomInstance}/${mapCentre}/Mpnk` + + console.log("prefs", prefs); + + // Get marker from ll param + } else if (url.searchParams.has("ll")) { + let prefs = {}; + + const [mlat, mlon] = url.searchParams.get("ll").split(","); + + prefs.mlat = mlat; + prefs.mlon = mlon; + + let prefsEncoded = new URLSearchParams(prefs).toString(); + + redirect = `${randomInstance}/?${prefsEncoded}${mapCentre}${params}`; + + console.log("prefs", prefs); + + // Get marker from viewpoint param. + } else if (url.searchParams.has("viewpoint")) { + console.log("viewpoint life"); + + const [mlat, mlon] = url.searchParams.get("viewpoint").split(","); + + let prefs = {}; + prefs.mlat = mlat; + prefs.mlon = mlon; + + let prefsEncoded = new URLSearchParams(prefs).toString(); + + redirect = `${randomInstance}/?${prefsEncoded}${mapCentre}${params}`; + + console.log("prefs", prefs); + + // Use query as search if present. + } else { + console.log("normal life") + + let query; + if (url.searchParams.has("q")) query = url.searchParams.get("q"); + else if (url.searchParams.has("query")) query = url.searchParams.get("query"); + else if (url.pathname.match(placeRegex)) query = url.pathname.match(placeRegex)[1]; + + if (frontend == 'osm') { + query = query ? `/search?query="${query}` : ""; + mapCentre = mapCentre ?? '#'; + redirect = `${randomInstance}${query}${mapCentre}${params}`; + } + if (frontend == 'facil') { + query = query ? `/${query}` : ""; + mapCentre = mapCentre ?? '#1/0/0'; + redirect = `${randomInstance}/${mapCentre}/Mpnk${query}` + } + + console.log("mapCentre", mapCentre) + console.log("query", query) + } + return redirect; +} + +async function init() { + return new Promise( + resolve => { + browser.storage.local.get( + [ + "disableMaps", + "mapsFrontend" + ], + r => { + disable = r.disableMaps ?? false + frontend = r.mapsFrontend ?? 'osm' + resolve(); + } + ); + }); +} + +export default { + getDisable, + setDisable, + + getFrontend, + setFrontend, + + redirect, + init, +}; diff --git a/src/pages/background/background.js b/src/pages/background/background.js index dda0e9a..d78ff20 100644 --- a/src/pages/background/background.js +++ b/src/pages/background/background.js @@ -107,6 +107,10 @@ browser.webRequest.onBeforeRequest.addListener( } else { console.info("Redirecting", url.href, "=>", newUrl); + // let wewe = new URL(newUrl); + // console.log("wewe", wewe.search); + // console.log("path", wewe.pathname); + // console.log("searchParams", wewe.searchParams); return { redirectUrl: newUrl }; } }