Merge pull request #1097 from cityofaustin/9890-mapbox-to-nearmap

Add nearmap layer to crash map

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 (
       <MapGL
         {...viewport}
         width="100%"
         height="100%"
-        mapStyle="mapbox://styles/mapbox/satellite-streets-v9"
+        mapStyle={
+          isDev ? "mapbox://styles/mapbox/satellite-streets-v9" : rasterStyle
+        }
         onViewportChange={this._updateViewport}
         mapboxApiAccessToken={TOKEN}
       >