osm groups list details

This commit is contained in:
Tykayn 2023-06-13 15:46:50 +02:00 committed by tykayn
parent ff24a6cd89
commit 05f971797c
1 changed files with 10 additions and 2 deletions

View File

@ -480,7 +480,7 @@
'#51bbd6', '#51bbd6',
1, 1,
'#f1f075', '#f1f075',
20, 40,
'#f28cb1' '#f28cb1'
], ],
'circle-radius': [ 'circle-radius': [
@ -546,6 +546,7 @@
map.on('click', 'unclustered-point', function (e) { map.on('click', 'unclustered-point', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice(); var coordinates = e.features[0].geometry.coordinates.slice();
var Groupe = e.features[0].properties.Groupe; var Groupe = e.features[0].properties.Groupe;
var Descriptif = e.features[0].properties.Descriptif;
var mag = e.features[0].properties.Periodicite; var mag = e.features[0].properties.Periodicite;
var addr = e.features[0].properties.Adresse; var addr = e.features[0].properties.Adresse;
var cp = e.features[0].properties.CP; var cp = e.features[0].properties.CP;
@ -556,6 +557,7 @@
// Ensure that if the map is zoomed out such that // Ensure that if the map is zoomed out such that
// multiple copies of the feature are visible, the // multiple copies of the feature are visible, the
// popup appears over the copy being pointed to. // popup appears over the copy being pointed to.
console.log('e.lngLat', e.lngLat , e)
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
} }
@ -563,7 +565,13 @@
new maplibregl.Popup() new maplibregl.Popup()
.setLngLat(coordinates) .setLngLat(coordinates)
.setHTML( .setHTML(
` <h1>${Groupe}</h1><br> rencontres: ${mag}<br> ${addr}, ${cp}, ${ville} <br> <a href="${website}">${website}</a>` ` <h1>⛯${Groupe}</h1><br>🗓️🗓️ rencontres: ${mag}<br> ${addr}, ${cp}, ${ville}
<br> <a href="${website}">🌐 ${website}</a>
<br> <a href="${e.features[0].properties.User}">👤👤 👤${e.features[0].properties.User}</a>
<hr>
<br> <blockquote>${Descriptif}</blockquote>
`
) )
.addTo(map); .addTo(map);
}); });