> 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/map-layers-and-basemaps.md).

# Map layers and basemaps

## Sources, Layers, and Source Types

The main layer [source type](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/) in Moped is GeoJSON. The pattern for adding a source and layer to a `react-map-gl` map is to use the [Source](https://visgl.github.io/react-map-gl/docs/api-reference/source) and [Layer](https://visgl.github.io/react-map-gl/docs/api-reference/layer#layer) components. These two components are abstraction of Mapbox GL [sources](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/) and [layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/). The Source component is responsible for the data and the Layer component is used to style the data of the source. An example of JSX for a vector tile layer is below.

```javascript
<Source
  key={config.layerIdName}
  type="geojson"
  data={theGeojsonData}
>
  <Layer
    key={config.layerIdName}
    {...theOtherlayerProps}
  />
</Source>
```

## GeoJSON layers

Layers that are created from user input (like selecting from the CTN segments or intersection layer or drawing lines or points) require a source with [type](https://visgl.github.io/react-map-gl/docs/api-reference/source#type) `geojson` and, in Moped, the geojson is formatted as a GeoJSON feature collection.

The CTN segments and intersection points are also populated with GeoJSON data queried from AGOL feature servers called [CTN segments FeatureServer](https://services.arcgis.com/0L95CJ0VTaxqcmED/ArcGIS/rest/services/CTN_Segments_MOPED_FS/FeatureServer) and [COA Intersection points FeatureServer](https://services.arcgis.com/0L95CJ0VTaxqcmED/ArcGIS/rest/services/LOCATION_coa_intersection_points/FeatureServer).

## Base Maps

### Default basemap

In Moped, the default basemap style is [Mapbox Light](https://www.mapbox.com/maps/light) and the streets layer for the [mapStyle prop](https://visgl.github.io/react-map-gl/docs/api-reference/static-map#mapstyle) in `react-map-gl` is `mapbox://styles/mapbox/light-v10`.

### Aerial Imagery basemap

To add aerial imagery, a Nearmap layer is added as a raster tile set. 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.**

The aerial basemap is added by providing a raster tile configuration that uses the Nearmap API endpoint along with the API key to provide aerial tiles. A sample configuration is shown below. A Mapbox example of using a custom tile set is [here](https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/). This configuration is passed to the [mapStyle prop](https://visgl.github.io/react-map-gl/docs/api-reference/static-map#mapstyle) of  a `react-map-gl` map much like the default streets basemap above. This time, an object is passed instead of the string source of a Mapbox style.

```javascript
{
  sources: {
  "raster-tiles": {
      id: "aerial-tiles",
      type: "raster",
      tiles: [
        `https://api.nearmap.com/tiles/v3/Vert/{z}/{x}/{y}.jpg?apikey=${NEARMAP_KEY}`,
      ],
      tileSize: 256,
    },
  },
  layers: [
    {
      id: "aerial-tiles",
      type: "raster",
      source: "aerial-tiles",
      minzoom: 0,
      maxzoom: 22,
    },
  ],
}
```