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
+ );
+ });
+
});