Improving maps code. Preparing for new Maps #70 #116

2022-03-20 23:10:22 +03:00 · 2022-03-20 23:10:22 +03:00 · 5d3b9b583c
commit 5d3b9b583c
parent f41c4a136b
3 changed files with 353 additions and 103 deletions
--- 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 {
--- a/src/assets/javascripts/helpers/maps.js.backup
+++ 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,
+};
--- 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 };
      }
    }