Leaflet basemaps
Use Targomo basemaps in Leaflet layer control
<!DOCTYPE html>
<html>
<head>
  <!--  Include leaflet libs -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" >
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" crossorigin=""></script>
  <!--  Include targomo core -->
  <script src="https://releases.targomo.com/core/latest.min.js" ></script>
  <!--  Include targomo leaflet extension -->
  <script src="https://releases.targomo.com/leaflet/latest.min.js"></script>
  <style>
    html, body { width: 100%; height: 100%; margin: 0; }
    #map { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <!--  where the map will live  -->
  <div id="map"></div>
  
  <script>
    const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');

    // Get a list of available tile layers which you can directly use with Leaflet
    const basemaps = tgm.leaflet.TgmLeafletTileLayer.getTileLayerList(client);

    // add the map and set the initial center to berlin
    var map = L.map('map', {
        layers: [basemaps.Basic], // starting basemap
        scrollWheelZoom: false
    }).setView([52.51, 13.37], 14);
    const attributionText = `<a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a> <a href='http://openmaptiles.org/' target='_blank'>&copy; OpenMapTiles</a> <a href='https://targomo.com/developers/attribution/' target='_blank'>&copy; Targomo</a>`
    map.attributionControl.addAttribution(attributionText);

    // add layer control to map
    L.control.layers(basemaps).addTo(map);
  </script>
</body>
</html>
content_copy
Copied!