tykayn/scripts
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

other style

Browse Source
This commit is contained in:
Tykayn 2023-06-14 13:27:48 +02:00 committed by tykayn
parent 05f971797c
commit 859d453b8c
1 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
osm-local-groups-bubbles/index.html
View File

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