NAIP - Composited

by Tristen Brown

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.js"></script>
<div id="map"></div>
<div id="z">10</div>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

#z {
  background: black;
  font-family: 'Helvetica';
  color: white;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px;
  border-radius: 3px;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiamFjcXVlcyIsImEiOiJuRm9TWGYwIn0.ndryRT8IT0U94pHV6o0yng';

const style = {
  version: 8,
  center: [-72.664, 44.370],
  zoom: 10,
  sources: {
    satellite: {
    tiles: [
			'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
			],
      type: 'raster',
      tileSize: 256
    },
    hires: {
    	url: 'mapbox://mapbox.satellite-mores',
      type: 'raster',
      tileSize: 256
    },
  },
  glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
  layers: [
    {
      id: 'satellite',
      type: 'raster',
      source: 'satellite',
      maxZoom: 10
    },
    {
      id: 'hires',
      type: 'raster',
      source: 'hires',
      maxZoom: 11,
      minZoom: 16
    },
  ]
};

const map = new mapboxgl.Map({
  container: 'map',
  style
});

map.on('load', () => {
  const z = document.getElementById('z');
  map.on('move', () => {
    z.textContent = map.getZoom().toFixed(2);
  });
});