From 0cc6a521fbdca16a7f7e4341272c29d8e6d9bfb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Thu, 21 Nov 2024 18:31:52 +0100
Subject: [PATCH] Updates

---
 index.html | 187 -----------------------------------------------------
 1 file changed, 187 deletions(-)
 delete mode 100644 index.html
diff --git a/index.html b/index.html
deleted file mode 100644
index 3eb89b4..0000000
--- a/index.html
+++ /dev/null
@@ -1,187 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/png" href="teritorio.png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta property="og:description"
-    content="Allow visualization and interaction with all markers, even when superposed. Can display and interact with small cluster without the need to zoom or uncluster." />
-  <title>MapLibre GL Teritorio Cluster NEW</title>
-  <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css">
-  <script type="module" src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
-  <style>
-    body {
-      display: flex;
-      flex-direction: column;
-      margin: 0;
-      padding: 0;
-    }
-
-    html,
-    body,
-    #map {
-      height: 100%;
-    }
-
-    header {
-      display: flex;
-      padding: 8px;
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <header>
-    <input id="custom-url" type="url" placeholder="GeoJSON source URL..." />
-    <button id="load-data">Load external data</button>
-    |
-    <input id="feature-id" type="text" value="us2000ahxc" />
-    <button id="select-feature">Select feature manually</button>
-  </header>
-  <div id="map"></div>
-  <script type="module">
-    import { buildCss, unfoldedClusterRenderSmart as unfoldedClusterRender, TeritorioCluster } from './maplibre-gl-teritorio-cluster.js'
-
-    let geojson;
-    let teritorioCluster;
-    const map = new maplibregl.Map({
-      hash: true,
-      container: "map",
-      style: 'https://api.maptiler.com/maps/openstreetmap/style.json?key=GIAfARJO9HDgKceZRlGv'
-    });
-
-    map.addControl(new maplibregl.NavigationControl());
-    map.on('load', async () => {
-      geojson = await fetch('https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson', { method: 'GET' }).then(res => res.json())
-
-      // add a clustered GeoJSON source for a sample set of earthquakes
-      map.addSource('earthquakes', {
-        'type': 'geojson',
-        'data': geojson,
-        'cluster': true,
-        'clusterRadius': 80,
-        'clusterMaxZoom': 22,
-        'maxzoom': 24
-      })
-
-      map.addLayer({
-        'id': 'earthquake_label',
-        'type': 'symbol',
-        'source': 'earthquakes',
-        'filter': ['!=', 'cluster', true],
-        'layout': {
-          'text-field': [
-            'number-format',
-            ['get', 'mag'],
-            { 'min-fraction-digits': 1, 'max-fraction-digits': 1 }
-          ],
-          'text-font': ['Open Sans Semibold'],
-          'text-size': 10
-        },
-        'paint': {
-          'text-color': 'white'
-        }
-      });
-
-      teritorioCluster = new TeritorioCluster(
-        map,
-        'earthquakes',
-        {
-          clusterRenderFn: clusterRender,
-          fitBoundsOptions: { padding: { top: 57, bottom: 20, left: 20, right: 20 } },
-          markerRenderFn: markerRender,
-          markerSize: 28,
-          unfoldedClusterRenderFn: unfoldedClusterRender,
-          pinMarkerRenderFn: pinMarkerRender
-        },
-      )
-
-      // Get feature click event
-      teritorioCluster.addEventListener('feature-click', (e) => {
-        console.log(e.detail.selectedFeature)
-      })
-
-      document.getElementById('load-data').addEventListener('click', loadData)
-      document.getElementById('select-feature').addEventListener('click', selectFeature)
-    })
-
-    const clusterRender = (element, props) => {
-      element.innerHTML = props.point_count.toLocaleString();
-
-      buildCss(element, {
-        'background-color': 'white',
-        'border-radius': '100%',
-        'border': '2px solid green',
-        'justify-content': 'center',
-        'align-items': 'center',
-        'display': 'flex',
-        'color': 'black',
-        'width': `60px`,
-        'height': `60px`,
-        'cursor': 'pointer'
-      });
-    }
-
-    const loadData = async () => {
-      const url = document.getElementById('custom-url').value
-
-      if (!url)
-        return
-
-      let vidoGeojson = await fetch(url, { method: 'GET' }).then(res => res.json())
-      const source = map.getSource('earthquakes')
-
-      source.setData({
-        type: 'FeatureCollection',
-        features: [...geojson.features, ...vidoGeojson.features]
-      })
-    }
-
-    const markerRender = (element, feature, markerSize) => {
-      element.textContent = feature.properties?.mag
-
-      buildCss(element, {
-        'background-color': 'green',
-        'border-radius': '100%',
-        'justify-content': 'center',
-        'align-items': 'center',
-        'display': 'flex',
-        'color': 'white',
-        'width': `${markerSize}px`,
-        'height': `${markerSize}px`,
-        'cursor': 'pointer'
-      });
-    }
-
-    const pinMarkerRender = (coords, offset) => {
-      return new maplibregl.Marker({
-        scale: 1.3,
-        color: '#f44336',
-        anchor: 'bottom'
-      })
-        .setLngLat(coords)
-        .setOffset(offset)
-    }
-
-    const selectFeature = async () => {
-      const id = document.getElementById('feature-id').value
-
-      if (!id)
-        return
-
-      const data = await map.getSource('earthquakes').getData()
-      const feature = data.features.find(feature => feature.properties.id === id)
-
-      if (!feature) {
-        console.error('Feature not found !')
-        return
-      }
-
-      teritorioCluster.setSelectedFeature(feature)
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
