-
+
-
+
@@ -151,6 +151,9 @@
let maplibre;
let map;
let overpassData = {}; // Stockage des données Overpass
+ let currentMarkerType = 'drop'; // Type de marqueur actuel
+ let dropMarkers = []; // Tableau pour stocker les marqueurs en goutte
+ let contextMenu = null; // Menu contextuel
function getCompletionColor(completion) {
if (completion === undefined || completion === null) {
@@ -186,28 +189,28 @@
}
function createPopupContent(element) {
- console.log("createPopupContent",element);
-
- const completion = calculateCompletion(element);
- console.log("completion", completion);
-
- let tagstable = '
Clé Valeur ';
+
+ // Ajouter tous les tags
if (element.tags) {
for (const tag in element.tags) {
- tagstable += `${tag} ${element.tags[tag]} ${tag} ${element.tags[tag]}
';
- return `
-
- ${element.tags?.name || 'Sans nom'}
-
-
- ${tagstable}
- `;
+ content += '
';
+ return content;
}
function calculateCompletionDistribution(elements) {
@@ -307,7 +310,7 @@
overpassData[element.id] = element;
});
- // Mettre à jour les cercles
+ // Mettre à jour les marqueurs
features = [];
josm_elements = [];
data.elements.forEach(element => {
@@ -316,8 +319,8 @@
if (lat && lon) {
const completion = calculateCompletion(element);
- const circle = {
- id: `circle-${element.id}`,
+ const feature = {
+ id: `marker-${element.id}`,
type: 'Feature',
properties: {
id: element.id,
@@ -330,24 +333,65 @@
coordinates: [lon, lat]
}
};
- features.push(circle);
+ features.push(feature);
josm_elements.push(element);
}
});
- // Créer les cercles sur la carte
- features.forEach(feature => {
- const layerId = `circle-${feature.properties.id}`;
- if (map.getSource(layerId)) {
- map.removeSource(layerId);
- }
- if (map.getLayer(layerId)) {
- map.removeLayer(layerId);
- }
+ // Afficher les marqueurs selon le type actuel
+ updateMarkers();
+ // Ajuster la vue pour inclure tous les points
+ const points = features.map(f => f.properties.center);
+ if (points.length > 0) {
+ const bounds = new maplibregl.LngLatBounds(points[0], points[0]);
+ points.forEach(point => bounds.extend(point));
+
+ if (bounds?._sw && bounds?._ne) {
+ map.fitBounds(bounds, {
+ padding: 50,
+ maxZoom: 15
+ });
+ } else {
+ console.warn('Bounds invalides, utilisation des coordonnées par défaut');
+ }
+ }
+
+ createCompletionChart(data.elements);
+
+ // Cacher le spinner une fois le chargement terminé
+ document.getElementById('maploader').style.display = 'none';
+
+ } catch (error) {
+ console.error('Erreur lors du chargement des lieux:', error);
+ }
+ }
+
+ function updateMarkers() {
+ // Supprimer tous les marqueurs existants
+ features.forEach(feature => {
+ const layerId = `marker-${feature.properties.id}`;
+ // Supprimer d'abord la couche
+ if (map.getLayer(layerId)) {
+ map.removeLayer(layerId);
+ }
+ // Puis supprimer la source
+ if (map.getSource(layerId)) {
+ map.removeSource(layerId);
+ }
+ });
+
+ // Supprimer tous les marqueurs en goutte existants
+ dropMarkers.forEach(marker => marker.remove());
+ dropMarkers = [];
+
+ if (currentMarkerType === 'circle') {
+ // Afficher les cercles
+ features.forEach(feature => {
+ const layerId = `marker-${feature.properties.id}`;
const circle = turf.circle(
feature.properties.center,
- 5/1000, // Rayon initial en kilomètres
+ 5/1000,
{ steps: 64, units: 'kilometers' }
);
@@ -370,14 +414,12 @@
// Ajouter les popups sur les cercles
map.on('click', function(e) {
const clickedFeatures = map.queryRenderedFeatures(e.point, {
- layers: features.map(f => `circle-${f.properties.id}`)
+ layers: features.map(f => `marker-${f.properties.id}`)
});
- console.log('Clicked features:', clickedFeatures);
-
if (clickedFeatures.length > 0) {
const feature = clickedFeatures[0];
- const elementId = feature.layer.id.replace('circle-', '');
+ const elementId = feature.layer.id.replace('marker-', '');
const element = overpassData[elementId];
if (element) {
@@ -391,31 +433,21 @@
}
}
});
-
- // Ajuster la vue pour inclure tous les points
- const points = features.map(f => f.properties.center);
- if (points.length > 0) {
- const bounds = new maplibregl.LngLatBounds(points[0], points[0]);
- points.forEach(point => bounds.extend(point));
+ } else {
+ // Afficher les marqueurs en goutte
+ features.forEach(feature => {
+ const element = overpassData[feature.properties.id];
+ const popupContent = element ? createPopupContent(element) : `
${feature.properties.name} `;
- // Vérifier que les bounds sont valides avant de les utiliser
- if (bounds?._sw && bounds?._ne) {
- map.fitBounds(bounds, {
- padding: 50,
- maxZoom: 15
- });
- } else {
- console.warn('Bounds invalides, utilisation des coordonnées par défaut');
- }
- }
-
- createCompletionChart(data.elements);
-
- // Cacher le spinner une fois le chargement terminé
- document.getElementById('maploader').style.display = 'none';
-
- } catch (error) {
- console.error('Erreur lors du chargement des lieux:', error);
+ const marker = new maplibregl.Marker({
+ color: getCompletionColor(feature.properties.completion)
+ })
+ .setLngLat(feature.properties.center)
+ .setPopup(new maplibregl.Popup({ offset: 25 })
+ .setHTML(popupContent))
+ .addTo(map);
+ dropMarkers.push(marker);
+ });
}
}
@@ -531,16 +563,112 @@
});
map = maplibre;
+ // Créer le menu contextuel
+ contextMenu = document.createElement('div');
+ contextMenu.id = 'context-menu';
+ contextMenu.style.display = 'none';
+ contextMenu.style.position = 'absolute';
+ contextMenu.style.backgroundColor = 'white';
+ contextMenu.style.border = '1px solid #ccc';
+ contextMenu.style.padding = '10px';
+ contextMenu.style.borderRadius = '4px';
+ contextMenu.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
+ contextMenu.style.zIndex = '1000';
+ document.body.appendChild(contextMenu);
+
+ // Gestionnaire de clic droit sur la carte
+ map.on('contextmenu', async function(e) {
+ e.preventDefault();
+
+ // Vérifier si le clic est sur un marqueur
+ const clickedFeatures = map.queryRenderedFeatures(e.point, {
+ layers: features.map(f => `marker-${f.properties.id}`)
+ });
+
+ if (clickedFeatures.length > 0) {
+ return; // Ne rien faire si on clique sur un marqueur
+ }
+
+ // Afficher le menu contextuel
+ contextMenu.style.display = 'block';
+
+ // Obtenir la position de la carte dans la page
+ const mapContainer = map.getContainer();
+ const mapRect = mapContainer.getBoundingClientRect();
+
+ // Calculer la position relative au conteneur de la carte
+ const x = e.point.x + mapRect.left;
+ const y = e.point.y + mapRect.top;
+
+ // Positionner le menu contextuel
+ contextMenu.style.left = `${x}px`;
+ contextMenu.style.top = `${y}px`;
+
+ contextMenu.innerHTML = '
Recherche du code INSEE...';
+
+ try {
+ // Récupérer les coordonnées du clic
+ const { lng, lat } = e.lngLat;
+
+ // Appeler l'API pour obtenir le code INSEE
+ const response = await fetch(`https://api-adresse.data.gouv.fr/reverse/?lon=${lng}&lat=${lat}`);
+ const data = await response.json();
+
+ if (data.features && data.features.length > 0) {
+ const feature = data.features[0];
+ const city = feature.properties.city;
+ const inseeCode = feature.properties.citycode;
+
+ contextMenu.innerHTML = `
+
+ Ville : ${city}Code INSEE : ${inseeCode}
+
+
+
+ `;
+ } else {
+ contextMenu.innerHTML = 'Aucune information trouvée pour cette position';
+ }
+ } catch (error) {
+ console.error('Erreur lors de la recherche du code INSEE:', error);
+ contextMenu.innerHTML = 'Erreur lors de la recherche du code INSEE';
+ }
+ });
+
+ // Fermer le menu contextuel lors d'un clic ailleurs
+ document.addEventListener('click', function(e) {
+ if (contextMenu && !contextMenu.contains(e.target)) {
+ contextMenu.style.display = 'none';
+ }
+ });
+
+ // Gestionnaires d'événements pour les boutons de type de marqueur
+ document.getElementById('circleMarkersBtn').addEventListener('click', function() {
+ currentMarkerType = 'circle';
+ this.classList.add('active');
+ document.getElementById('dropMarkersBtn').classList.remove('active');
+ updateMarkers();
+ });
+
+ document.getElementById('dropMarkersBtn').addEventListener('click', function() {
+ currentMarkerType = 'drop';
+ this.classList.add('active');
+ document.getElementById('circleMarkersBtn').classList.remove('active');
+ updateMarkers();
+ });
+
document.getElementById('openInJOSM').addEventListener('click', openInJOSM);
// Attendre que la carte soit chargée avant d'ajouter les écouteurs d'événements
map.on('load', function() {
console.log('Map loaded');
map_is_loaded = true;
- // Changer le curseur au survol des cercles
+ // Changer le curseur au survol des marqueurs
map.on('mouseenter', function(e) {
const hoveredFeatures = map.queryRenderedFeatures(e.point, {
- layers: features.map(f => f.id)
+ layers: features.map(f => `marker-${f.properties.id}`)
});
if (hoveredFeatures.length > 0) {
map.getCanvas().style.cursor = 'pointer';
@@ -549,7 +677,7 @@
map.on('mouseleave', function(e) {
const hoveredFeatures = map.queryRenderedFeatures(e.point, {
- layers: features.map(f => f.id)
+ layers: features.map(f => `marker-${f.properties.id}`)
});
if (hoveredFeatures.length === 0) {
map.getCanvas().style.cursor = '';
diff --git a/templates/admin/stats/table-head.html.twig b/templates/admin/stats/table-head.html.twig
index add9a29..473ba85 100644
--- a/templates/admin/stats/table-head.html.twig
+++ b/templates/admin/stats/table-head.html.twig
@@ -15,11 +15,11 @@
Site web ({{ stats.getAvecSite() }} / {{ stats.places|length }})
diff --git a/templates/public/edit.html.twig b/templates/public/edit.html.twig
index 0caf512..e8cf7a2 100644
--- a/templates/public/edit.html.twig
+++ b/templates/public/edit.html.twig
@@ -5,6 +5,11 @@
{% block body %}
+
+
+ {{ dump(commerce_overpass) }}
+
+
{{ 'display.welcome'|trans }} {{ commerce_overpass.tags_converted.name }}
@@ -175,7 +180,7 @@
{% endblock %}
{% block javascripts %}
{{ parent() }}
-
+
{% endblock %}
\ No newline at end of file
diff --git a/templates/public/view.html.twig b/templates/public/view.html.twig
index d5e24bf..c73df0b 100644
--- a/templates/public/view.html.twig
+++ b/templates/public/view.html.twig
@@ -60,7 +60,7 @@
{{ parent() }}
{% endblock %}