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 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://tzm.one/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 (Beginner's guide to developing Discourse Themes - theme 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.

Created a custom plugin for Discourse (the forum) to add more options for group admins. This includes coordinates and an option to publish the email address on the map as well. This information will be available via the public Discourse API and will then be used to draw the chapters on the map.

And it works! :tada: I will cleanup some code and finish the final bits and pieces, but then the new map can go online for public testing. If all goes smooth, we should have an improved map within a week or so.


To finalize the map:
Brand the map for TZM (replace Fairphone icons/text)
Create a JavaScript substring for the chapter description to filter out/fix the relative links in the hashtags (e.g. nl)
Don’t draw circles for chapters, create a bigger marker which is easier to see
Contact the Fairphone devs and ask them how and if they want credits for their work we’re using on our map
Harden the webserver/code which will host the map
Create logic to only show the chapter map toggle in groups which includes the name “chapter”

Once the above is finished, I’ll have a look at the map + chapter listing with automatic metadata about the chapters.


Changed the markers, much better visible now.

1 Like

The chapter map listing is now also done! There is still some hardening needed and minor tweaks. But it’s already pretty mature :tada:

1 Like

I consider this project closed. I will improve it over time with webpack, better caching, npm package management and merge everything into one page (it now loads the map as a separate page into the chapters overview).

In case people want to help/contribute:

Bug found, will fix it in time, but can’t prioritize. In a nutshell, the JSON call only shows 35 results, we now have more than 35 chapters on the forum. So not all chapters are shown. I’ll need to make the retrieval a bit smarter. For now it will simply not collect all chapters. There is no quick fix. I need to make something in JavaScript or Python that retrieves the next page of results of the total amount of entries have not been collected yet.

Update: Bug is solved! :tada:

Also removed the flags, people probably have strong opinions about that.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.