Moped Documentation
  • Welcome 👋
  • User Guides
    • Getting started
    • Map a project
  • Product Management
    • User communication
    • User management
    • User analytics
    • Local testing
    • Release process
    • Patch release process
    • MUI X Pro License
    • Integrations
      • Dataset documentation
      • ArcGIS Online
      • eCapris
      • Power BI
    • Features
  • Dev Guides
    • DB Docs & Data dictionary
    • Database backup policy
    • Moped Read Replica
    • How-to's
      • How do I start the Hasura cluster locally?
      • How do I launch the Hasura Console?
      • How do I get a JWT token?
      • How to ping the GraphQL API
      • How to ping the REST API
      • How do I connect a database with Postgres GUIs?
      • How do I connect to the RDS instance?
      • How to load production data into a local instance
      • How do I update seed data?
    • Hasura
      • Hasura Roles
      • Hasura Migrations
        • Getting Started
        • Installing the Hasura CLI
        • Configuration Files
        • Hasura Migration Principles
        • The Migration file format
        • Development
        • Hasura Seed Data
        • Running the Hasura Cluster Locally (video)
        • Create a migration: Exercise 1 (video)
        • Create a migration: Exercise 2 (video)
        • Latest hasura-cluster features
    • User Management
    • Authentication
      • Authentication Architecture
      • DynamoDB & Cognito
      • Secrets Manager & Cognito
      • Hasura & Cognito
      • React & Cognito
      • Flask API & Cognito
      • Single Sign-On with CTM
    • Code organization
    • API
      • Configuration Files
      • Testing
      • User Management API
    • Maps and geospatial data
      • Access tokens and API keys
      • Map libraries
      • Map data
      • Map styles
      • Map layers and basemaps
      • React patterns
      • V1 Archive
        • Map libraries
        • Map data
        • Map custom hooks
        • Map styles
        • Map layers and basemaps
    • UI access control
    • Design system
      • Branding
      • Component styles
      • Text content
    • Activity Log
      • Architecture
      • GitHub Actions and Deployment of Updates
      • Hasura Event Logs and Truncate Cron Job
      • Authentication
  • See also
  • Get Moped support, report a bug, or request an enhancement
  • Data & Technology Services
  • Github repository
Powered by GitBook
On this page

Was this helpful?

  1. Dev Guides
  2. Maps and geospatial data
  3. V1 Archive

Map custom hooks

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

PreviousMap dataNextMap styles

Last updated 4 years ago

Was this helpful?

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.

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.

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.

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.

useMapDrawTools

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 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.

This hook adds a drawing UI that allows users to add free-drawn features to the project extent. The library named was 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.

visibility property
react-map-gl-draw
Tooltip with sample text shown when hovering a street line
Initial map view of an existing project extent
Layer select toolbar
Draw toolbar and drawn points