Exibitera should have a Mapping Application

[alexaverill]

There is a need for a generic mapping application in Exibitera. This comes out of a conversation over email that I wanted to capture as an issue to promote a wider discussion. The main goal would be to leverage leaflet js to use open street map layers, though this would also allow a variety of layers to be used.

I was working on an MVP mapping app that would do the following:

• Users can define a base layer
• Users can define a max zoom-level
• users can define a bounds rectangle locking the map to that region.
• Users can define a spreadsheet containing POI coordinates, a description, and image(s)
• On selection a drawer opens with a title, description,and image gallery

Example UI

Future Scope:

1. Attract Screen
2. Loading GeoJson layers to support additional data representation

@forceflow1049 I would be curious if you have any other thoughts on what would be valuable for an MVP and for future scope.

[David-S-Morgan]

Oooh, this would be quite useful! :+1:

[forceflow1049]

@alexaverill This is a great list to get us starting. In addition to your MVP items, it should:

1. Support multiple languages (there is a standard createLanguageSwitcher function in exhibitera_apps_common.js for building the UI)
2. Support text size adjustment

Those two items are part of Exhibitera's accessibility-by-default philosophy. I would maybe start by duplicating Timeline Explorer, as it supports spreadsheet input, multilingual, and adjustable text. Just swap the functions that build the timeline for ones that build the map.

[alexaverill]

@forceflow1049 those are good suggestions. My current plan is to setup an initial demo and share it here. I am also thinking through the best way to define the exhibit content in a generalize way. Initial testing with setting it up in a spreadsheet/csv. I am going to throw together a more WYSIWYG/guided experience that hopefully create a low barrier to entry. Also my current plan is to try to keep it as loosely coupled to the python backend to make it easier to host independently as a demo for people to play with.

[alexaverill]

Just wanted to share a minor update. I have the initial front-end setup. Its a fairly normal/basic map viewer for points with different base layers and the ability to lock the user to a defined region and zoom levels. A demo is up here at the moment: https://maps.averill.dev/

I am in the middle of working on a WYSIWYG editor that's coming along nicely. (The demo above was built in the editor).

[forceflow1049]

Great update, @alexaverill! It's coming along nicely. I'll have some more comments in a few days—I've been moving apartments this week!

[forceflow1049]

@alexaverill Finally had a chance to play around with this—it is really nice! In addition to a WYSIWYG option for adding points, we probably want to support spreadsheet entry as well. I can imagine situations, such as wanting to mark the locations of all national capitals, where it would be inefficient to have to input them one by one.

Do users have to supply their own API key in order to access the mapping API?

[alexaverill]

CSV Loading is definitely on the todo list. There are some considerations that I need to think through for the data outside of the mapping from Latitude and Longitude to content. Nothing too crazy just managing base layers and map bounds nicely.

So the user wouldn't need to supply any API keys at all, its all based on Leaflet.js which is free and open source. There are some base layer providers that require api keys or accounts, but a user doesn't really have to use those base layers.

I have this as a link in the editor, but here are a ton of the different base layer options: https://leaflet-extras.github.io/leaflet-providers/preview/ (Note there are closed source map layers in that preview, license details are here: https://github.com/leaflet-extras/leaflet-providers)

Another cool thing is as long as a user can find a map tile server that follows the standard it can be maps of anything. For example there are free to use Mars and Moon map tiles that can be dropped in and used. https://www.openplanetary.org/opm/basemaps I plan to put together a couple demos based on them after I get the rest finished

I expect to have the WYSIWYG editor ready for testing sometime this week

[alexaverill]

Here is an initial version of the WYSIWYG editor: https://maps.averill.dev/create.html

I'd love some feedback, especially any suggestions for better verbiage on the dialogs and instructions.

Things that are still in progress:

1. Multiple Language support, need to implement inputting and displaying
2. Bulk Point upload, I am planning to add the ability to upload a CSV during the point addition step, My thoughts are to generate a sample CSV based on the languages setup in the application for a user to fill out with their bulk points.

Love to hear some feedback @forceflow1049 and @David-S-Morgan

[forceflow1049]

@alexaverill This is really cool!

From the end-user app side, I think things are really in pretty good share. A couple of things to consider, in addition to your WiP points from above:

• We can't have any active links to outside the app (or people will escape). Currently there is a link to both Leaflet and the layer credit. I imagine we need to provide layer credit, but if it needs to be a link, then it should pop up as a QR code.
• There should be some kind of option for a header, like "Battlefields of World War I" or "Shipwreck Locations"
• Maybe a reset view button that takes you back to the initial view?

From a setup perspective, I want things to be consistent across the apps in Exhibitera. So, instead of having the setup steps overlay the map, we should clone one of the existing setup pages and modify it. Maybe we have the interactable map near the top, with your various setup steps below that. The righthand-column will still be a preview of the overall app that updates as changes get made (like after each step is complete). A few more specifics:

• We will need to offer the ability to change colors/fonts/etc in line with the other Exhibitera apps.
• There should be an option for an attractor screen (with a timeout to return to it).
• It would be cool if you could set a unique icon for the pins. Either as a bulk setting (i.e., change to a shipwreck icon uniformly) or on a per-item basis (i.e., different icons for earthquakes vs. tornadoes vs. landslides).
• It would be good to have a dropdown list of common basemap options to select from, in addition to the chance to supply your own link.
• The end result will need to be a definition file that conforms to the Exhibitera Apps format, because that is needed by Hub to handle switching between different apps, etc. The definition file can refer to a user-supplied CSV if we want (like in Media Browser).

I feel really positive about how the app is going to turn out! Given the amount of stuff on the setup end to do, I'm going to move this to the Exhibitera 6 milestone so it doesn't block other releases. If we get everything done sooner, we can always move it back up.

Thanks so much for all your work on this!