Targomo Basemap Switcher

Access Targomo basemaps via a LeafletJS layer control 
<!DOCTYPE html>
<html>

<head>
    <!--  Include leaflet javascript and css -->
    <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 leaflet full build -->
    <script src="https://releases.targomo.com/leaflet/latest-full.min.js"></script>
    <style>
        body,
        html {
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <!--  where the map will live  -->
    <div id="map"></div>

    <script>
        // create targomo client
        const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');
        // define the basemaps
        const tileLayers = tgm.leaflet.TgmLeafletTileLayer.getTileLayerList(client);
        
        // Coordinates to center the map
        const center = [52.52, 13.37];
        
        // define the map
        var map = L.map('map', {
            layers: [tileLayers['Bright']],
            scrollWheelZoom: false
        }).setView(center, 12);
        
        L.control.layers(tileLayers).addTo(map);
        
        // set the attribution
        const attributionText = '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>';
        map.attributionControl.addAttribution(attributionText);
    </script>
</body>

</html>
content_copy
Copied to clipboard