Stamen Terrain¶

// Initialize a map centered at (53, 12) at zoom level 5
var map = L.map('map').setView([53, 12], 5);

// Style URL format in XYZ PNG format; see our documentation for more options
// You can also explicitly request tiles from our EU servers using the following URL:
// https://tiles-eu.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}{r}.png
L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}{r}.png', {
    maxZoom: 20,
    attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a> contributors', 
}).addTo(map);

// NOTE: These styles are currently in beta, but are expected to be finalized by mid-September.
// If you want to test your integration today, use the following MapLibre code snippet.
// Note that the final URL will remove beta designation once the vector styles are finalized (the beta URLs will
// continue working, but you should update to the production endpoint to receive the best performance and stability
// once it is available).
var map = new maplibregl.Map({
  container: 'map',
  style: 'https://tiles-beta.stadiamaps.com/styles/stamen_terrain.json ',  // Style URL; see our documentation for more options
  center: [12, 53],  // Initial focus coordinate
  zoom: 4
});

// Add zoom and rotation controls to the map.
map.addControl(new maplibregl.NavigationControl());

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.StadiaMaps({
        layer: 'stamen_terrain',
        retina: true,
      }),
    }),
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([12, 53]),
    zoom: 5
  })
});

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}@2x.png',
        attributions: [
          '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a>',
          '&copy; <a href="https://stamen.com/" target="_blank">Stamen Design</a>',
          '&copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a>',
          '&copy; <a href="https://www.openstreetmap.org/about/" target="_blank">OpenStreetMap contributors</a>'
        ],
        tilePixelRatio: 2,
        maxZoom: 20
      })
    }),
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([12, 53]),
    zoom: 5
  })
});