AccuTerra Maps Developer Guide

AccuTerra Map Styles

AccuTera Outdoors

AccuTerra Outdoors showcases the unique map content AccuTerra has to offer. Our public lands data, combined with . 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. This map is available in both metric and imperial elevation units.

AccuTerra 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. This map is available in both metric and imperial elevation units.

AccuTerra Terrain

AccuTerra Terrain is a clean light basemap depicting AccuTerra’s terrain layer . This map is available in both metric and imperial elevation units.

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)
    }

}