set-style | Goong Documents

This example adds a clickable interface that enables a user to apply several different styles to the map.

When the user clicks a style name, it uses setStyle to redraw the map using the style URL associated with that option.

The map is centered at 21.03194,105.85315 near Hồ Hoàn Kiếm, Hà Nội, Việt Nam.

Change a map's style

Edit in JSFiddle Edit in CodePen


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Change a map's style</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>

<body>
    <style>
        #menu {
            position: absolute;
            background: #efefef;
            padding: 10px;
            font-family: 'Open Sans', sans-serif;
        }
    </style>

    <div id="map"></div>

    <div id="menu">
        <!-- See a list of Goong-hosted public styles at -->
        <!-- https://docs.goong.io/style-spec/#available-styles -->
        <input
            id="light"
            type="radio"
            name="rtoggle"
            value="https://tiles.goong.io/assets/goong_map_web.json"
            checked="checked"
        />
        <label for="light">Light</label>
        <input
            id="dark"
            type="radio"
            name="rtoggle"
            value="https://tiles.goong.io/assets/goong_map_dark.json"
        />
        <label for="dark">Dark</label>
        <input
            id="nav_day"
            type="radio"
            name="rtoggle"
            value="https://tiles.goong.io/assets/navigation_day.json"
        />
        <label for="nav_day">Navigation Day</label>
        <input
            id="nav_night"
            type="radio"
            name="rtoggle"
            value="https://tiles.goong.io/assets/navigation_night.json"
        />
        <label for="nav_night">Navigation Night</label>
    </div>
    <script>
        goongjs.accessToken = 'wnicbAmnNkoMHNYUKWnlFHezV189FjmMwkNJ7hKW';
        var map = new goongjs.Map({
            container: 'map', // container ID
            style: 'https://tiles.goong.io/assets/goong_map_web.json', // style URL
            center: [105.85315, 21.03194], // starting position [lng, lat]
            zoom: 13 // starting zoom
        });

        var layerList = document.getElementById('menu');
        var inputs = layerList.getElementsByTagName('input');

        function switchLayer(layer) {
            var styleURL = layer.target.value;
            map.setStyle(styleURL);
        }

        for (var i = 0; i < inputs.length; i++) {
            inputs[i].onclick = switchLayer;
        }
    </script>
</body>