Concrete Quest: Mobilizon with (better) Openstreetmap integration

Hey all,
I want to make it short: we are a student initiative from a small city trying to generate some momentum for change locally. We need some central instance to get people together. So, we thought about gathering all events in our city trough undergraduate students earning credit points (yep, we have earned the status to award these). Printing stickers and doing all the cool Guerllia Marketing stuff. Mobilizon would actually fit our needs. But we had a fancy idea (not necessary actually but people need the surplus cherry): an event map!
Think of something like this:

Events shall fade up and down when scrolling through the timeline. The bar at the bottom can be dragged up to choose filters. Ofc this should be like an aditional page on a normal mobilizon domain. Good mobile view on a domain would be sufficient.

Long story short, we are no techies at all but I wanted to check if 1. anyone here can estimate the effort to realize something like that 2. if anyone has drive to just do that with us 3. if anyone knows anyone who would like to do this with us!

Best,
Sirius

1 Like

The screenshots should show that Mobilizon roughly has your features:


So cool. The UI kinda sucks. When I tried it on a mobile device, I couldn’t open the map.

So you will want somebody with UI experience. An inspection of the code, shows from package.json:

    "@vue-leaflet/vue-leaflet": "^0.10.1",

This means you want somebody with experience with the vuejs framework (https://vuejs.org/) and in particular leaflet (https://leafletjs.com/).

I think that you are already on a good path to minimize the work. Providing a screenshot and description, of what you require is extremely helpful. I cannot really estimate the amount of work involved. Some things are probably simple:

  • Make a cooler event selector
  • Add some info to the flags shown on the map

Some things are probably hard, e.g. make UI more snappy.

I’m not a frontend person. You should ask the framasoft people in their matrix room: Element/Matrix: https://matrix.to/#/#Mobilizon:matrix.org

1 Like

Another option is https://gancio.org/ whose ui seems snappier. However, there are currently no maps (you would have to add this, talk to the maintainer … if the data is available easily, adding a map is just copy&paste from leaflet).

Also a bit of self promotion, by using https://pasture.funfedi.dev/, you can easily get access to test instances of mobilizon and gancio (running locally on docker). So perfect for playing around.

1 Like

Nice idea and I like the initiative to look into existing Fedi. One dime I would like to contribute to the thread is looking at the interface and its experience as connected contextually to the culture. To be more specific, the filters (in your sketch, time and day sliders) of the map should fit the actual and expected frequency of events in the local area. Generic filters like in Mobilizon as shown by Helge are great for filtering online and/or big scale events, but for localities they are too much and need more effort on the person’s part to display what usually isn’t a ton of events. (Or maybe there are a lot of events, if it is a big city, but again it depends on the context.) Additional link for interface inspiration: https://foss.events/

Another idea I like about displaying local stuff I have seen implemented is a “search in this area” mode/button. Its current Google Maps implementation is by tapping on it, it limits the displayed marked locations to whatever area is shown on the screen (people are able to zoom in/out to mark the area they want to look up) and outputting an accompanying list for readability. On desktop, the design could make use of the mouse by allowing people to quickly select the area by creating a square(/whatever boundary) on top of the map.

As for 2 and 3, let’s talk about it in the SX design chat :smiley:

Thanks a lot to you both. I checked the links you pasted and am curious how it is best to proceed, as I cannot tell you on the “how” but only the “what” in case of the UI that I imagine.
A few keypoints I drew out of the examples you showed:

  • What I called timeslider is some sort of feature I think no UI offers so far (atleast opensource)?
    so creating this would be maybe of general interest. If I look at the Foss.events page I see a map and then an “upcoming events” section where I have to scroll down (so I lose the map). For the purpose of this page it totally fits the need. But imagine the usecase of what I was proposing: People looking for “what is going on the weekend” (that is normally 2-3 days in advance or even more sponatnous). For this case the timeslider would be nice. Also, you have more the impression of “exploration” in case you have no idea what to do than just scrolling some list + you see events going on nearby to your location.

  • what I meant with “filter” was supposed to indicate the type of event, i.e. political, music, art, DIY whatever (in the picture what you just see indicated with local/global, these were filters I imagined in another context). What exact filters you would choose for categorization needs to be discussed and maybe is a perfect usecase for intersection of work with non-techies. Technically, timeslider and this sort of filters is the same, but we have just different apperances in the UI, correct?

@d3v0 you mentioned gancio UI as snappier. Dont know what exactly you mean by “snappier”, but the UI of mobilizon seems more attractive for my casual taste :smiley:
I cannot tell about the other features of gancio, though posting events anonymously seems interstesting at first sight, all use cases I can imagine of this are dealt with in private chats anyways, so I think this would be no big deal.

-Furthermore I saw Mobilizon implementing a feature for a calendar: Mobilizon Ouvre-Boites : Actus et Événements - Mobilizon
That would be a nice option to have next to the map.

  • As for your concern with the amount of events. The goal is to have all events as I said. Seems idealistic, but I know someone always talking about dreamwalking :wink: If you have the timeslide and another filter active at every moment I dont think it will be to much displayed at a time.

An addtional feature would be something like an “interested” (not to say like!) button, from which you could generate a filter that reflects the general interst for most people (that could work as default filter in case you have to reduce the events displayed but do not want to bias by lets say “music” category). I just saw Mobilizon has the feature of “particpating” but thats to rigid imo. People were not using that in my facebook era and just hit “maybe” anyways. Technically, it is probably kind of the same.

Finally, as we have an upcoming event in about 2 weeks where I would like to announce the idea to a broader audience, it would be nice to know on which basis it would be intelligent to start. So we could actually start gathering events. The map extension could come at a later stage, ideally just adding to the software/service/platform (no idea whats the correct wording here) that will be in use then already.

Just adding a FYI … I know the creator Alex of MapCarta, we became friends via humane tech community, who integrated all kinds of open data sets with his application.

1 Like

Great, what I like about this really, is the minimalistic design of the card itself. When opening openstreetmaps the looks are quiet fuzzy imo because you have too much details. Here details come up more accurately when zooming in, like used from Google maps. I would prefer this sort of map-design to for ex the built in map-feature of mobilizon (see the screenshot from @helge above). Anyways, my next step will be a naive approach to framasoft people from mobilizon. As you better speak the language, would you say my intro in the thread (with the screenshot) is self-explaining or have ideas to explain it better?

1 Like

I am not sure right now, but at the time OpenStreetMap alone was not good enough, and MapBox was used as well.

With regards to approaching mobilizon, yes, the starting post is perfectly fine. You might add a bit of text giving more clarity on how Paranova team might contribute in a collaborative arrangement, as that is what a lot of FOSS projects are very keen for. Many FOSS projects are e.g. looking for User Experience designers (yet have difficulty collaborating given how most FOSS dev processes are arranged).

The map choice in Mobilizon should be a config variable, but I can’t find it. If you want a concrete doing for Mobilizon suggest that. Leafletjs.com seems to be down, but I got the description from the repo:

So if mobilizon makes this a variable, you should be able to use say mapbox with mobilizon, satisfying one of your desires.

Note: Geocoders are already a config variable: Geocoders - Mobilizon

1 Like

FYI: OpenStreetMap Calendar found via this HN submission. Open source, Apache 2.0 license.

I’m aware of wo ist markt? regarding periodic markets. They’re using Leaflet.js.

Browse tile providers to better name what you are looking for. OSM is rich on details.

1 Like

Thank you very much for your hints. As soon as I find someone who can account for the actual programming stuff and feels to particiapte this will be very helpful.