The extent-driven content pattern synchronizes content in the UI with the map extent. It describes how the map can be used as a dynamic spatial filter that updates other content on the page as the map extent changes.
Data can be visualized in many ways. The most common visualization components are charts, tables, maps, and simple indicators. Each component provides a unique viewpoint into the data and allows users to adjust the display to their needs — for instance, lists can be sorted, and maps can be zoomed and panned. Manipulating each component changes the center of interest without affecting other components deployed on the page. This behavior is expected because users do not want to see lists and charts update constantly after each miniscule pan event. Extent-driven content describes an exception to this rule.
The most important application of extent-driven content is exploration of places, sometimes also referred to as short list. Users want to explore points of interest, such as hotels, restaurants, or landmarks, within a given area. While in this mindset, they are interested in seeing only data that lies within the current map extent. Navigating the map controls the content displayed in related visualization components on the page such as the list. The list therefore provides visual feedback by reflecting the places currently visible on the map.
Provide a partial map layout with markers that relate to points of interest. Add other visualization components such as a list, chart, or indicators adjacent to the map. Bind the data to the same source and synchronize the components. Use the current map extent as a spatial filter that dynamically updates as the user zooms or pans the map.
Navigating the map without constraints comprises the following challenges that you need to consider:
- User zooms in too far: Zero results are available. Provide empty states for related visualization components.
- User zooms out too far: A large amount of irrelevant data is displayed and downloaded. This navigation behavior is often an interim state to find and narrow in on another geographic location. There is little value in showing all available points at smaller scales. Consider restricting the data download to a predefined buffer around the center of the map. Alternatively, use cluster marker to hide individual markers.
- User pans away from their current location: This behavior is a common side effect of any exploration behavior. Add locate me to re-center on the user’s location.
- User pans outside the area of interest: If your data is restricted to a certain area such as a city, the user may unconsciously zoom beyond these bounds. Consider notifying the user of that circumstance, and provide a home button to reset the extent to its original bounds.
As stated earlier, synchronizing the map extent with other content is often not the expected interaction behavior. Consider providing a method to opt in or opt out of this behavior by providing a check box labeled Redo Search When Map Moved or similar.
The Australian Tree Crop Map Dashboard is an initiative led by the University of New England research team from the Applied Agricultural Remote Sensing Centre (AARSC). The app summarizes the commercial horticulture tree crops in Australia, such as avocados; citrus, macadamia, and mango orchards; banana plantations; and olive groves. Users can review summary statistics for each tree crop in an info pop-up. Depending on the map scale, the statistics are calculated by the selected state at small scales, local government areas at medium scales, or tree crop polygons at large scales. Additionally, the app follows the extent-driven content pattern to update the crop indicators located underneath the map. The indicators show total numbers for each crop within the current map extent. These numbers update as the user zooms or pans the map and are independent of the data displayed in the pop-up.