Bỏ qua

Tạo cụm với Leaflet

Tạo cụm với Leaflet và TrackAsia GL JS.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Create and style clusters with leaflet</title>
        <meta property="og:description" content="Extend clustering with HTML markers and custom property expressions."/>
        <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>

        <!-- Leaflet -->
        <link
            rel="stylesheet"
            href="https://unpkg.com/trackasia-leaflet@^1.9.5/dist/leaflet.css"
        />
        <script src="https://unpkg.com/trackasia-leaflet@^1.9.5/dist/leaflet.js"></script>

        <!-- leaflet marker cluster -->
        <script src="https://unpkg.com/trackasia-leaflet-markercluster@^1.5.4/dist/leaflet.markercluster.js"></script>
        <link
            href="https://unpkg.com/trackasia-leaflet-markercluster@^1.5.4/dist/MarkerCluster.css"
            rel="stylesheet"
        />
        <link
            href="https://unpkg.com/trackasia-leaflet-markercluster@^1.5.4/dist/MarkerCluster.Default.css"
            rel="stylesheet"
        />
        <!-- binding trackasia-gl for leaflet -->
        <script src="https://unpkg.com/trackasia-gl-leaflet@^0.0.21/leaflet-trackasia-gl.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <script>
            const addressPoints = [
                {
                    lng: 106.6605172,
                    lat: 10.762622,
                    title: "Title 1",
                },
                {
                    lng: 106.6604123572,
                    lat: 10.7629623522,
                    title: "Title 2",
                },
                {
                    lng: 106.660517542,
                    lat: 10.7625627542,
                    title: "Title 3",
                },
                {
                    lng: 106.660517542,
                    lat: 10.7626422,
                    title: "Title 4",
                },
                {
                    lng: 106.663054172,
                    lat: 10.76262422,
                    title: "Title 5",
                },
                {
                    lng: 106.6603172,
                    lat: 10.7624562242,
                    title: "Title 6",
                },
                {
                    lng: 106.66012472,
                    lat: 10.76262242,
                    title: "Title 7",
                },
                {
                    lng: 106.66420172,
                    lat: 10.7642425622,
                    title: "Title 8",
                },
                {
                    lng: 106.660154572,
                    lat: 10.76224622,
                    title: "Title 9",
                },
                {
                    lng: 106.66440172,
                    lat: 10.762622,
                    title: "Title 10",
                },
                {
                    lng: 106.86605172,
                    lat: 10.762622,
                    title: "Title 11",
                },
                {
                    lng: 106.86604123572,
                    lat: 10.7629623522,
                    title: "Title 12",
                },
                {
                    lng: 106.8660517542,
                    lat: 10.7625627542,
                    title: "Title 13",
                },
                {
                    lng: 106.8660517542,
                    lat: 10.7626422,
                    title: "Title 14",
                },
                {
                    lng: 106.7663054172,
                    lat: 10.86262422,
                    title: "Title 15",
                },
                {
                    lng: 106.76603172,
                    lat: 10.8624562242,
                    title: "Title 16",
                },
                {
                    lng: 106.766012472,
                    lat: 10.86262242,
                    title: "Title 17",
                },
                {
                    lng: 106.766420172,
                    lat: 10.8642425622,
                    title: "Title 18",
                },
                {
                    lng: 106.7660154572,
                    lat: 10.86224622,
                    title: "Title 19",
                },
                {
                    lng: 106.766440172,
                    lat: 10.862622,
                    title: "Title 20",
                },
            ];

            var map = L.map("map", {
                maxZoom: 17,
                zoom: 6,
                center: { lat: 10.762622, lng: 106.660172 },
            });

            L.trackasiaGL({
                style: "https://sg-maps.track-asia.com/styles/v1/streets.json?key=public_key",
            }).addTo(map);

            var markers = L.markerClusterGroup();

            for (let i = 0; i < addressPoints.length; i++) {
                let a = addressPoints[i];
                // https://leafletjs.com/reference.html#marker
                var marker = L.marker(
                    new L.latLng({ lat: a["lat"], lng: a["lng"] }),
                    {
                        title: a["title"],
                    }
                );
                marker.bindPopup(a["title"]);
                markers.addLayer(marker);
            }

            map.addLayer(markers);
        </script>
    </body>
</html>