> For the complete documentation index, see [llms.txt](https://atd-dts.gitbook.io/moped-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atd-dts.gitbook.io/moped-documentation/dev-guides/maps-and-geospatial-data/v1-archive/maps-libraries.md).

# 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](https://web.microsoftstream.com/video/9ab02e69-c2f5-4a73-a9ef-009fabb27a70) and [slides](https://docs.google.com/presentation/d/1l8PyYUynsUmHO6kYCtzsnT4oKPzWvh4Upn7QWzyvyCI/edit?usp=sharing). 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](https://account.mapbox.com/). The access token use is restricted to specific URLs that allows local development, testing with [BrowserStack](https://www.browserstack.com/) (<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](https://atx.service-now.com/sp). The API key is stored in the DTS 1Password Developers vault and is titled **Moped Nearmap API Key.**

## Libraries

### [react-map-gl](https://github.com/visgl/react-map-gl)

This is a Vis.gl (Uber) library that provides a React API for [Mapbox GL JS](https://github.com/mapbox/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](https://github.com/uber/nebula.gl/tree/master/modules/react-map-gl-draw)

This is a [Nebula.gl](https://github.com/uber/nebula.gl) module that provides tools to draw, edit, select, and delete free-drawn features to a `react-map-gl` map component.&#x20;

### [react-map-gl-geocoder](https://github.com/SamSamskies/react-map-gl-geocoder)

This is a React wrapper for [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder) which uses the [Mapbox Geocoding API](https://docs.mapbox.com/api/search/#geocoding) 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](https://services.arcgis.com/0L95CJ0VTaxqcmED/arcgis/rest/services/BOUNDARIES_jurisdiction_1231_1951/FeatureServer/0/query?where=1%3D1\&objectIds=\&time=\&geometry=\&geometryType=esriGeometryEnvelope\&inSR=\&spatialRel=esriSpatialRelIntersects\&resultType=none\&distance=0.0\&units=esriSRUnit_Meter\&returnGeodetic=false\&outFields=\&returnGeometry=true\&returnCentroid=false\&featureEncoding=esriDefault\&multipatchOption=xyFootprint\&maxAllowableOffset=\&geometryPrecision=\&outSR=\&datumTransformation=\&applyVCSProjection=false\&returnIdsOnly=false\&returnUniqueIdsOnly=false\&returnCountOnly=false\&returnExtentOnly=true\&returnQueryGeometry=false\&returnDistinctValues=false\&cacheHint=false\&orderByFields=\&groupByFieldsForStatistics=\&outStatistics=\&having=\&resultOffset=\&resultRecordCount=\&returnZ=false\&returnM=false\&returnExceededLimitFeatures=true\&quantizationParameters=\&sqlFormat=none\&f=pgeojson\&token=) (Austin Full Purpose Jurisdiction).

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

##