Improve our global map by better integration with the forum

The Fairphone forum uses the map below.

This is integrated with their forum and we can do the same thing of course. This can be done by creating the email aliases and connect them to our groups. Then we need to link our events plugin with this applet and then we have a better global map of our chapters and events. But also the ability to easily contact chapters.

Their software is #open-source, but time is limited on my side. I can have a look next year. But our movement would work best if we spread the load and delegate tasks, when possible and needed. It doesn’t seem to be a whole lot of work though. But it does require some dedication to do it right :nerd_face: It may be just changing the data sources and verify if they work. But this needs to be checked, and I don’t even have that time to spare at the moment.

Just a nudge to our @it-team, if anyone is looking for #activism:projects :wink:

I dived a bit in the code, it works pretty simple and the Fairphone community made it very readable and usable. I already got it working on my laptop with the Fairphone data sources

I want to host the map as localhost on the server and then make it available to the forum via the local Docker network for security reasons. I don’t want to run this code publicly, it’s not that actively maintained for that. This can be done soon. I just have to create the data sources and see if our event plugin is compatible. So far it doesn’t look like that and Fairphone uses a semi-official event plugin for that. I can live without events on the map for now and figure that out later.

After some more careful examination, I think the Fairphone setup is actually not that well integrated with the forum as it can be. It can be made much easier.

Fairphone at the moment uses this yaml formatted topic to populate the map. Where the location name is used to compile an email address for the group. The coordinates are manually inserted and they manually maintain a list of users. Furthermore, they use a boolean to switch a listing on or off or indicate if it’s active or not. This yaml file is then converted to json and then looped through it to compile the listing for the map as well.

We could simplify this. We could simply use the json layout of our groups. If a group is not active, it’s not listed. So when the parser loops through it, it drops from the map/list. We can show the amount of users, since the user_count is listed there. And if a group is listed on the forum, but has no members, then it should not be on the map with the email address. Because then no one will receive those emails.

The name of the group is e.g. chapter_netherlands, we could do a substring replacement for the _ with a - and that then becomes our email address. We could also filter based on the name, if it starts with chapter, process it. Then we can split the name, e.g. chapter_netherlands based on the _ and then use a public API to get some coordinates for netherlands and put the title of the group, e.g. “Chapter Netherlands” on the map with those coordinates.

The only “downside” is that we won’t have flags this way. Maybe there is a public API that can give us the correct emoji for a flag based on netherlands or amsterdam, like :netherlands:. But I’ll drop that feature. The map shows where it is, flags may be nice for a future iteration of this, if needed at all.


Edit, yes, I think I’ll create my own version of this which will be even simpler and easier to maintain than the Fairphone one.

Another edit: I’ll make a theme component out of this, for Discourse. That way I inherent the security maintenance from the Discourse devs and benefit from their security layers and libraries. But first a simple proof of concept will be made.


So since the plan changed, a new checklist of todo’s.

Get data source to extract all necessary data (chapter name, email address, members and if the chapter is considered active) (Discourse API Docs) - https://forum.tzm.community/g.json?filter=chapter
A way to query cities/countries and get coordinates in return to be used to draw a point on the map (https://nominatim.openstreetmap.org/search?q=amsterdam&format=json)
Or create plugin to add custom field for groups, to include coordinates
Loop through the data
Draw all the chapters on the map
Create all the mail aliases for the groups
Allow the domain where the javascript runs be allowed in the CORS security settings
Cherry pick some parts from the Fairphone map listing to show and sort chapters with member count, group URL and group email address
Create standalone proof of concept


Optionally:
Expand the proof of concept into a Discourse theme component (Developer’s guide to Discourse Themes - developers - Discourse Meta)

Small update in the form of a screenshot :tada: I haven’t worked with JavaScript in the past. But It starts to grow on me. Just a few more steps and I’ll be able to draw things on the map dynamically. I’ll also create a Discourse plugin to allow custom fields for groups, to override the coordinates, when needed. And then Fairphone may use this different approach as well of course. It’s easier to use existing data rather than manually maintain a separate list.