diff --git a/src/background.js b/src/background.js index 59edaab..3c14863 100644 --- a/src/background.js +++ b/src/background.js @@ -9,6 +9,7 @@ const patterns = [ const gLocales = ['com', 'de'].join('|'); // TODO: collect more locales const matcher = new RegExp( + // TODO: fix regex to fit more patterns `^(https?:\/\/)?(maps\.google\.(${gLocales})\/maps\?.*output=embed|(www\.)?google\.(${gLocales})\/maps\/embed\?)` ); diff --git a/src/manifest.json b/src/manifest.json index ccd18ea..e664063 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -11,10 +11,10 @@ "permissions": [ "webRequest", "webRequestBlocking", - "http://*/maps/embed?*", - "https://*/maps/embed?*", - "http://*/maps?*output=embed*", - "https://*/maps?*output=embed*" + "http://*/maps/embed*?*", + "https://*/maps/embed*?*", + "http://*/maps*?*output=embed*", + "https://*/maps*?*output=embed*" ], "background": { "scripts": ["background.js"] diff --git a/src/map/map.js b/src/map/map.js index a8785a8..10502fc 100644 --- a/src/map/map.js +++ b/src/map/map.js @@ -4,21 +4,99 @@ const gPos = 'pb'; const gQuery = 'q'; const params = new URLSearchParams(document.location.search); +const mapArea = { + lat: 0, + lng: 0, + zoom: 17 // as default, because leaflet and gmaps work somehow differently +}; + +let markers = []; + if (params.has(gPos)) { - + parsePB(params.get(gPos)); } else if (params.has(gQuery)) { - + } else { } -console.log(params); +const map = L.map('map').setView([mapArea.lat, mapArea.lng], mapArea.zoom); -const map = L.map('map').setView([51.505, -0.09], 13); -let marker = L.marker([51.5, -0.09]).addTo(map); -marker.bindPopup('Position').openPopup(); +markers.forEach((val) => { + let marker = L.marker(val).addTo(map); + marker.bindPopup('Position').openPopup(); +}); L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap', }).addTo(map); + +// --- + +function parsePB(param) { + // https://andrewwhitby.com/2014/09/09/google-maps-new-embed-format/ + // https://blog.themillhousegroup.com/2016/08/deep-diving-into-google-pb-embedded-map.html + // https://stackoverflow.com/a/47042514 + + let data = param.split('!'); + data = data.filter((val) => val.match(/^\d+(z|d|s).{3,}/)); + + data.forEach((val) => { // finds approximate `lat lng zoom` of map + if (val.match(/^\d+d/)) { + let [i, floatVal] = val.split('d'); + i = parseInt(i); + floatVal = parseFloat(floatVal); + + switch (i) { + /** + case 1: + pos.zoom = floatVal; // somehow the zoom, but not correct for leaflet + /**/ + case 2: + mapArea.lng = floatVal; + case 3: + mapArea.lat = floatVal; + }; + } + else if (val.match(/^\d+z/)) { // decode `base64` to `degrees minutes seconds direction` to `lat lng` + let marker = atob(val.substring(2)); + marker.replace(/[^\d\s\-\.\'\"\°SNWE]/g, ''); + + markers.push(parseDMS(marker)); + } + else if (val.match(/^\d+s/)) { + val = val.substring(2); + + if (val.match(/^0x[\da-f]+:0x[\da-f]+$/i)) { + // two hex parts corresponding to ID of map object? -> FTID???? + console.log(val); + } + else { + console.log(val); + } + } + else { + console.log(val); + } + }); +} + +// --- + +function parseDMS(input) { + let parts = input.split(/[^\d\w\.]+/); + let lat = convertDMSToDD(parts[0], parts[1], parts[2], parts[3]); + let lng = convertDMSToDD(parts[4], parts[5], parts[6], parts[7]); + + return [lat, lng]; +} + +function convertDMSToDD(degrees, minutes, seconds, direction) { + let dd = Number(degrees) + Number(minutes) / 60 + Number(seconds) / (60 * 60); + + if (direction == "S" || direction == "W") { + dd = dd * -1; + } // Don't do anything for N or E + return dd; +} \ No newline at end of file