[FEATURE] building storymaps from saved maps #3515
Replies: 2 comments 3 replies
-
|
Figma mock up designed by @balagurova is here |
Beta Was this translation helpful? Give feedback.
-
|
Storymaps can be very effective communication tools if done correctly. At the same time, the fact there is no UI to build them is a proof how difficult working with storymaps can be. Currently building a storymap is a matter of coding and in general it entails using one or more maplibre/mapbox public styles/maps and custom geospatial layers. In Geohub maps are first class citizens (addresable json documents) and the user could potentially take two very different paths when building a storymapn uising UI.
There two approaches wil generate completely different user experience and probably result in different applications. |
Beta Was this translation helpful? Give feedback.
-
|
My proposed design is for your first option. |
Beta Was this translation helpful? Give feedback.
-
|
I think it's better to avoid building full map creation into the story map (Option 1). It might be too complicated and could overwhelm users, and it's technically much more difficult. An analogy (maybe not perfect but still) is how PowerPoint doesn't offer complex image editing, so users need to edit/create photos before they want to create a presentation. That said, I think it is important to keep the function so users can select maps from public and private ones and create simple map views without any data. |
Beta Was this translation helpful? Give feedback.
-
|
@JinIgarashi and @balagurova we can agree going with option one where we separate the building of a map and using it inside the storymap builder. I listed the advantages and disadvantages and we need to consider them along the road, that is, if any requests/features will go against them they will no be implemented. |
Beta Was this translation helpful? Give feedback.
-
Feature Description
Combining one or more saved maps to generate a story map needs to be implemented in GeoHub.
The below screenshot is current implementation of @undp-data/svelte-maplibre-storymap package.
A story map consists of following:
Each chapter has information of:
User can scroll chapters and interact with maps and contents.
Basic operational flow
Basic flow of creating a story can be shown as the below figure.
flowchart TD A[New story] -->|Click New Story button| B(Select a template) B -->C{Select a map} C -->|Option 1| D[Select a base map theme] C -->|Option 2| E[Select an existing map] D -->F(a blank story is created) E -->F F -->G(Edit header) G -->H(Edit footer) H -->I(Add a chapter) I -->J{Needs a different map} J -->|Yes| K{Select a map} K -->|Option 1| L[Select a base map] K -->|Option 2| M[Select an existing map] J -->|No| N(Edit content) L -->N M -->N N -->O{need to change layer opacity?} O -->|Yes|P[Edit layer opacity for onChapterEnter] O -->|No|R P -->Q(Edit layer opacity for onChapterExit) Q -->R{Add another chapter?} R -->|Yes|I R -->|No|S(End)Feature Implementation
Final output of storymap is quite straightforward, however the frontend and backend services to configure storymap is complicated.
Like dataset and map, storymap also needs
FavouriteandPermissionfeatures. In addition, the following basic features need to be implemented.Implementing the below functionalities, the following endpoints and tables are required.
Endpoint design
/api/storymapsendpoints/api/storymaps/{id}endpoints/api/storymaps/{id}/permission/api/storymaps/{id}/star/api/storymaps/{id}/star/countFrontend
/storymaps/{id})/storymaps)/storymaps/{id}/edithttps://www.figma.com/design/yYnglAN83X9QWpSzBKSY56/GeoHub?node-id=180-2027&t=LpKGFzw4DNo0yZOC-0
Table design
see the options of storymaps here. https://github.com/digidem/maplibre-storymap
erDiagram storymap { uuid id PK string title bytea logo string subtitle string byline string footer integer access_level string template_id integer style_id FK string base_style_id timestamp createdat string created_user timestamp updatedat string updated_user } storymap_chapter { uuid id PK string title string description bytea image string image_alignment string alignment boolean mapInteractive string mapNavigationPosition string mapAnimation boolean rotateAnimation boolean spinGlobe boolean hidden geometry center integer zoom double bearing double pitch integer style_id FK string base_style_id jsonb on_chapter_enter jsonb on_chapter_exit timestamp createdat string created_user timestamp updatedat string updated_user } storymap_chapters { uuid storymap_id PK, FK uuid chapter_id PK, FK integer sequence PK } storymap_favourite { uuid storymap_id PK, FK string user_email PK timestamp savedat } storymap_permission { uuid storymap_id PK, FK string user_email PK smallint permission timestamp createdat timestamp updatedat } style { integer id PK, FK } storymap ||--|{ storymap_chapters : is storymap_chapters }|--|| storymap_chapter : has storymap ||--o{ storymap_favourite : has storymap ||--o{ storymap_permission : has style ||--|{ storymap_chapter : has style ||--|{ storymap : hasParameters can be changed in GUI
For
onChapterEnterandonChapterExit, for each object in an array consists of the following properties:For example, we can set objects like below.
If entering to this chapter, make heatmap and circle invisible. and make circle visible when leaving the chapter.
references
Beta Was this translation helpful? Give feedback.
All reactions