');
});
MARQUEUR PERSONNALISÉ (icône différente) :
-------------------------------------------
var customIcon = L.icon({
iconUrl: 'images/mon-icone.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
});
var marker = L.marker([48.5444, 4.6317], {icon: customIcon}).addTo(map);
═══════════════════════════════════════════════════════════════════════
3. AJOUTER DES CERCLES / ZONES
═══════════════════════════════════════════════════════════════════════
CERCLE :
--------
var circle = L.circle([48.5444, 4.6317], {
color: 'red', // Couleur du contour
fillColor: '#f03', // Couleur de remplissage
fillOpacity: 0.3, // Opacité (0 à 1)
radius: 1000 // Rayon en mètres
}).addTo(map);
circle.bindPopup('Zone de 1km');
POLYGONE (zone personnalisée) :
-------------------------------
var polygon = L.polygon([
[48.5444, 4.6317],
[48.5500, 4.6400],
[48.5300, 4.6200]
], {
color: 'blue',
fillColor: '#30f',
fillOpacity: 0.2
}).addTo(map);
LIGNE / TRACÉ :
---------------
var polyline = L.polyline([
[48.5444, 4.6317],
[48.5500, 4.6400],
[48.5600, 4.6500]
], {
color: 'green',
weight: 3
}).addTo(map);
polyline.bindPopup('Chemin');
═══════════════════════════════════════════════════════════════════════
4. CHANGER LE FOND DE CARTE PAR DÉFAUT
═══════════════════════════════════════════════════════════════════════
Dans carte-finale.php, ligne ~85 :
ACTUEL :
changeMap('osm'); // OpenStreetMap par défaut
CHANGER POUR :
changeMap('satellite'); // Vue satellite par défaut
changeMap('topo'); // Carte topographique par défaut
changeMap('carto'); // CartoDB par défaut
═══════════════════════════════════════════════════════════════════════
5. MASQUER LE SÉLECTEUR DE FONDS
═══════════════════════════════════════════════════════════════════════
Si vous voulez un seul fond de carte sans sélecteur :
Dans carte-finale.php :
1. Supprimez la section HTML (lignes ~60-76) :
...
2. Supprimez le style CSS correspondant (lignes ~27-55)
3. Gardez seulement la ligne qui charge le fond que vous voulez :
changeMap('satellite');
═══════════════════════════════════════════════════════════════════════
6. CHANGER LA HAUTEUR DE LA CARTE
═══════════════════════════════════════════════════════════════════════
PLEIN ÉCRAN (actuel) :
#map { height: 100vh; }
HAUTEUR FIXE :
#map { height: 600px; }
POURCENTAGE :
#map { height: 80vh; } /* 80% de la hauteur de l'écran */
═══════════════════════════════════════════════════════════════════════
7. PERSONNALISER LES POPUPS
═══════════════════════════════════════════════════════════════════════
STYLE PERSONNALISÉ :
--------------------
marker.bindPopup(`
Lac du Der
Description du lieu
`);
POPUP AVEC VIDÉO :
------------------
marker.bindPopup(`
Vidéo
`);
═══════════════════════════════════════════════════════════════════════
8. ÉVÉNEMENTS INTERACTIFS
═══════════════════════════════════════════════════════════════════════
CLIC SUR LA CARTE :
-------------------
map.on('click', function(e) {
alert('Vous avez cliqué sur : ' + e.latlng);
// e.latlng.lat = latitude
// e.latlng.lng = longitude
});
AJOUTER UN MARQUEUR AU CLIC :
------------------------------
map.on('click', function(e) {
L.marker([e.latlng.lat, e.latlng.lng])
.addTo(map)
.bindPopup('Nouveau marqueur')
.openPopup();
});
DÉTECTER LE ZOOM :
------------------
map.on('zoomend', function() {
var zoom = map.getZoom();
console.log('Niveau de zoom : ' + zoom);
});
═══════════════════════════════════════════════════════════════════════
9. GÉOLOCALISATION DE L'UTILISATEUR
═══════════════════════════════════════════════════════════════════════
CENTRER SUR LA POSITION DE L'UTILISATEUR :
-------------------------------------------
map.locate({setView: true, maxZoom: 16});
map.on('locationfound', function(e) {
L.marker(e.latlng).addTo(map)
.bindPopup('Vous êtes ici').openPopup();
});
map.on('locationerror', function(e) {
alert('Impossible de vous localiser');
});
═══════════════════════════════════════════════════════════════════════
10. OPTIMISATIONS POUR LA PRODUCTION
═══════════════════════════════════════════════════════════════════════
Une fois que tout fonctionne :
1. Dans carte-finale.php, ligne ~10, COMMENTEZ cette ligne :
// header("Cache-Control: no-cache, no-store, must-revalidate");
2. Dans proxy-tuiles-v2.php, COMMENTEZ les lignes de debug :
// error_reporting(E_ALL);
// ini_set('display_errors', 1);
3. Supprimez ou protégez carte-proxy-debug.php (gardez-le pour debug)
4. Supprimez proxy-debug.log régulièrement (peut devenir gros)
═══════════════════════════════════════════════════════════════════════
EXEMPLES COMPLETS
═══════════════════════════════════════════════════════════════════════
CARTE AVEC 3 POINTS D'INTÉRÊT :
--------------------------------
var points = [
{lat: 48.5444, lng: 4.6317, nom: "Lac du Der", desc: "Plan d'eau"},
{lat: 48.5500, lng: 4.6400, nom: "Port", desc: "Port de plaisance"},
{lat: 48.5300, lng: 4.6200, nom: "Plage", desc: "Plage publique"}
];
points.forEach(function(pt) {
L.marker([pt.lat, pt.lng])
.addTo(map)
.bindPopup('
' + pt.nom + '
' + pt.desc + '
');
});
CARTE AVEC ZONE D'ALERTE MÉTÉO :
---------------------------------
// Zone d'alerte en rouge
var alertZone = L.circle([48.5444, 4.6317], {
color: 'red',
fillColor: '#f00',
fillOpacity: 0.2,
radius: 5000
}).addTo(map);
alertZone.bindPopup('⚠️ Zone d\'alerte météo Vent fort prévu');
═══════════════════════════════════════════════════════════════════════
RESSOURCES
═══════════════════════════════════════════════════════════════════════
Documentation officielle Leaflet :
https://leafletjs.com/reference.html
Exemples :
https://leafletjs.com/examples.html
Icônes personnalisées :
https://www.flaticon.com/
https://fontawesome.com/icons
═══════════════════════════════════════════════════════════════════════
SUPPORT
═══════════════════════════════════════════════════════════════════════
Si vous avez besoin d'aide pour :
• Ajouter une fonctionnalité spécifique
• Résoudre un problème
• Optimiser les performances
Donnez-moi :
1. Ce que vous voulez faire
2. Le code que vous avez essayé
3. L'erreur éventuelle
═══════════════════════════════════════════════════════════════════════
