Map layers and basemaps
Layers and base maps that make up the project summary map and project components map
Last updated
Was this helpful?
Layers and base maps that make up the project summary map and project components map
Last updated
Was this helpful?
The main layer in Moped is GeoJSON. The pattern for adding a source and layer to a react-map-gl
map is to use the and components. These two components are abstraction of Mapbox GL and . 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.
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 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 and .
In Moped, the default basemap style is and the streets layer for the in react-map-gl
is mapbox://styles/mapbox/light-v10
.
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 . 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 . This configuration is passed to the 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.