AccuTerra Maps Developer Guide

AccuTerra Map Styles

Outdoors

AccuTerra Outdoors map style showcases the AccuTerra Surface Management Agency layer, also commonly referred to as Land Use. We show in bright and bold color America’s many public land types so you always know who manages the land you’re on. When combined with our extensive road and trail network and overlaid on our highly detailed terrain data, AccuTerra Outdoors is the perfect companion for your next outdoor adventure.

Identifier: accuterra-outdoors
Capabilities: Vector, Raster
   
GL Style: GL Style
TileJSON: https://maps.accuterra.com/v1/styles/accuterra-outdoors/style.json?key=YOUR_API_KEY
XYZ: https://maps.accuterra.com/v1/raster/accuterra-topo/{z}/{x}/{y}.png?key=YOUR_API_KEY
Vector: https://maps.accuterra.com/v1/styles/accuterra-outdoors/style.json/?vector#2/0/0?key=YOUR_API_KEY
Raster: https://maps.accuterra.com/v1/styles/accuterra-outdoors/?raster#3/0.00/0.00?key=YOUR_API_KEY
WMTS: https://maps.accuterra.com/styles/accuterra-outdoors/wmts.xml?key=YOUR_API_KEY

Topo

AccuTerra Topo is another take on our unique mapping content. With a different styling for roads, trails, and terrain AccuTerra Topo gives you another option for presenting AccuTerra to your users. Topo is well suited for use outside of the United States.

Identifier: accuterra-topo
Capabilities: Vector, Raster
   
GL Style: GL Style
TileJSON: https://maps.accuterra.com/v1/styles/accuterra-topo.json?key=YOUR_API_KEY
XYZ: https://maps.accuterra.com/v1/styles/accuterra-topo/{z}/{x}/{y}.png?key=YOUR_API_KEY
Vector: https://maps.accuterra.com/v1/styles/accuterra-topo/?vector#2/0/0?key=YOUR_API_KEY
Raster: https://maps.accuterra.com/v1/styles/accuterra-topo/?raster#3/0.00/0.00?key=YOUR_API_KEY
WMTS: https://maps.accuterra.com/styles/accuterra-topo/wmts.xml?key=YOUR_API_KEY
Code Samples

Web

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        /* configure the size of the map */
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // initialize Leaflet
      var map = L.map('map').setView({lon: -105.00, lat: 39.65}, 10);

      var myKey = "eXePb4yLgQNHuICMzEylJWfs1A74RiKqGKytyMi7W9IFin0dlc";
      L.tileLayer(
        `https://{s}.accuterra.com/v1/raster/accuterra-topo/{z}/{x}/{y}.png?key=${myKey}`, {
          maxZoom: 16,
          attribution: '&copy; AccuTerra Maps',
          subdomains: [
            "maps-d1",
            "maps-d2",
            "maps-d3",
            "maps-d4",
          ]
      }).addTo(map);     

    </script>
  </body>
</html>
<html>
<head>
 <title>Leaflet + Mapbox GL</title>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
 <script type="text/javascript" src="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js"></script>
 <link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css">
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css">
 <script type="text/javascript" src="https://rawgit.com/mapbox/mapbox-gl-leaflet/master/leaflet-mapbox-gl.js"></script>
 <style type="text/css">
     html, body, #my-map {
         width: 100%;
         height: 300px;
         margin: 0;
     }
</style>
</head>
<body>
 <div id="my-map"></div>
 <script type="text/javascript">
     var map = L.map('my-map').setView([39.6500327, -105.0053989], 11);
     // the attribution is required
     map.attributionControl.setPrefix('').addAttribution('Powered by <a href="https://www.accuterra.com/" target="_blank">Accuterra</a> | © OpenStreetMap <a href="https://www.openstreetmap.org/copyright" target="_blank">contributors</a>');
     var myKey = "eXePb4yLgQNHuICMzEylJWfs1A74RiKqGKytyMi7W9IFin0dlc"; 
     var gl = L.mapboxGL({
         style: `https://maps.accuterra.com/v1/styles/accuterra-outdoors/style.json?key=${myKey}`,
         accessToken: 'no-token'
     }).addTo(map);
</script>
</body>
</html>
<html>
  <head>
    <title>Leaflet + Tangram</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <script src="https://unpkg.com/tangram/dist/tangram.min.js"></script>

    <style>
        body {
            margin: 0px;
            border: 0px;
            padding: 0px;
        }

        #map {
            height: 100%;
            width: 100%;
        }

    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>

        var map = L.map('map', {maxZoom: 6});

        var tangramLayer = Tangram.leafletLayer({
            scene: 'accuterra-tangram.yaml',
            attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | © OSM contributors'
        });

        tangramLayer.addTo(map);
        map.setView([39.0, -108.0], 5);
    </script>
  </body>
</html>
<html>
<head>
    <title>MapBox GL</title>
    <script type="text/javascript" src="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js"></script>
<link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css">
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        #my-map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="my-map"></div>
    <script type="text/javascript">
        var myKey = "eXePb4yLgQNHuICMzEylJWfs1A74RiKqGKytyMi7W9IFin0dlc";
        var map = new mapboxgl.Map({
            container: 'my-map',
            style: `https://maps.accuterra.com/v1/styles/accuterra-outdoors/style.json?key=${myKey}`,
            center: [-105.00,39.65],
            zoom: 10
        });
        map.addControl(new mapboxgl.NavigationControl());
    </script>
</body>
</html>
<html>
<head>
 <title>OpenLayers</title>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">
 <script type="text/javascript" src="https://unpkg.com/ol-mapbox-style@6.1.1/dist/olms.js"></script>
 
 <style type="text/css">
     html, body, #my-map {
         width: 100%;
         height: 100%;
         margin: 0;
     }

 </style>
</head>
<body>
 <div id="my-map"></div>
 <script type="text/javascript">
     var myKey = "eXePb4yLgQNHuICMzEylJWfs1A74RiKqGKytyMi7W9IFin0dlc";

     olms('my-map', `https://maps.accuterra.com/v1/styles/accuterra-outdoors/style.json?key=${myKey}`).then((map) => {
        let view = map.getView();
        view.setCenter(ol.proj.fromLonLat([-105.0053989, 39.6500327]));
        view.setZoom(10);
        map.setView(view);
     });
 </script>
</body>
</html>
<html>
  <head>
    <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
    <script type="text/javascript" src="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js"></script>
    <link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css">
    <script type="text/javascript">
        const {GoogleMapsOverlay} = deck;
    </script>

    <title>Google Maps</title>
    <style>
      html, body, #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">
// Set your Google Maps API key here
const GOOGLE_MAPS_API_KEY = ''
const GOOGLE_MAPS_API_URL = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}`;

function loadScript(url) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  const head = document.querySelector('head');
  head.appendChild(script);
  return new Promise(resolve => {
    script.onload = resolve;
  });
}

loadScript(GOOGLE_MAPS_API_URL).then(() => {
  
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 39.6500327, lng: -105.0053989},
    zoom: 10
  });
  
  const myKey = 'eXePb4yLgQNHuICMzEylJWfs1A74RiKqGKytyMi7W9IFin0dlc';
  const accuterraLayer = new deck.MVTLayer({
    data: `https://maps.accuterra.com/v1/raster/accuterra-topo/{z}/{x}/{y}.pbf?key=${myKey}`,

    minZoom: 0,
    maxZoom: 23,
    getLineColor: [192, 192, 192],
    getFillColor: [140, 170, 180],

    getLineWidth: f => {
      switch (f.properties.class) {
        case 'street':
          return 6;
        case 'motorway':
          return 10;
        default:
          return 1;
      }
    },
    lineWidthMinPixels: 1
  });
  
  const overlay = new GoogleMapsOverlay({
    layers: [accuterraLayer]
  });  

  overlay.setMap(map);
});
    </script>
  </body>
</html>

Mobile

package com.accuterra.accuterramapsdemo

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.mapbox.mapboxsdk.Mapbox
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Mapbox access token is configured here. This needs to be called either in your application
        // object or in the same activity which contains the mapview.
        Mapbox.getInstance(this, "no-token")

        val accuterraMapsToken = "eXePb4yLgQNHuICMzEylJWfs1A74RiKqGKytyMi7W9IFin0dlc"
        
        // This contains the MapView in XML and needs to be called after the access token is configured.
        setContentView(R.layout.activity_main)
        mapView?.onCreate(savedInstanceState)
        mapView?.getMapAsync { mapboxMap ->
            mapboxMap.setStyle("https://maps.accuterra.com/v1/styles/accuterra-outdoors/style.json?key=$accuterraMapsToken") {
                // Map is set up and the style has loaded. Now you can add data or make other map adjustments.
            }
        }
    }

    // Add the mapView lifecycle to the activity's lifecycle methods
    public override fun onResume() {
        super.onResume()
        mapView?.onResume()
    }

    override fun onStart() {
        super.onStart()
        mapView?.onStart()
    }

    override fun onStop() {
        super.onStop()
        mapView?.onStop()
    }

    public override fun onPause() {
        super.onPause()
        mapView?.onPause()
    }

    override fun onLowMemory() {
        super.onLowMemory()
        mapView?.onLowMemory()
    }

    override fun onDestroy() {
        super.onDestroy()
        mapView?.onDestroy()
    }

    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        mapView?.onSaveInstanceState(outState)
    }
}
import UIKit
import Mapbox

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let accuterraMapsToken = "eXePb4yLgQNHuICMzEylJWfs1A74RiKqGKytyMi7W9IFin0dlc"
        
        let url = URL(string: "https://maps.accuterra.com/v1/styles/accuterra-outdoors/style.json?key=\(accuterraMapsToken)")
        let mapView = MGLMapView(frame: view.bounds, styleURL: url)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.setCenter(CLLocationCoordinate2D(latitude: 39.375239, longitude: -104.861077), zoomLevel: 14, animated: false)
        view.addSubview(mapView)
    }

}