Merge branch 'master' of https://forge.chapril.org/tykayn/scripts
This commit is contained in:
commit
44b4a40493
@ -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
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user