style osmose dashboard
This commit is contained in:
Tykayn
tykayn
parent
684bf1da66
commit
e715d66020
2 changed files with 74 additions and 103 deletions
|
|
@ -2588,8 +2588,8 @@ final class AdminController extends AbstractController
|
|||
if ($this->isPointInCity($issue['lat'], $issue['lon'], $lat, $lon, 10)) {
|
||||
$issues[] = [
|
||||
'id' => $issue['id'] ?? '',
|
||||
'title' => $issue['title'] ?? 'Problème sans titre',
|
||||
'subtitle' => $issue['subtitle'] ?? '',
|
||||
'title' => $issue['properties']['title'] ?? 'Problème sans titre',
|
||||
'subtitle' => $issue['properties']['subtitle'] ?? '',
|
||||
'lat' => $issue['lat'],
|
||||
'lon' => $issue['lon'],
|
||||
'item' => $issue['item'] ?? '',
|
||||
|
|
|
|||
|
|
@ -5,10 +5,18 @@
|
|||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<style>
|
||||
|
||||
.maplibregl-ctrl-group button{
|
||||
padding: 1.5rem;
|
||||
|
||||
}
|
||||
.maplibregl-popup{
|
||||
z-index: 100;
|
||||
}
|
||||
#map {
|
||||
height: 70vh;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 430px;
|
||||
}
|
||||
.filters {
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -36,24 +44,7 @@
|
|||
.issue-item.level-3 {
|
||||
border-left-color: #ffc107; /* Jaune pour les avertissements */
|
||||
}
|
||||
.marker-cluster-small {
|
||||
background-color: rgba(181, 226, 140, 0.6);
|
||||
}
|
||||
.marker-cluster-small div {
|
||||
background-color: rgba(110, 204, 57, 0.6);
|
||||
}
|
||||
.marker-cluster-medium {
|
||||
background-color: rgba(241, 211, 87, 0.6);
|
||||
}
|
||||
.marker-cluster-medium div {
|
||||
background-color: rgba(240, 194, 12, 0.6);
|
||||
}
|
||||
.marker-cluster-large {
|
||||
background-color: rgba(253, 156, 115, 0.6);
|
||||
}
|
||||
.marker-cluster-large div {
|
||||
background-color: rgba(241, 128, 23, 0.6);
|
||||
}
|
||||
/* Styles de clustering supprimés car le clustering est désactivé */
|
||||
.marker-level-1 {
|
||||
background-color: #dc3545;
|
||||
border-radius: 50%;
|
||||
|
|
@ -324,58 +315,16 @@
|
|||
type: 'FeatureCollection',
|
||||
features: features
|
||||
},
|
||||
cluster: true,
|
||||
clusterMaxZoom: 14,
|
||||
clusterRadius: 50
|
||||
cluster: false // Désactiver le clustering comme demandé
|
||||
});
|
||||
|
||||
// Ajouter une couche pour les clusters
|
||||
// Avec le clustering désactivé, nous n'avons plus besoin des couches de clusters
|
||||
|
||||
// Ajouter une couche pour les points (sans filtre de clustering puisqu'il est désactivé)
|
||||
map.addLayer({
|
||||
id: 'clusters',
|
||||
id: 'point',
|
||||
type: 'circle',
|
||||
source: 'issues',
|
||||
filter: ['has', 'point_count'],
|
||||
paint: {
|
||||
'circle-color': [
|
||||
'step',
|
||||
['get', 'point_count'],
|
||||
'rgba(181, 226, 140, 0.6)',
|
||||
10,
|
||||
'rgba(241, 211, 87, 0.6)',
|
||||
30,
|
||||
'rgba(253, 156, 115, 0.6)'
|
||||
],
|
||||
'circle-radius': [
|
||||
'step',
|
||||
['get', 'point_count'],
|
||||
20,
|
||||
10,
|
||||
30,
|
||||
30,
|
||||
40
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// Ajouter une couche pour le nombre de points dans chaque cluster
|
||||
map.addLayer({
|
||||
id: 'cluster-count',
|
||||
type: 'symbol',
|
||||
source: 'issues',
|
||||
filter: ['has', 'point_count'],
|
||||
layout: {
|
||||
'text-field': '{point_count_abbreviated}',
|
||||
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
|
||||
'text-size': 12
|
||||
}
|
||||
});
|
||||
|
||||
// Ajouter une couche pour les points individuels
|
||||
map.addLayer({
|
||||
id: 'unclustered-point',
|
||||
type: 'circle',
|
||||
source: 'issues',
|
||||
filter: ['!', ['has', 'point_count']],
|
||||
paint: {
|
||||
'circle-color': [
|
||||
'match',
|
||||
|
|
@ -391,45 +340,73 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Ajouter un événement de clic sur les clusters
|
||||
map.on('click', 'clusters', function(e) {
|
||||
const features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
|
||||
const clusterId = features[0].properties.cluster_id;
|
||||
|
||||
map.getSource('issues').getClusterExpansionZoom(clusterId, function(err, zoom) {
|
||||
if (err) return;
|
||||
|
||||
map.easeTo({
|
||||
center: features[0].geometry.coordinates,
|
||||
zoom: zoom
|
||||
});
|
||||
});
|
||||
});
|
||||
// Avec le clustering désactivé, nous n'avons plus besoin de l'événement de clic sur les clusters
|
||||
|
||||
// Ajouter un événement de clic sur les points individuels
|
||||
map.on('click', 'unclustered-point', function(e) {
|
||||
map.on('click', 'point', function(e) {
|
||||
const coordinates = e.features[0].geometry.coordinates.slice();
|
||||
const title = e.features[0].properties.title;
|
||||
const subtitle = e.features[0].properties.subtitle;
|
||||
const item = e.features[0].properties.item;
|
||||
const url = e.features[0].properties.url;
|
||||
const properties = e.features[0].properties;
|
||||
|
||||
// Créer le contenu de la popup
|
||||
// Extraire toutes les propriétés disponibles
|
||||
const id = properties.id || 'N/A';
|
||||
const title = properties.title || 'Problème sans titre';
|
||||
const subtitle = properties.subtitle || '';
|
||||
const lat = e.features[0].geometry.coordinates[1];
|
||||
const lon = e.features[0].geometry.coordinates[0];
|
||||
const item = properties.item || '';
|
||||
const itemClass = properties.class || '';
|
||||
const level = properties.level || '';
|
||||
const updateTimestamp = properties.update_timestamp ? new Date(properties.update_timestamp * 1000).toLocaleString() : 'N/A';
|
||||
const url = properties.url || '#';
|
||||
|
||||
// Créer le contenu de la popup avec toutes les propriétés
|
||||
let popupContent = `
|
||||
<h5>${title}</h5>
|
||||
<div class="popup-content" style="max-width: 300px;">
|
||||
<h5>${title}</h5>
|
||||
`;
|
||||
|
||||
if (subtitle) {
|
||||
popupContent += `<p>${subtitle}</p>`;
|
||||
popupContent += `<p class="text-muted">${subtitle}</p>`;
|
||||
}
|
||||
|
||||
// Ajouter toutes les propriétés dans un tableau
|
||||
popupContent += `
|
||||
<div>
|
||||
<span class="badge bg-secondary">Item: ${item}</span>
|
||||
</div>
|
||||
<table class="table table-sm table-bordered mt-2">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<td>${id}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Coordonnées</th>
|
||||
<td>${lat.toFixed(6)}, ${lon.toFixed(6)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<td>${item}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Classe</th>
|
||||
<td>${itemClass}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Niveau</th>
|
||||
<td>
|
||||
<span class="badge ${level == 1 ? 'bg-danger' : level == 2 ? 'bg-warning text-dark' : 'bg-info'}">
|
||||
${level == 1 ? 'Critique' : level == 2 ? 'Important' : 'Avertissement'}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Dernière mise à jour</th>
|
||||
<td>${updateTimestamp}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="mt-2">
|
||||
<a href="${url}" target="_blank" class="btn btn-sm btn-primary">Voir sur Osmose</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Assurer que si le zoom change, la popup reste à la bonne position
|
||||
|
|
@ -443,17 +420,11 @@
|
|||
.addTo(map);
|
||||
});
|
||||
|
||||
// Changer le curseur au survol des clusters et des points
|
||||
map.on('mouseenter', 'clusters', function() {
|
||||
// Changer le curseur au survol des points
|
||||
map.on('mouseenter', 'point', function() {
|
||||
map.getCanvas().style.cursor = 'pointer';
|
||||
});
|
||||
map.on('mouseleave', 'clusters', function() {
|
||||
map.getCanvas().style.cursor = '';
|
||||
});
|
||||
map.on('mouseenter', 'unclustered-point', function() {
|
||||
map.getCanvas().style.cursor = 'pointer';
|
||||
});
|
||||
map.on('mouseleave', 'unclustered-point', function() {
|
||||
map.on('mouseleave', 'point', function() {
|
||||
map.getCanvas().style.cursor = '';
|
||||
});
|
||||
|
||||
|
|
@ -467,7 +438,7 @@
|
|||
// Simuler un clic sur le point pour ouvrir la popup
|
||||
const features = map.queryRenderedFeatures(
|
||||
map.project([lon, lat]),
|
||||
{ layers: ['unclustered-point'] }
|
||||
{ layers: ['point'] }
|
||||
);
|
||||
|
||||
if (features.length > 0) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue