Map configurations and application architecture

[SvenLieber]

Hi all,
@HeikkiR

thanks for this great tool! We are currently setting up a SAMPO instance for the BELTRANS project.
Our current draft is build based on the main SAMPO-UI, but we will use the updated SAMPO-UI of Ghent-CDH for production (our own ICT department requires software with updated dependencies for security reasons).

While configuring a map I ran into two concrete issues (described below). Yet these issues cover a larger aspect that I thought was worth mentioning for the broader discussion: where should components like facet_results/LeaflsetMap.js or client/library_configs/Leaflet/LeafletConfig.js live?

Issues

1. No tiles where shown
2. Popup was not rendered when clicking on a marker

Regarding the first issue, I didn't have a mapbox API key, so I quickly hardcoded a solution using the free openstreetmaps tiles e46e493

The second issue took a bit longer to debug. In our use case we have book translations and a linked place of publication. Some books have several places of publication, for example if several publishers were involved. I updated the code to render the popup at the clicked marker (not at a per ID marker as this is not unique and probably caused trying to render a popup at another marker not yet visible). 0bdc567

Implications

I'm not a react expert, I just tried to debug and getting it to run somehow. But I'm wondering how solutions could be included in a sustainable way.

Map tiles

One could think of a more configurable interface, either something towards a JSON config like from Ghent-CDH or some sort of a hardcoded fallback that takes openstreetmaps tiles in case no mapbox API key is provided.

I'm happy to take any solution that avoids that we have to add other dependencies like external APIs. I'm willing to contribute some code, but I'm wondering to which repo.

Client configurations

Due to our data I had to adapt the code. But even for other customization cases, like adding my own popup rendering, I would have to touch the application code. Would it be possible to move this kind of configuration to the config directory? As mentioned I'm not a React or UI expert, is what I describe what you are currently doing with the custom components? #69

[Ceetto]

I do think what you are describing could be solved with the custom components.

You mentioned you built your current draft based on the main SAMPO-UI and plan to move to the GhentCDH version for production. However the GhentCDH version made quite a bit of structural changes on top of just dependency updates, so it might be better to directly develop with that version. We are also currently working on getting our fork merged into the main SAMPO-UI.

The system for custom components is already fully implemented in the GhentCDH version with some examples. You could write your own map component with your own popup rendering etc. For a real example you could look at this custom component in a current sampo project of ours: https://github.com/GhentCDH/NuMAD/tree/main/custom_components/components/MigrationsMapWithRoads.
This component is based on the default sampo Deck component except I removed the parts we don't need and added an extra layer to display some roads. By mounting your custom component like this you essentially have complete freedom to change your component however you want without touching the core sampo code. You don't even have to build the core sampo as you could use pre-built images and only mount your config and built custom components.

Hope this helps.

[HeikkiR]

Hi @SvenLieber!

We are now working on creating a version of Sampo-UI that would merge the updates made by GhentCDH as part of the main Sampo-UI repository. Like @Ceetto mentioned, this includes some changes to the architecture of Sampo-UI in addition to the dependency updates. This means that moving to the GhentCDH version of Sampo-UI will require some adapting. On the other hand, the new structure is designed to be easier to maintain and to contribute than the current one.

We have tested adopting the Ghent updates in at least one of our legacy Sampo-systems, and I believe that did not require too much work. I think we will create instructions for updating the legacy Sampo-UI systems, but one option is also to just start again with the GhentCDH version. It should be easy to just import your existing Sampo-UI config files and queries there.

Regarding the map requiring an API key, I think we will add a default option for using the openstreetmaps without API key, similar to what you have implemented. I think @annasahola also already experimented with adding some options to configure the pop-ups, but we might add those updates to the Sampo-UI repo only after we have merged the GhentCDH changes. I will comment here once we have done that. :)