What do we want from the map?

[theodore-s-beers]

I'm going to tag pretty much everyone here: @Jomula, @XeniaMonika, @MarwAhmed.

I've been trying to figure out what to do with the map component, as I work through the reimplementation of our site. Having tried a few approaches, this is what I've come up with:

https://ctg-redux.pages.dev/map

As you can see, this puts one pin on the map for each city to which at least one project is connected. If you click on a pin, it shows the list of projects for that place. Each project name also functions as a link to our JSON data.

Does this make sense? Do you find it usable and useful? If you think that we should be aiming for something different, please chime in with your suggestions (when you find time, yaʿnī). Thanks in advance!

[Jomula]

Thanks Theo, this looks good!

Some comments besides me only seeing the shadows but no actual pin icons: Your approach does not show the weight of the locations in terms of how many projects are located there. That was at least what I aimed for in the old map. No need to stick to that, but I think it might be nice to see, which locations are rich in projects. (EDIT: You could use circles instead of pins and show the weight of the location by increasing the radius of the circle)

One additional idea would be to implement connections not only for projects with multiple locations (this would also be something to think about how to implement that, when you only have pins for locations, not for projects) but also for the relations between them. Maybe a different colorcode could help here.

So, features that I would probably try to implement in the map:

• Pins per project and zoomable weighting similar to the old map
• Connections for projects that are located on multiple locations (color 1)
• Connections for project relations (color 2 and maybe a small label next to the stroke to determine the relationship type)

[theodore-s-beers]

only seeing the shadows but no actual pin icons

Could you check the browser console to see if it's 404ing or something? I had to self-host the pin images (one of several issues with using Leaflet through a component framework). But the pins are showing up for me, in different browsers (Chrome, Firefox, Safari) and on different devices (laptop, smartphone).

Your suggestions are good. e.g., some kind of pin weighting should clearly be used. I'll focus on that for the next round of improvement. One step at a time…

[Jomula]

I get no error in the shell, but when I add the local path to the icons to the url, I get a 404. But that could be also a problem with the routing.

[theodore-s-beers]

That's very interesting. It should be loading the pin image from the following URL:

https://ctg-redux.pages.dev/leaflet/marker-icon-2x.png

edit: Anyway, I'll keep testing this.

[Jomula]

There is the problem, it actually loads: leaflet/marker-icon.png

<img src="leaflet/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(760px, 240px, 0px); z-index: 240;" alt="Marker" tabindex="0" role="button">

[theodore-s-beers]

Ah, ok. Maybe Leaflet chooses marker-icon vs. marker-icon-2x based on screen DPI or something. I can add the non-2x icon file to the self-hosted directory.

[theodore-s-beers]

That should (hopefully) be fixed now. Thanks for the report.

@Jomula, I have one more question to guide my next steps: How do you feel about the UI of the "marker clusters"? What I like is that it gives us, e.g., a pin for Berlin that shows the count of ~33 projects. It also adjusts the pin grouping based on zoom level, which is probably a good thing. But then if we click on the pin for Berlin, it pops out into a cloud of smaller pins, which are unlabeled and difficult to deal with. This is where the clustering approach starts to feel like a negative. But maybe the UI can be improved?

[Jomula]

Great, it works now!

I think clusters are a good solution for our problem, although the UI might not be ideal and especially the strokes from the location to the project marker look kind of ugly tbh. I don't know how much it can be improved on the app side (https://stackoverflow.com/questions/24258914/leaflet-clustermarker-with-custom-icon ?), but I guess some improvements should be possible with CSS. I think I'd stick with the marker cluster as for its easy usability and simple display of important information, even if I wouldn't be completely satisfied with the UI. But I feel that is the nature of map components, if you don't want to go the way of complex d3 visualizations.

[theodore-s-beers]

I'm still exploring different ideas for this, before settling back on marker clusters. The latest iteration uses an SVG pin icon, with the number of projects for each pin shown in the middle. Here's the link again, for the convenience of anyone who might like to offer feedback:

https://ctg-redux.pages.dev/map