Do you know an open source alternative to embedded maps?

Discuss The Forum
1

[03.03.2017] Update: It’s finally here! :smiley:

[10.08.2016] Update: The map is on Github!!! I invite you to contribute here: GitHub - WeAreFairphone/fprsmap: This is a Leaflet map of the local Fairphoners communities :slight_smile:

[27.05.2016] Update: I started writing a map with leaflet.js, but need help with open sourcing / hosting it. Please give your advice here.

[26.10.2015] Update: Zeemaps.com offers all the requested features, but is commercial and closed source. ATM I’m trying to get iframe whitelisting from Fairphone’s forum admins.

Hi!

Here is what I would like to do: I want to create a map, where I insert the FP communities around the world (or the contact person per country, etc…).

It should then look like this (Google Maps embedded in a Discourse topic), but with the data from here (FP communities address book ).

###features the map should have

  • :white_check_mark: Iframe support to embed it on Discourse
  • :white_check_mark: Add multiple pins for different local FP communities and
  • :white_check_mark: Support to modify the app after publishing it (actually I think it would be best, if everyone could add pins, but I would need to verify them → to keep it tidy).

Does someone know an alternative to Google Maps, preferably conforming with FP’s ideology?

Thanks already for your answers! :smile:
Cheers, Stefan

2

testing…

.olControlAttribution { bottom: 3px!important; }

Generated by KartenGenerator

EDIT: no http://www.karten-generator.com/osmkarten.html doesn’t seem to work with fairphone forum…

1 Like
3

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.

4

OSM Test


NOPE! :frowning:

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

3 Likes
6

how did you try it? URL? HTML code?

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

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

9

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
10

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.

12

Google Maps Url does work…

OSM doesn’t…

13

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

https://www.zeemaps.com/Fairphoners

2 Likes
14

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

15

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
16

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.

17

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

18

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:

20

I updated the map, entering Stuttgart:

21

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
22

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
23

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