Map libraries

Libraries used to create React web maps

Overview presentation and slides

For a high-level view of the mapping in Moped, see the presentation recording and slides. The rest of this documentation goes into greater detail on these topics.

Access token and API keys

The Mapbox access token is managed through the Austin Transportation Mapbox account. See the credentials in the DTS 1Password vault to access the dashboard. The access token use is restricted to specific URLs that allows local development, testing with BrowserStack (http://bs-local.com:3000/), and preview, staging, and production Netlify deployments but restricts usage from URLs outside these use cases.

Nearmap access and the API key is managed by CTM and can be inquired about through the COA ServiceNow Portal. The API key is stored in the DTS 1Password Developers vault and is titled Moped Nearmap API Key.

Libraries

react-map-gl

This is a Vis.gl (Uber) library that provides a React API for Mapbox GL JS and serves as a client to present and select geographic data within Moped. An example of the data represented in the web maps in this application is the project extent created in the New Project workflow or viewed in the Project Summary view.

react-map-gl-draw

This is a Nebula.gl module that provides tools to draw, edit, select, and delete free-drawn features to a react-map-gl map component.

react-map-gl-geocoder

This is a React wrapper for mapbox-gl-geocoder which uses the Mapbox Geocoding API to geocode. To limit the geocoder results, the the bbox prop of this library is used along with the bbox array from the feature collection returned from this query (Austin Full Purpose Jurisdiction).

{
  type: "FeatureCollection",
  crs: {
    type: "name",
    properties: {
      name: "EPSG:4326",
    },
  },
  bbox: [
    -97.940377028014,
    30.1337172258415,
    -97.578205982277,
    30.4648268798927,
  ],
  features: [],
}