index.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>PruneCluster - Realworld 50k</title>

    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi"/>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
            crossorigin=""></script>
    <link rel="stylesheet" href="examples.css"/>
<!--    <script src="dist/leaflet-clustering.umd.js"></script>-->

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

<script type="module">
    // import {PruneClusterForLeaflet} from 'dist/';
    import {LeafletAdapter, VirtualMarker} from "./dist/leaflet-clustering.mjs";
    document.addEventListener('DOMContentLoaded',(event)=>{
        console.log('Page Loaded: Mounting components.');
        const map = L.map("map", {
            attributionControl: false,
            zoomControl: false
        }).setView(new L.LatLng(59.911111, 10.752778), 8);

        L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            detectRetina: true,
            maxNativeZoom: 17
        }).addTo(map);

        console.log('Map Loaded');

        const leafletView = new LeafletAdapter();
        leafletView.onAdd(map);
        console.log('PruneClusterForLeaflet Loaded & added to map');
        const size = 150000;
        const markers = []; //Array of ClusterMarker

        console.log('Adding Markers');
        for (let i = 0; i < size; ++i) {
            const marker = new VirtualMarker(
                59.91111 + (Math.random() - 0.5) * Math.random() * 0.00001 * size,
                10.752778 + (Math.random() - 0.5) * Math.random() * 0.00002 * size
            );

            markers.push(marker);
            leafletView.RegisterMarker(marker);
        }

        console.log(`Added ${size} Markers to map.`);
        console.log('Processing View');
        leafletView.ProcessView();


        window.setInterval(() => {
            for (let i = 0; i < size / 2; ++i) {
                const coef = i < size / 8 ? 10 : 1;
                markers[i].position = {
                    ...markers[i].position,
                    lat: markers[i].position.lat + (Math.random() - 0.5) * 0.00001 * coef,
                    lng: markers[i].position.lng + (Math.random() - 0.5) * 0.00002 * coef
                };
                // const ll = markers[i].position;
                // ll.lat += (Math.random() - 0.5) * 0.00001 * coef;
                // ll.lng += (Math.random() - 0.5) * 0.00002 * coef;
            }

            leafletView.ProcessView();
        }, 3000);
    });


</script>
</body>
</html>