Bỏ qua

Các kiểu bản đồ

Các kiểu bản đồ có sẵn trong MapVina GL JS.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>List map styles</title>
    <meta property="og:description" content="Example list map styles with MapVina GL." />
    <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/mapvina-gl.css" />
    <script src="https://unpkg.com/[email protected]/dist/mapvina-gl.js"></script>
    <style>
        body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        html, body, #map { height: 100%; }

        #map-styles-wrapper {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-width: 150px;
        }

        #map-styles-wrapper h3 {
            margin: 0 0 5px 0;
            font-size: 15px;
            color: #0a2e5c;
            font-weight: 600;
        }

        .style-option {
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 8px;
            transition: background 0.2s;
            font-size: 14px;
            color: #333;
            border: 1px solid transparent;
        }

        .style-option:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        .style-option input[type="radio"] {
            display: none;
        }

        .style-option .custom-radio {
            width: 16px;
            height: 16px;
            border: 2px solid #ccc;
            border-radius: 50%;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .style-option input[type="radio"]:checked + .custom-radio {
            border-color: #4caf50;
        }

        .style-option input[type="radio"]:checked + .custom-radio::after {
            content: '';
            width: 8px;
            height: 8px;
            background: #4caf50;
            border-radius: 50%;
        }

        .style-option.active {
            background: rgba(76, 175, 80, 0.1);
            border-color: rgba(76, 175, 80, 0.3);
            font-weight: 600;
            color: #4caf50;
        }
    </style>
</head>
<body>

<div id="map"></div>
<div id="map-styles-wrapper">
    <h3>Giao diện</h3>
    <label class="style-option active">
        <input type="radio" id="night" class="map-style" name="style" checked />
        <div class="custom-radio"></div>
        Ban đêm
    </label>
    <label class="style-option">
        <input type="radio" id="streets" class="map-style" name="style" />
        <div class="custom-radio"></div>
        Đường phố
    </label>
    <label class="style-option">
        <input type="radio" id="simple" class="map-style" name="style" />
        <div class="custom-radio"></div>
        Đơn giản
    </label>
</div>

<script>
    var styles = {
        night: 'https://maps.mapvina.com/styles/v1/night.json?key=public_key',
        streets: 'https://maps.mapvina.com/styles/v2/streets.json?key=public_key',
        simple: 'https://maps.mapvina.com/styles/v1/simple.json?key=public_key'
    };

    var map = new mapvinagl.Map({
        container: 'map',
        style: styles.night,
        center: {"lat":10.762622,"lng":106.660172},
        zoom: 6
    });

    document.querySelectorAll('.map-style').forEach(function (input) {
        input.addEventListener('change', function () {
            // Update map style
            map.setStyle(styles[this.id]);

            // Update UI
            document.querySelectorAll('.style-option').forEach(el => el.classList.remove('active'));
            this.closest('.style-option').classList.add('active');
        });
    });
</script>

</body>
</html>