Floating Map Search Page
Use this to display a list of Things in a repeating group and on a map.
This page template includes a search bar element and a floating map that floats to the top and bottom of the page. You can add Canvas blocks to the left of the map; the map stays in a fixed position as you scroll the search results (similar to Airbnb).
When the page width decreases to 1100 pixels or less, the Current User can toggle between a list view and a full-screen map view that adjusts in size based on the viewport.
Mobile "list" view
Mobile "map" view
The Current User can also select a map marker to learn more about it:
Desktop preview with selected map marker
When this page is added to your app, it comes with these main elements:
- Group Main title and search This group contains the title and search bar components.
- Group Main map mobile This group contains the mobile map element. (Note: The custom HTML element, HTML Mobile, adjusts the height and width of the mobile map to fit the current viewport).
- Blocks container 860 (do not rename)This group contains the responsive settings for all blocks on the page. The extension will add new blocks to this group.
- FloatingGroup Selected map marker (desktop) and FloatingGroup Selected map marker (mobile) These floating groups float to the bottom of the page. They become visible if the Current User clicks on a map marker on desktop or mobile.
- The Hidden Variables popup contains the following groups (variables) by default:
- var - Website object (type: Website) This group stores the website object (e.g., app name, primary color, etc.)
- var - dummy data (type: Dummy) This is a placeholder group in case you want to use any hidden variable groups later.
- var - map or list tab (type: text) This group's value is either "map" or "list" depending on which view the Current User is viewing on mobile.
- var - page tab (type: text) This group stores the page-level tab that was clicked if the Group Collapsible Toggle Tabs are made visible and utilized.
- var - selected map marker (type: Dummy) The just-clicked map marker (if any). This needs to be changed to match your repeating group's type of content.
- Modify the data type of var - map marker (the marker that the user clicks on the map) to equal the type of content that your map will display. For example, if you are displaying a list of Users on the map, the var - map marker's type of content would be "User".
- Add a repeating group block to the page and modify its type of content and data source.
- Modify the data source of the Desktop Map and Mobile Map elements so that they display the repeating group results.