Map custom hooks

Patterns used to create the map view, edit, and draw UIs

Custom Hooks

React custom hooks are used to make the map editing code more portable and modularized. One example is the hook called useLayerHover which helps separate the logic needed to place a tooltip on a map instance from the map component itself. Each custom hook can be added to the same component where a react-map-gl map component lives to add specific map features.

useLayerHover

This hook returns a handler, feature ID, and the coordinates of the cursor on the map. It is used to separate the state required to place a tooltip on the map from the map component.

Tooltip with sample text shown when hovering a street line

useFeatureCollectionToFitBounds

This hook updates a map viewport to match a given GeoJSON feature collection. It is responsible for setting the initial map view to zoom to and highlight the project extent that users have previously set for a specific project and to prevent users from scanning the entire map for the features that are relevant.

Initial map view of an existing project extent

useLayerSelect

This hook adds a UI that allows users to add and remove layers and switch basemaps that are presented on the map. For example, a user might not be concerned with setting intersection points for a specific project. Un-checking the "Points" box will allow them to focus on the features that are relevant to a project without extra noise. Also, they may want to see the latest aerial imagery of the project extent.

When looking at this custom hook, it is important to note that the list of visible layers exposed by the hook is what determines whether each layer's Mapbox style specification visibility property is set to visible or none when the spec is created. This list is added to or removed from when a user toggles the checkbox in the UI.

It is also important to distinguish whether a layer's source is a vector tile layer (like streets and points) or GeoJSON that was input by a user (drawn points). The two helpers that create the Mapbox style specifications are createProjectSelectLayerConfig for layers with a vector tile layer source and createProjectViewLayerConfig for layers with a user input source.

Layer select toolbar

useMapDrawTools

This hook adds a drawing UI that allows users to add free-drawn features to the project extent. The library named react-map-gl-drawwas used to build this hook. The UI adds tools to draw, select, and remove features from the map and also the project extent related to a project. These tools allow users to add features to the project extent when the features available in the streets and points layers fall short of their needs.

Draw toolbar and drawn points