diff --git a/atd-vze/src/views/Crashes/Maps/CrashMap.js b/atd-vze/src/views/Crashes/Maps/CrashMap.js index eda1fbd87..bd52de36e 100644 --- a/atd-vze/src/views/Crashes/Maps/CrashMap.js +++ b/atd-vze/src/views/Crashes/Maps/CrashMap.js @@ -9,6 +9,8 @@ import "mapbox-gl/dist/mapbox-gl.css"; import Pin from "./Pin"; const TOKEN = process.env.REACT_APP_MAPBOX_TOKEN; +// This API key is managed by CTM. Contact help desk for maintenance and troubleshooting. +const NEARMAP_KEY = process.env.REACT_APP_NEARMAP_KEY; const fullscreenControlStyle = { position: "absolute", @@ -24,6 +26,30 @@ const navStyle = { padding: "10px", }; +// Provide style parameters to render Nearmap tiles in react-map-gl +// https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/ +const rasterStyle = { + version: 8, + sources: { + "raster-tiles": { + type: "raster", + tiles: [ + `https://api.nearmap.com/tiles/v3/Vert/{z}/{x}/{y}.jpg?apikey=${NEARMAP_KEY}`, + ], + tileSize: 256, + }, + }, + layers: [ + { + id: "simple-tiles", + type: "raster", + source: "raster-tiles", + minzoom: 0, + maxzoom: 22, + }, + ], +}; + export default class CrashMap extends Component { constructor(props) { super(props); @@ -72,13 +98,16 @@ export default class CrashMap extends Component { render() { const { viewport } = this.state; + const isDev = window.location.hostname === "localhost"; return (