Skip to content

Change map style

Change map style with user interaction.

<!DOCTYPE html>
<html lang="en">

<head>
        <title>Change map style</title>
        <meta property="og:description" content="Change map style with user interaction." />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/trackasia-gl.css" />
        <script src="https://unpkg.com/[email protected]/dist/trackasia-gl.js"></script>
        <style>
            body { margin: 0; padding: 0; }
            html, body, #map { height: 100%; }
            #map-styles-wrapper {
                position: absolute;
                top: 20px;
                right: 20px;
                background: rgba(255, 255, 255, 0);
            }

            #map-styles {
                font-size: 13px;
                padding: 2px 4px;
            }
        </style>
</head>

<body>
<div id="map"></div>
<div id="map-styles-wrapper">
    <select id="map-styles">
        <option value="https://maps.track-asia.com/styles/v2/streets.json?key=public_key">TrackAsia Streets</option>
        <option value="https://maps.track-asia.com/styles/v1/satellite.json?key=public_key">TrackAsia Satellite</option>
    </select>
</div>

<script>
    const map = new trackasiagl.Map({
        container: 'map',
        style: 'https://maps.track-asia.com/styles/v2/streets.json?key=public_key',
        center: {"lat":10.762622,"lng":106.660172},
        zoom: 10,
        maxZoom: 14,
        minZoom: 1
    });

    document.getElementById('map-styles').addEventListener('change', (e) => {
        map.setStyle(e.target.value);
    });
</script>

</body>
</html>