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({ var map = new maplibregl.Map({
container: 'map', container: 'map',
style: 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], center: [0, 0],
zoom: 1, zoom: 1,
}); });
map.on('load', function () { map.on('load', function () {
map.addSource('earthquakes', { map.addSource('local_osm_groups', {
type: 'geojson', type: 'geojson',
data: geojsonData, data: geojsonData,
cluster: true, cluster: true,
@ -466,7 +466,7 @@
map.addLayer({ map.addLayer({
id: 'clusters', id: 'clusters',
type: 'circle', type: 'circle',
source: 'earthquakes', source: 'local_osm_groups',
// filter: ['has', 'point_count'], // filter: ['has', 'point_count'],
paint: { paint: {
// Use step expressions (https://maplibre.org/maplibre-style-spec/#expressions-step) // Use step expressions (https://maplibre.org/maplibre-style-spec/#expressions-step)
@ -477,11 +477,11 @@
'circle-color': [ 'circle-color': [
'step', 'step',
['get', 'point_count'], ['get', 'point_count'],
'#51bbd6', '#ff1818',
1, 1,
'#f1f075', '#f1ab75',
40, 40,
'#f28cb1' '#ffadcb'
], ],
'circle-radius': [ 'circle-radius': [
'step', 'step',
@ -498,7 +498,7 @@
map.addLayer({ map.addLayer({
id: 'cluster-count', id: 'cluster-count',
type: 'symbol', type: 'symbol',
source: 'earthquakes', source: 'local_osm_groups',
filter: ['has', 'point_count'], filter: ['has', 'point_count'],
layout: { layout: {
'text-field': '{point_count_abbreviated}', 'text-field': '{point_count_abbreviated}',
@ -510,7 +510,7 @@
map.addLayer({ map.addLayer({
id: 'unclustered-point', id: 'unclustered-point',
type: 'circle', type: 'circle',
source: 'earthquakes', source: 'local_osm_groups',
filter: ['!', ['has', 'point_count']], filter: ['!', ['has', 'point_count']],
paint: { paint: {
'circle-color': '#11b4da', 'circle-color': '#11b4da',
@ -526,7 +526,7 @@
layers: ['clusters'] layers: ['clusters']
}); });
var clusterId = features[0].properties.cluster_id; var clusterId = features[0].properties.cluster_id;
map.getSource('earthquakes').getClusterExpansionZoom( map.getSource('local_osm_groups').getClusterExpansionZoom(
clusterId, clusterId,
function (err, zoom) { function (err, zoom) {
if (err) return; if (err) return;
@ -562,6 +562,7 @@
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
} }
console.log('coordinates', coordinates)
new maplibregl.Popup() new maplibregl.Popup()
.setLngLat(coordinates) .setLngLat(coordinates)
.setHTML( .setHTML(
@ -583,6 +584,38 @@
map.getCanvas().style.cursor = ''; 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
);
});
}); });