From 859d453b8c730c373f0d879a563482604a2e4593 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 14 Jun 2023 13:27:48 +0200
Subject: [PATCH] other style

---
 osm-local-groups-bubbles/index.html | 51 ++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/osm-local-groups-bubbles/index.html b/osm-local-groups-bubbles/index.html
index 0179d72e..605ac3c3 100644
--- a/osm-local-groups-bubbles/index.html
+++ b/osm-local-groups-bubbles/index.html
@@ -448,13 +448,13 @@
             var map = new maplibregl.Map({
                 container: 'map',
                 style:
-                    'https://api.maptiler.com/maps/positron/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
+                    'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
                 center: [0, 0],
                 zoom: 1,
             });
 
             map.on('load', function () {
-                map.addSource('earthquakes', {
+                map.addSource('local_osm_groups', {
                     type: 'geojson',
                     data: geojsonData,
                     cluster: true,
@@ -466,7 +466,7 @@
                 map.addLayer({
                     id: 'clusters',
                     type: 'circle',
-                    source: 'earthquakes',
+                    source: 'local_osm_groups',
                     // filter: ['has', 'point_count'],
                     paint: {
 // Use step expressions (https://maplibre.org/maplibre-style-spec/#expressions-step)
@@ -477,11 +477,11 @@
                         'circle-color': [
                             'step',
                             ['get', 'point_count'],
-                            '#51bbd6',
+                            '#ff1818',
                             1,
-                            '#f1f075',
+                            '#f1ab75',
                             40,
-                            '#f28cb1'
+                            '#ffadcb'
                         ],
                         'circle-radius': [
                             'step',
@@ -498,7 +498,7 @@
                 map.addLayer({
                     id: 'cluster-count',
                     type: 'symbol',
-                    source: 'earthquakes',
+                    source: 'local_osm_groups',
                     filter: ['has', 'point_count'],
                     layout: {
                         'text-field': '{point_count_abbreviated}',
@@ -510,7 +510,7 @@
                 map.addLayer({
                     id: 'unclustered-point',
                     type: 'circle',
-                    source: 'earthquakes',
+                    source: 'local_osm_groups',
                     filter: ['!', ['has', 'point_count']],
                     paint: {
                         'circle-color': '#11b4da',
@@ -526,7 +526,7 @@
                         layers: ['clusters']
                     });
                     var clusterId = features[0].properties.cluster_id;
-                    map.getSource('earthquakes').getClusterExpansionZoom(
+                    map.getSource('local_osm_groups').getClusterExpansionZoom(
                         clusterId,
                         function (err, zoom) {
                             if (err) return;
@@ -562,6 +562,7 @@
                         coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                     }
 
+                    console.log('coordinates', coordinates)
                     new maplibregl.Popup()
                         .setLngLat(coordinates)
                         .setHTML(
@@ -583,6 +584,38 @@
                     map.getCanvas().style.cursor = '';
                 });
 
+
+
+                map.on('mousemove', function (e) {
+                    var features = map.queryRenderedFeatures(e.point);
+
+// Limit the number of properties we're displaying for
+// legibility and performance
+                    var displayProperties = [
+                        'type',
+                        'properties',
+                        'id',
+                        'layer',
+                        'source',
+                        'sourceLayer',
+                        'state'
+                    ];
+
+                    var displayFeatures = features.map(function (feat) {
+                        var displayFeat = {};
+                        displayProperties.forEach(function (prop) {
+                            displayFeat[prop] = feat[prop];
+                        });
+                        return displayFeat;
+                    });
+
+                    document.getElementById('features').innerHTML = JSON.stringify(
+                        displayFeatures,
+                        null,
+                        2
+                    );
+                });
+
             });