Targomo Basemap Switcher

Access Targomo basemaps via a LeafletJS layer control 
<!DOCTYPE html>
<html>
<head>
    <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="" type="text/javascript"></script>
    <script src="https://releases.targomo.com/leaflet/latest-full.min.js"></script>
    <script src="../_shared/tgm-utils.js"></script>

    <style>
        body, html {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        
    </style>
</head>
<body>
    
    <div id="map"></div>
    <script>// Create Targomo client
        const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');
        
        // Get all tile layers for the layer control
        const tileLayers = tgm.leaflet.TgmLeafletTileLayer.getTileLayerList(client);
        
        // Initialize map with Bright basemap (first in the list)
        const map = L.map('map', {
            layers: [tileLayers['Bright']],
            scrollWheelZoom: false
        }).setView([52.52, 13.37], 12);
        
        // Add Targomo attribution
        map.attributionControl.addAttribution('<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a>');
        
        // Add layer control to switch between different basemaps
        L.control.layers(tileLayers).addTo(map);</script>
</body>
</html>
content_copy
Copied to clipboard