Do you know an open source alternative to embedded maps?

But there I cannot add multiple pins, but only one address. Also I couldn’t modify the map afterwards, could I?

I will edit my post to improve understanding of what I actually mean.

EDIT: I think scripts like from this page are not supported on Discourse.

OSM Test


NOPE! :frowning:

Edit2: it seems there is a plugin for OpenStreetMap discussed here

3 Likes

how did you try it? URL? HTML code?

So it's seem I did the same unsuccessful test (iframe)...

Yes, I tried by adding an IFrame in my message but as you can see nothing appears :frowning:

I do not have time to really look into it right now, especially since I am setting up my own website step by step, learning html on the way and I certainly never tried to embed anything in it until now.
However, I was wondering if you considered using uMap? The 2nd and 3rd feature should be ok and I think it is also conform with FP’s ideology being based on OSM, for the first one I can’t tell you but the following is stated on the above mentioned website:

An instance of it lets you create a map with OpenStreetMap layers in a minute and embed them in your site.

1 Like

Test:

Edit: It seems that the Discourse instance of the Fairphone Forum doesn’t support iframes. According to this page, “iframe code is whitelisted in Discourse itself since v1.1.1.”, and our version is beyond that.

Google Maps Url does work…

OSM doesn’t…

Not exactly Open Source, but exactly, what I am imagining:

https://www.zeemaps.com/Fairphoners

2 Likes

A pity, but then of course it won’t work with uMap…

I’m not sure it exactly fulfills your expectations but you should have a look at leafletjs : http://leafletjs.com/

You would have to host it, but it’s simple html/css + js and is lightweight, and easily updatable. I think it’s nothing that can’t be done on github.io for example.

1 Like

Yeah the hosting is the problem… I’ve stumbled upon LeafletJS, but you would need to install it on the Fairphone server, which Fairphone won’t do, for just this one desire.

Hmm that’s a pity… I guess you’re stuck except if the fairphone forum admin whitelists one of these websites for iframes then.

Yeah, well it’s not my top priority at the moment to talk to them about this idea. For now I’m satisfied by the screenshot above… :wink:

I updated the map, entering Stuttgart:

I’ve played around with LeafletJS a bit, and this is the interim result:

Next milestone would be Popups with links to the respective Local Fairphoners Address Book entry.

I’d like to open source the code, but I’m a total noob to pages like github. Could someone please point out the “way to do this” and talk me through it?

4 Likes

Hey, @Stefan, I can lend a hand with JavaScript, Git(Hub) and GitHub Pages if you still need help. I have wide experience with them all.
Contributions can be done with pull requests, editing a flat file with addresses (i.e. JSON file) in the GitHub web interface (avoiding git manipulation at all, and enabling a review process at the same time)

2 Likes

I uploaded the Leaflet map to Github now. Thank you to @Roboe for kickstarting the Github adventure and helping me with the first steps! :slight_smile:

You can find the repository here: https://github.com/WeAreFairphone/fprsmap

I warmly invite you to contribute! :slight_smile:

PS.: In order to keep everything connected to the forum, I’d say that people can only add their Fairphoners community to the map after adding it to the Local Fairphoners Address Book, providing a link to that address book entry.

4 Likes

Wow, almost two years after I started this topic, we are as close as ever to embed the Fairphone Community Map here on the forum! We are only awaiting a response from the responsible developer, who can look into activating a Discourse plugin.

Up until then you can see a preview locally in your browser!

  1. Enter the browser’s console. (In Firefox press F12, in Chrome follow these instructions).
  2. Paste this code into the command line: var whiteListIframe = require('pretty-text/sanitizer').whiteListIframe; whiteListIframe(/^(https?:)?\/\/wearefairphone\.github\.io\/fprsmap/i);. Hit . (Reference)
  3. Paste the embed code into a new forum post and observe the map in the preview window! :smiley: (Fullscreen doesn’t work there… :frowning: )


(Source)

1 Like

Continue here: