Add support for OpenStreetMap

[Jpxe]

Add OpenStreetMap (OSM) as a privacy alternative to Google Maps (and potentially other map services).

[Jpxe]

Here are some other projects with this function (haven't tested them yet):
https://framagit.org/tom79/nitterizeme
https://gitlab.com/MapSwitcher/mapswitcher
https://github.com/tankaru/OpenSwitchMaps

[SimonBrazell]

Hi @ToughGuyKunio that's an excellent idea, I'll look into it.

[SimonBrazell]

This is a bit harder than I first thought, I think redirecting URLs won't be too much of a problem, almost got this working, but embedded maps seem to be a problem, not sure how to do this as it appears they are most often not just done using an iframe but rather by the Google Maps API instead.

[SimonBrazell]

I found this repo which achieves the switch for iframe embedded maps, might be a place to start. But I think for initial support I'll just do the URL redirection instead.

[SimonBrazell]

@ToughGuyKunio I've pushed an update to a new branch entitled osm-redirect, did you want to build the extension from this new branch and test it out in your browser? It's still a work in progress but I'd appreciate some feedback if you are able to.

[SimonBrazell]

I pushed new Firefox build if you want to try that instead (v1.1.10) couldn't get the embedded redirects working so I disabled them for now.

[Jpxe]

Found this site to test a few different link types: https://stackoverflow.com/questions/1300838/how-to-convert-an-address-into-a-google-maps-link-not-map
The first ones work but these doesn't:

• - https://maps.google.com/?ll=38.882147,-76.99017
• - https://www.google.com/maps/search/?api=1&query=1200%20Pennsylvania%20Ave%20SE%2C%20Washington%2C%20District%20of%20Columbia%2C%2020003
• - https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003
• - https://www.google.ca/maps/place/1200+Pennsylvania+Ave+SE,+Washington,+DC+20003/

Edited: updated with ver. 1.1.12

[SimonBrazell]

Hmm still needs some work, not sure how many different iterations there are of the URL scheme, thanks for the feedback @ToughGuyKunio let me know if you find any others.

[SimonBrazell]

@ToughGuyKunio new version pushed to the AMO (v1.1.11) should work for these URLs now.

[SimonBrazell]

Do you happen to know where we could find a list of alternative OSM instances?

[Jpxe]

Yes most seems to work now, just found one that I missed before that doesn't seem to work:
https://www.google.com/maps/@LATITUDE,LONGITUDE,ZOOMNUMBERz?hl=LANGUAGE
like:

• https://www.google.com/maps/@48.8583701,2.2922926,17z?hl=en

Edited: updated with ver. 1.1.12

I'm not aware of any instances, I think it's run more like Wikipedia in that it doesn't really support instances.

Also, huge thanks for implementing this!

[Jpxe]

Also this link with spaces only seems to work sometimes for me:

• https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003

Edited: updated with ver. 1.1.12

[Jpxe]

Found this: https://developers.google.com/maps/documentation/urls/guide
Theres plenty of links there that doesn't work, here's a few:

• https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393 - works but is not similar, similar would be: https://www.openstreetmap.org/?mlat=47.5951518&mlon=-122.3316393&zoom=17
• https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling
• https://www.google.com/maps/dir/?api=1&origin=Google+Pyrmont+NSW&destination=QVB&destination_place_id=ChIJISz8NjyuEmsRFTQ9Iw7Ear8&travelmode=walking
• https://www.google.com/maps/@?api=1&map_action=map - current location
• https://www.google.com/maps/@?api=1&map_action=map&center=-33.712206,150.311941&zoom=12&basemap=terrain

Seems there's no end to URL variants :)

Edited: updated with ver. 1.1.12

[SimonBrazell]

Yeah it looks like I made a mistake with the last build, broke some that were working before, just fixing it up now.

[SimonBrazell]

Oh and some of those look to be directions links which I haven't handled at all yet.

[Jpxe]

This seems to be something like instances: https://wiki.openstreetmap.org/wiki/Tile_servers

[SimonBrazell]

@ToughGuyKunio I don't think the directions URLs are going to work, it seems OSM relies on latitude longitude values for origin and destination where as Google Maps can make use of queries / street addresses. Here is the URL that was generated by the plugin using one of the above directions links:

• https://www.openstreetmap.org/directions?engine=fossgis_osrm_foot&route=Google%20Pyrmont%20NSW%3BQVB

This is actually the same issue I'm facing with the embedded maps, OSM must have latitude longitude values for embedded maps also.

Not sure how we can get past this issue for both these use cases.

[SimonBrazell]

I think I'll need to do an address lookup from the plugin using OSM, if they have such an API, and use the results to populate the latitude longitude values. Not sure how accurate that would be even if it was possible though.

This is turning out to be a big job...

EDIT - There is an API which looks to do exactly what I want here.

[Jpxe]

Sadly I don't have any coding skills, otherwise I would help you out.

Minor possible improvement: In Google Maps zoom level seems to be indicated by either &z=17 or in the @ case LATITUDE,LONGITUDE,17z and in OSM I think it is &zoom=17. Adding zoom level could make the results a little closer.

Example:

• https://www.google.com/maps/@48.8583701,2.2922926,17z?hl=en -17z
• https://www.google.com/maps?ll=48.8583701,2.2922926&z=17 - &z=17
• https://www.openstreetmap.org/?mlat=48.8583701&mlon=2.2922926 - withouth zoom
• https://www.openstreetmap.org/?mlat=48.8583701&mlon=2.2922926&zoom=17 - with zoom

Edited: updated with ver. 1.1.13

I've added some checkboxes to keep track on what URLs currently work.

[SimonBrazell]

Thanks @ToughGuyKunio this all actually helps a lot, hopefully by the end we will have a fairly robust solution.

I grab the zoom level from the Google link if available, most of the time it appears to not be present though so perhaps I can add 17 as the default as you suggest.

Also on the API solution I mentioned above the extension will have to make a request to the OSM geocoding service to get the lat long of the address text, this could slow down the redirect considerably but I guess we'll wait and see how it goes when we do some testing.

Got to do some paying work now unfortunately but perhaps I can look into this further this afternoon.

Thanks again for your help!

[SimonBrazell]

@ToughGuyKunio released a new version (1.1.12) on AMO which includes support for directions and embeds, although the embeds may need some more work...

[Jpxe]

Nice! I've updated the checkboxes for all links.

The zoom level, when it's not present in URL, on Google Maps appears to be anywhere between 10-17, from some testing

[SimonBrazell]

https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393 - works but is not similar, similar would be: https://www.openstreetmap.org/?

Queries don't seem to display as a marker on OSM, just a map centred on that location.

https://www.google.com/maps/@?api=1&map_action=map - current location

I don't think there is an equivalent on OSM to load up a map at your current location, I know there is a button to the right that allows it but I don't think there is a way to do it via a URL.

The zoom level, when it's not present in URL, on Google Maps appears to be anywhere between 10-17, from some testing

Yeah I still need to look at the zoom stuff, try default it to something if it's not present.

[SimonBrazell]

New version should be live on AMO shortly with the default zoom (17) and a fix for the embedded maps, noticed that they weren't showing the bounds correctly.

[Jpxe]

I can't seem to get any embedded maps to load in Firefox, might be my configuration.
I get this warning on jsfiddle, the others are just blank:

Blocked by Content Security Policy
An error occurred during a connection to www.openstreetmap.org.
Firefox prevented this page from loading in this way because the page has a content security policy that disallows it.

Edit: just tested with a brand new Firefox installation, same problem, all iframe are blank.

Here's what I've tested:

• https://jsfiddle.net/puj41bgs/1/ - My own examples with three different maps, I'm not sure how to do the @Cordinates with embedding
• https://www.wpgmaps.com/demo/ - Several different maps
• https://developers.google.com/maps/documentation/javascript/examples - Several different maps
• https://elfsight.com/blog/2018/06/google-maps-not-working-website/#demo
• https://www.dubofflaw.com/contact/
• https://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/

[SimonBrazell]

Support for embedded maps only works with Google's Maps Embed API (using /embed) at the moment, and there is a caveat - URLs that use a place_id rather than a lat,lon or query value don't work as there is no way for me to translate this into an actual address without using a Google service.

Try one like this https://www.google.com/maps/embed/v1/place?q=Sydney+NSW+Australia&key=...

To get the JS API to work I'd need to perhaps bundle some of the Google JS assets in the extension to build the iframe and then do the switch after that, not sure how feasible this approach is though...

[SimonBrazell]

Edit: just tested with a brand new Firefox installation, same problem, all iframe are blank.

Yes the problem here is that OSM has set options in the header of their responses that don't allow their site to be loaded in an iframe, the only way to load their site in an iframe is by using their export/embed endpoint, which I'm only redirecting for if the Google URL includes /embed atm. I wonder what kind of embeds are typically used on sites around the web, had trouble actually finding a real site with a map embed to test 😀

Seems much more work is needed on this...

[Jpxe]

Your link worked fine!

Might not be worth all the effort, I don't think embedded Google Maps are that common. I too had trouble finding any 😄

I went back too https://developers.google.com/maps/documentation/urls/guide to check regular URL redirects. Most work now. Here's a couple of ideas:

Street view redirect:

https://developers.google.com/maps/documentation/urls/guide#street-view-examples
https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=48.857832,2.295226&heading=-45&pitch=38&fov=80
https://www.google.com/maps/@?api=1&map_action=pano&pano=tu510ie_z4ptBZYo2BGEJg&viewpoint=48.857832,2.295226&heading=-45&pitch=38&fov=80
Could probably just redirect %viewpoint= to coordinates on OSM

Layers redirect:

https://developers.google.com/maps/documentation/urls/guide#map-examples_1
https://www.google.com/maps/@?api=1&map_action=map&center=37.7992940,-122.3976113&zoom=15&basemap=satellite&layer=transit
here &layer=transit could redirect to &layers=T in OSM:
https://www.openstreetmap.org/#map=15/37.7993/-122.3976&layers=T
there's also C for Cycle and H for Humanitarian, I'm not sure what they are called in Gmaps.

[SimonBrazell]

Thanks @ToughGuyKunio I'll look into Street view and layers too.

[SimonBrazell]

@ToughGuyKunio new build released on AMO, includes support for layers, and that viewport workaround you suggested.

[Jpxe]

Every redirect I've tried now works and I've got no more suggestions.
You can close the issue if you want. Thanks a lot!

[SimonBrazell]

Awesome! Was actually pretty interesting to work on this one, I really like OSM now that I've learned a little more about it, certainly going to try use it in some other projects going forward.

Thanks heaps for the suggestion and help here, all your input was very helpful.