Targomo Basemaps in Mapbox-GL
Select fron several styles
<!DOCTYPE html>
<html>

<head>
    <!--  Include targomo core -->
    <script src="https://releases.targomo.com/core/latest.min.js"></script>
    <!--  Include mapboxgl javascript and css -->
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet">
    <style>
        body,
        html {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        #basemaps-select {
            position: absolute;
            margin: 10px;
            font-family: 'Open Sans', sans-serif;
            top: 0;
        }
    </style>
</head>

<body>
    <!--  where the map will live  -->
    <div id="map"></div>
    <select id="basemaps-select" onchange="switchMap(this);"></select>
    <script>
        // create targomo client
        const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');
        
        // get available basemaps
        let select = document.querySelector("#basemaps-select");

        // populate select menu
        for (let b of client.basemaps.basemapNames.sort()){
            let option = document.createElement("option");
            option.text = b;
            option.value = b;
            select.appendChild(option);
        }

        const attributionText = `<a href='https://targomo.com/developers/attribution/' target='_blank'>&copy; Targomo</a>`

        // add the map and set the center
        const map = new mapboxgl.Map({
            container: 'map',
            style: client.basemaps.getGLStyleURL('Basic'),
            zoom: 12,
            center: [-123.147333, 49.30386],
            attributionControl: false
        })
        .addControl(new mapboxgl.NavigationControl())
        .addControl(new mapboxgl.AttributionControl({ compact: true, customAttribution: attributionText }));

        // disable scroll zoom
        map.scrollZoom.disable();

        // set new basemap
        function switchMap(opt){
            map.setStyle(client.basemaps.getGLStyleURL(opt.value));
        }
    </script>
</body>

</html>
content_copy
Copied!