GeoCarousel section for GeoStory

[tdipisa]

Description

A new type of section for GeoStory will be available: the GeoCarousel section. The aim of this new section is to enhance the user experience in using geostories by adding a different kind of section to browse map locations with an accompanying descriptive content.

A GeoCarousel section is a full screen section, like the immersive one currently available, that allows the story editor to define a list of items to be presented with a accompanying descriptive content (using text, media etc) and a geographic location.

Acceptance criteria

1. In editing mode It will be possible to add the GeoCarousel section in the same way of other existing main sections: a new button will be added to the toolbar along with a dedicate icon to properly represent the section type (the icon to use will be defined by @allyoucanmap)

2. When the GeoCarousel section is added to the story (the user clicks on the related button in the above toolbar), the story will scroll to the new section that will cover the entire screen (as it is now for immersive sections)

3. In edit mode the GeoCarousel section will be composed by: a background with its editing toolbar, a descriptive (narrative) panel on top with its editing toolbar (the same column component of the immersive section), a carousel just below the background to list/manage items to be associated with a position in the map. The view mode will be basically the same but without editing toolbars

4. GeoCarousel background toolbar: it provides the same functionalities/buttons of the background toolbar available for immersive sections in case of a map selected for the background: when the media editor is opened for this section, it is possible to select only maps (the map tab is active and other tabs are disabled)

5. Descriptive panel toolbar: it provides the same functionalities/buttons of the columns contents available in immersive sections: the same component should be used.

6. Descriptive panel: it is the same component available in immersive section but, for this section a fixed height must be set for this panel so that the scrollbar appears at a certain point: the GeoCarousel section is not expected to have a variable height like for Immersive sections. We have to set a proper height and make the Descriptive panel responsive depending on the screen.

7. In viewing mode the GeoCarouser and all editing controls (such as toolbars) disappear as usual and it is possible to browse the carousel items by scrolling with the mouse in the carousel section or using left/right arrows

8. In edit mode the GeoCarousel will allow to manage the following:

   • [ ] The map for the background by opening the media editor as usual
   • [ ] The contents (media or not) in the descriptive panel as usual
   • [ ] The position (left/right) and the size of the descriptive panel as usual
   • [ ] All other aspects connected to the involved toolbars for the background map and the descriptive panel (such as the theme etc.)

9. Two buttons on the left side of the GeoCarousel will allow to:

   • [ ] Remove the GeoCarousel section from the story
   • [ ] Add new items to the carousel: when clicked a new box appears in the carousel with an empty thumbnail (see below). The box is selected automatically and the corresponding Descriptive panel will appear empty on the background so that the editor can start adding contents (texts and/or media) in it

   Below are two proposals for the two buttons in the UI:

10. For each item in the carousel a small toolbar allows the story editor to control actions like:

    • Edit the properties of the carousel item such as: thumbnail, name. If the usual modal of resource properties cannot be used, we can also opt for an inline editing of these two properties
      • The thumbnail, if specified, will be used to fill the item box
      • The name, if specified, will appear just below, on top of or on the carousel item: let's see what looks better
    • Define a location in map by adding a marker: a toggle button in the toolbar, if clicked, will activate the possibility to interact with the backgroung map to add a marker. In that case:
      • The map is highlighted and the descriptive panel disappear, as it happens now when the Map Inline Editor is activated for a map in geostory, so that the user can interact only with the map until the position of the marker is fixed. The user can click on the map to add the marker and drag it to the effective position he wants. The story editor can click then an 'X' button somewhere to exit from the marker editing and the toggle button changes its state accordingly
      • When loading a GeoCarousel section the first time (both view and edit mode), each click on a item in the carousel will produce a zoom of the map to the related marker position (if defined). As soon as the user zoom or pan the map, further clicks on items in carousel will produce only a pan to the related marker if it is not in view
      • For this first implementation the marker symbol is always the same (the story editor cannot choose the marker type to be used). The marker type can be obviously configured in the plugin configuration (eg. in localConfig) with a dedicated property
      • The name of a carousel item (see above), if specified, will be automatically used for the retaled marker tooltip in the map to be visualized when the user hover the mouse over the marker
    • Delete the related carousel item (a confirmation dialog will be prompted)

11. It is possible to drag&drop items in the carousel to change their order in the list

12. Selecting a card item in the carousel (bot view and edit mode) the map can move/zoom to the related marker as specified above but also the descriptive panel changes accordingly by showing the content configured for the selected carousel item

13. As usual also for all the other sections types, a plus button in the mid-bottom side of the slideshow section allows to add other sections

Other useful information

The responsivnes should be taken into account and better evaluated for mobile devices. The presentation could be the same of an immersive section. Users can tap on the descriptive panel to zoom the map to the marker and it is also possible to:

• Swipe left or right the descriptive panel to see other carousel items (the map is centered accordingly to the related marker)
• Hide the descriptive panel to show only the map as it is now for Immersive sections

[dsuren1]

Needed as part of this issue

1. Location on map is mandatory for a carousel item
2. Marker should be interactive. Clicking on marker should in turn select the respective item in the carousel window
3. Marker should be relatable to the carousel item ( i.e a number on marker and same in the card should be present)
4. Add a possibility to configure enabling/disabling the Identify setting by default for geocarousel sections (i.e for tooltip)

Needs to be estimated

4. Ability to customize marker (Like annotation - UI to select marker style)
5. Arrow on descriptive panel (Include swipe for mobile)

Nice to have

6. Ability to provide precise location coordinates (Coordinates field or geocoder)

[tdipisa]

@dsuren1 let's have a quick call for these points so that you can do the requested evaluation:

4. Ability to customize marker (Like annotation - UI to select marker style)
5. Arrow on descriptive panel (Include swipe for mobile)

[tdipisa]

@dsuren1 I've created a new dedicate issue for the estimate of the point below

4. Ability to customize marker (Like annotation - UI to select marker style)

You can open an issue for the other point, that is already clear to you, and do the estimate there.

5. Arrow on descriptive panel (Include swipe for mobile)

[ElenaGallo]

@dsuren1 @tdipisa here some notes on the Goecarousel section:

1_ By adding a new item, the geostory scrolls down

How to Reproduce

• Open this geostory
• Click on + from the carousel toolbar

Current Result Adding a new item moves the section

2_ From View Mode, by selecting a GeoCarousel section from the navigation bar, you are not shown on the corresponding section

How to Reproduce

• Open this geostory
• Follow the gif below

Current Result the geostory does not bring you back to the selected section

3_ From the sharing map, the markers are not present on the map

How to Reproduce

• Open this geostory link
• Go to the Geocarousel section

Current Result The markers are not present on the map

4_ From the embedded map, clicking the marker on the map displays the gray error page

How to Reproduce

• Open this embedded geostory link
• Go to the Geocarousel section
• Click on the markers

Current Result The gray error page appears

5_ From mobile, clicking the marker on the map displays the gray error page

How to Reproduce

• Open this geostory from mobile
• Go to the Geocarousel section
• Click on the markers

Current Result The gray error page appears

[ElenaGallo]

@dsuren1 I found another problem in the embedded geostory:

• The layer present in the background map, on GeoCarousel section, is not visible.

How to Reproduce

• Open the embedded geostory

Expected Result

Current Result

Gostory link here

[dsuren1]

@dsuren1 I found another problem in the embedded geostory:

• The layer present in the background map, on GeoCarousel section, is not visible.

How to Reproduce

• Open the embedded geostory

Expected Result

Current Result

Gostory link here

I believe it has something to do with layer/style permission as geostory-embedded needs shared/accessible resource to work with. As you can see here https://dev-mapstore.geosolutionsgroup.com/mapstore/geostory-embedded.html#/35120, https://dev-mapstore.geosolutionsgroup.com/mapstore/geostory-embedded.html#/34844, these geostory displays layers properly, as it uses layer from _gs:usstates & _topp:statestest which are accessible. Note: Also you can see this behavior with existing sections as well, so I'm pretty sure this is not an issue and especially not an issue with carousel section. Hope it helps!

[tdipisa]

@ElenaGallo, that's true.

I believe it has something to do with layer/style permission as geostory-embedded needs shared/accessible resource to work with. As you can see here https://dev-mapstore.geosolutionsgroup.com/mapstore/geostory-embedded.html#/35120, https://dev-mapstore.geosolutionsgroup.com/mapstore/geostory-embedded.html#/34844, these geostory displays layers properly, as it uses layer from gs:us_states & topp:states_test which are accessible. Note: Also you can see this behavior with existing sections as well, so I'm pretty sure this is not an issue and especially not an issue with carousel section. Hope it helps!

[ElenaGallo]

@dsuren1 @allyoucanmap

• [ ] On the embedded geostory and on mobile, the title popoup cover the marker. See this enbedded geostory

• [ ] The carousel map has a different bbox after it is saved with the marker

How to reproduce Follow the gif below:

[tdipisa]

@ElenaGallo

On the embedded geostory and on mobile, the title popoup cover the marker. See this enbedded geostory

Please open a new issue for this with Internal label

The carousel map has a different bbox after it is saved with the marker

This is a fetaure not a bug, the map is always zoomed to the selected marker.

[ElenaGallo]

Closed in favor of #7143