Ajout des calques de points sur les pages poi

2026-10-20 19:19:43 +02:00
1 parent 6db6090f66
commit 32e8804a5b
@@ -32,23 +32,17 @@
 		    var root = "<?=$config['rel_root_folder']?>";

 		    // POI icons
-		    window.poi_icons = {
-		        <?php foreach($poi_types as $type) { ?>
-		            "<?=$type[3]?>": "<?=$config['views_url']?>img/<?=$type[3]?>.svg",
-		        <?php } ?>
-		        "default": "<?=$config['views_url']?>img/default.svg"
-		    };
-		    
-		    window.poi_style_map = {
-		        <?php foreach($poi_types as $k => $t) {
-		            $color = isset($t[2]) ? $t[2] : '#ef2929';
-		            // Read size/shape from structure if provided, else fallback to sensible defaults
-		            $size = isset($t[6]) ? (int)$t[6] : 16;
-		            $shape = isset($t[7]) ? $t[7] : 'square';
-		        ?>
-		            "<?=$k?>": { color: "<?=$color?>", size: <?=$size?>, shape: "<?=$shape?>" },
-		        <?php } ?>
-		    };
+			window.poi_style_map = {
+				<?php foreach($poi_types as $k => $t) {
+					$color = isset($t[2]) ? $t[2] : '#ef2929';
+					$size = isset($t[6]) ? (int)$t[6] : 16;
+					$shape = isset($t[7]) ? $t[7] : 'square';
+					$icon = isset($t[3]) ? $config['views_url']."img/".$t[3].".svg" : $config['views_url']."img/default.svg";
+				?>
+					"<?=$k?>": { color: "<?=$color?>", size: <?=$size?>, shape: "<?=$shape?>", icon: "<?=$icon?>" },
+				<?php } ?>
+					"default": { color: "#ef2929", size: 16, shape: "square", icon: "<?=$config['views_url']?>img/default.svg" }
+			};
 		</script>

 	</body>
@@ -44,16 +44,16 @@
 					<!-- Type selector -->
 					<div class="flex_line" id="type_selector">
 						<?php foreach($poi_types as $type) { ?>
-						    <input type="radio" name="poi_type" value="<?=$type[3]?>" id="<?=$type[3]?>" required
-						           <?=$poi->poi_type == $type[3] ? 'checked' : ''?>>
-						    <label for="<?=$type[3]?>"><img src="<?=$config['views_url']?>img/<?=$type[3]?>.svg"><br><?=$type[0]?></label>
+							<input type="radio" name="poi_type" value="<?=$type[3]?>" id="<?=$type[3]?>" required
+								   <?=$poi->poi_type == $type[3] ? 'checked' : ''?>>
+							<label for="<?=$type[3]?>"><img src="<?=$config['views_url']?>img/<?=$type[3]?>.svg"><br><?=$type[0]?></label>
 						<?php } ?>
 					</div>

 					<!-- Dynamic form data -->
 <script type="text/javascript">
 <?php
-    $poi_params = $poi->parameters ?? new stdClass();
+	$poi_params = $poi->parameters ?? new stdClass();
 ?>

 var poi_params = <?= json_encode($poi_params) ?>;
@@ -63,133 +63,133 @@ var unsaved = false;

 // Stocke les abstracts et les squelettes de formulaire
 <?php foreach($poi_types as $type) { ?>
-    window["<?=$type[3]?>_abstract"] = "<?=$type[4]?>";
-    window["<?=$type[3]?>_jsonform"] = <?=json_encode($type[5])?>;
+	window["<?=$type[3]?>_abstract"] = "<?=$type[4]?>";
+	window["<?=$type[3]?>_jsonform"] = <?=json_encode($type[5])?>;
 <?php } ?>

 // 3 états : 0 = non, 1 = intermédiaire, 2 = oui
 function update3State(id) {
-    var input = $("input[name="+id+"]");
-    var label = $("label[for="+id+"]");
+	var input = $("input[name="+id+"]");
+	var label = $("label[for="+id+"]");

-    var v = parseInt(input.val(), 10);
+	var v = parseInt(input.val(), 10);

-    // cycle propre : 0 → 1 → 2 → 0
-    if (v === 0) v = 1;
-    else if (v === 1) v = 2;
-    else v = 0;
+	// cycle propre : 0 → 1 → 2 → 0
+	if (v === 0) v = 1;
+	else if (v === 1) v = 2;
+	else v = 0;

-    input.val(v);
+	input.val(v);

-    label.removeClass("uncheck intermediate check");
+	label.removeClass("uncheck intermediate check");

-    if (v === 0) label.addClass("uncheck");
-    if (v === 1) label.addClass("intermediate");
-    if (v === 2) label.addClass("check");
+	if (v === 0) label.addClass("uncheck");
+	if (v === 1) label.addClass("intermediate");
+	if (v === 2) label.addClass("check");

-    unsaved = true;
+	unsaved = true;
 }

 // Génère / met à jour le sous-formulaire selon le type
 function updateForm(type) {
-    $("#abstract").html(window[type + '_abstract']);
+	$("#abstract").html(window[type + '_abstract']);

-    var html_form = "";
-    var jsonform = window[type + '_jsonform'];
+	var html_form = "";
+	var jsonform = window[type + '_jsonform'];

-    $.each(jsonform, function(index, value) {
-        var prefix = index.charAt(0);
-        var existing = (poi_params && typeof poi_params[index] !== 'undefined')
-            ? poi_params[index]
-            : null;
+	$.each(jsonform, function(index, value) {
+		var prefix = index.charAt(0);
+		var existing = (poi_params && typeof poi_params[index] !== 'undefined')
+			? poi_params[index]
+			: null;

-        switch (prefix) {
-            case 'b':
-                var cls = 'intermediate';
-                var val = 1;
+		switch (prefix) {
+			case 'b':
+				var cls = 'intermediate';
+				var val = 1;

-                if (existing == 0) {
-                    cls = 'uncheck';
-                    val = 0;
-                } else if (existing == 2) {
-                    cls = 'check';
-                    val = 2;
-                } else if (existing == -1 || existing === null) {
-                    cls = 'intermediate';
-                    val = 1;
-                }
-                html_form +=
-                    '<label class="threecb ' + cls + '" for="' + index + '" onclick="update3State(\'' + index + '\')">' +
-                        value +
-                    '</label>' +
-                    '<input value="' + val + '" type="hidden" name="' + index + '" id="' + index + '"><br>';
-                break;
+				if (existing == 0) {
+					cls = 'uncheck';
+					val = 0;
+				} else if (existing == 2) {
+					cls = 'check';
+					val = 2;
+				} else if (existing == -1 || existing === null) {
+					cls = 'intermediate';
+					val = 1;
+				}
+				html_form +=
+					'<label class="threecb ' + cls + '" for="' + index + '" onclick="update3State(\'' + index + '\')">' +
+						value +
+					'</label>' +
+					'<input value="' + val + '" type="hidden" name="' + index + '" id="' + index + '"><br>';
+				break;

-            case 'n':
-                html_form +=
-                    '<div class="flex_line">' +
-                        '<label for="' + index + '">' + value + '</label>' +
-                        '<input min="0" type="number" name="' + index + '" id="' + index + '" ' +
-                            (existing !== null ? 'value="' + existing + '"' : '') +
-                        '>' +
-                    '</div>';
-                break;
+			case 'n':
+				html_form +=
+					'<div class="flex_line">' +
+						'<label for="' + index + '">' + value + '</label>' +
+						'<input min="0" type="number" name="' + index + '" id="' + index + '" ' +
+							(existing !== null ? 'value="' + existing + '"' : '') +
+						'>' +
+					'</div>';
+				break;

-            case 't':
-                html_form +=
-                    '<label for="' + index + '">' + value + '</label>' +
-                    '<textarea name="' + index + '" id="' + index + '">';
-                if (existing !== null) {
-                    html_form += String(existing)
-                        .replace(/&/g, "&amp;")
-                        .replace(/</g, "&lt;")
-                        .replace(/>/g, "&gt;");
-                }
-                html_form += '</textarea>';
-                break;
+			case 't':
+				html_form +=
+					'<label for="' + index + '">' + value + '</label>' +
+					'<textarea name="' + index + '" id="' + index + '">';
+				if (existing !== null) {
+					html_form += String(existing)
+						.replace(/&/g, "&amp;")
+						.replace(/</g, "&lt;")
+						.replace(/>/g, "&gt;");
+				}
+				html_form += '</textarea>';
+				break;

-            case 'l':
-                html_form +=
-                    '<div class="flex_line">' +
-                        '<label for="' + index + '">' + value + '</label>' +
-                        '<input placeholder="https://" type="url" name="' + index + '" id="' + index + '" ' +
-                            (existing ? 'value="' + existing + '"' : '') +
-                        '>' +
-                    '</div>';
-                break;
+			case 'l':
+				html_form +=
+					'<div class="flex_line">' +
+						'<label for="' + index + '">' + value + '</label>' +
+						'<input placeholder="https://" type="url" name="' + index + '" id="' + index + '" ' +
+							(existing ? 'value="' + existing + '"' : '') +
+						'>' +
+					'</div>';
+				break;

-            default:
-                console.log("ERROR: " + index + "'s type is not known");
-        }
-    });
+			default:
+				console.log("ERROR: " + index + "'s type is not known");
+		}
+	});

-    $("#specific_form").html(html_form);
+	$("#specific_form").html(html_form);

-    unsaved = false;
-    $("#specific_form :input").change(function(){
-        unsaved = true;
-    });
+	unsaved = false;
+	$("#specific_form :input").change(function(){
+		unsaved = true;
+	});
 }

 $(document).ready(function(){
 		// Au chargement : générer le formulaire du type actuel
-    if (current_poi_type) {
-        updateForm(current_poi_type);
-    }
+	if (current_poi_type) {
+		updateForm(current_poi_type);
+	}
 		unsaved = !is_new;

 		$('#type_selector label').click(function(){

-		    if (unsaved === true) {
-		        if (!confirm("Des changements ont été apportés et vont être supprimés, voulez-vous continuer ?")) {
-		            return false;
-		        }
-		    }
+			if (unsaved === true) {
+				if (!confirm("Des changements ont été apportés et vont être supprimés, voulez-vous continuer ?")) {
+					return false;
+				}
+			}

-		    const type = $(this).attr("for"); // robuste
-		    current_poi_type = type;
+			const type = $(this).attr("for"); // robuste
+			current_poi_type = type;

-		    updateForm(type);
+			updateForm(type);
 		});
 });
 </script>
@@ -240,6 +240,19 @@ $( "#name" ).change(function() {
 				var poi_type = "<?=$poi->poi_type?>";
 				var is_new = <?= isset($new) && $new == 1 ? "true" : "false" ?>;
 				var root = "<?=$config['rel_root_folder']?>";
+
+			    // POI icons
+				window.poi_style_map = {
+					<?php foreach($poi_types as $k => $t) {
+						$color = isset($t[2]) ? $t[2] : '#ef2929';
+						$size = isset($t[6]) ? (int)$t[6] : 16;
+						$shape = isset($t[7]) ? $t[7] : 'square';
+						$icon = isset($t[3]) ? $config['views_url']."img/".$t[3].".svg" : $config['views_url']."img/default.svg";
+					?>
+						"<?=$k?>": { color: "<?=$color?>", size: <?=$size?>, shape: "<?=$shape?>", icon: "<?=$icon?>" },
+					<?php } ?>
+						"default": { color: "#ef2929", size: 16, shape: "square", icon: "<?=$config['views_url']?>img/default.svg" }
+				};
 			</script>


@@ -31,8 +31,8 @@
 				<h1 class="flex_line">
 					<span class="poi-icon-wrapper" data-tooltip="<?=htmlspecialchars($poi_types[$poi->poi_type][4] ?? '')?>">
 						<img class="poi-icon"
-						     src="<?=$config['rel_root_folder']?>views/img/<?=$poi->poi_type?>.svg"
-						     alt="">
+							 src="<?=$config['rel_root_folder']?>views/img/<?=$poi->poi_type?>.svg"
+							 alt="">
 					</span>
 					<span><?=$poi->name?></span>
 				</h1>
@@ -100,25 +100,25 @@
 					</span>
 				<?php } ?>

-                <br>
-                <br>
+				<br>
+				<br>

-                <?php
-                $poiFields = $poi_types[$poi->poi_type][5];
-                $poiValues = $poi->parameters ?? [];
+				<?php
+				$poiFields = $poi_types[$poi->poi_type][5];
+				$poiValues = $poi->parameters ?? [];

-                // Séparer les booléens des autres champs
-                $boolFields = [];
-                $otherFields = [];
+				// Séparer les booléens des autres champs
+				$boolFields = [];
+				$otherFields = [];

-                foreach ($poiFields as $key => $label) {
-                    if ($key[0] === 'b') {
-                        $boolFields[$key] = $label;
-                    } else {
-                        $otherFields[$key] = $label;
-                    }
-                }
-                ?>
+				foreach ($poiFields as $key => $label) {
+					if ($key[0] === 'b') {
+						$boolFields[$key] = $label;
+					} else {
+						$otherFields[$key] = $label;
+					}
+				}
+				?>

 				<div id="specific_form" class="view-mode">
 					<!-- Detail fields -->
@@ -166,13 +166,13 @@
 					?>

 						<div class="bool-grid">
-						    <?php foreach ($boolFields as $key => $label): ?>
-						        <?php $icon = $boolIcons[$poiValues[$key] ?? 2]; ?>
-						        <div class="bool-cell">
-						            <div class="bool-label"><?= $label ?></div>
-						            <div class="bool-icon"><?= $icon ?></div>
-						        </div>
-						    <?php endforeach; ?>
+							<?php foreach ($boolFields as $key => $label): ?>
+								<?php $icon = $boolIcons[$poiValues[$key] ?? 2]; ?>
+								<div class="bool-cell">
+									<div class="bool-label"><?= $label ?></div>
+									<div class="bool-icon"><?= $icon ?></div>
+								</div>
+							<?php endforeach; ?>
 						</div>
 					<?php endif; ?>
 				</div>
@@ -183,9 +183,9 @@
 						<div id="comments_photos_gallery" class="gallery">
 							<?php foreach ($poi_comments->objs as $comment) { ?>
 								<?php if (!empty($comment->photo) && $comment->is_archive != 't' && $comment->is_public != 'f') { ?>
-						            <a href="<?=$config['rel_root_folder'].'medias/comment_photos/'.$comment->photo?>">
-						            	<img src="<?=$config['rel_root_folder'].'medias/comment_photos/'.$comment->photo?>" title="<?= (mb_strlen($comment->comment) > 50 ? mb_substr($comment->comment, 0, 50) . '...' : $comment->comment) ?>">
-						            </a>
+									<a href="<?=$config['rel_root_folder'].'medias/comment_photos/'.$comment->photo?>">
+										<img src="<?=$config['rel_root_folder'].'medias/comment_photos/'.$comment->photo?>" title="<?= (mb_strlen($comment->comment) > 50 ? mb_substr($comment->comment, 0, 50) . '...' : $comment->comment) ?>">
+									</a>
 								<?php } ?>
 							<?php } ?>
 						</div>
@@ -212,7 +212,7 @@
 								<textarea id="comment" name="comment" rows="5" placeholder="Votre commentaire"></textarea>

 								<label for="photo" id="upload-btn">
-								    <i class="fas fa-file-image"></i> Ajouter une photo
+									<i class="fas fa-file-image"></i> Ajouter une photo
 								</label>
 								<input type="file" id="photo" name="photo" accept="image/*">
 							</div>
@@ -221,9 +221,9 @@

 					<script>
 					document.getElementById('photo').addEventListener('change', function() {
-					    document.getElementById('upload-btn').innerHTML = this.files.length
-					        ? "<i class='fas fa-check-square'></i> Photo sélectionnée"
-					        : "<i class='fas fa-file-image'></i> Ajouter une photo";
+						document.getElementById('upload-btn').innerHTML = this.files.length
+							? "<i class='fas fa-check-square'></i> Photo sélectionnée"
+							: "<i class='fas fa-file-image'></i> Ajouter une photo";
 					});
 					</script>

@@ -272,11 +272,11 @@
 									<div class="comment_content">
 										<?=$comment->comment_html?>

-									    <?php if (!empty($comment->photo)) { ?>
-									        <div class="comment-photo">
-									            <img src="<?=$config['rel_root_folder'].'medias/comment_photos/'.$comment->photo?>" alt="Photo du commentaire">
-									        </div>
-									    <?php } ?>
+										<?php if (!empty($comment->photo)) { ?>
+											<div class="comment-photo">
+												<img src="<?=$config['rel_root_folder'].'medias/comment_photos/'.$comment->photo?>" alt="Photo du commentaire">
+											</div>
+										<?php } ?>
 									</div>
 								</article>

@@ -300,7 +300,20 @@
 			var poi_lon = <?=$poi->lon?>;
 			var poi_type = "<?=$poi->poi_type?>";
 			var poi_mode = "view";
-            var root = "<?=$config['rel_root_folder']?>";
+			var root = "<?=$config['rel_root_folder']?>";
+
+		    // POI icons
+			window.poi_style_map = {
+				<?php foreach($poi_types as $k => $t) {
+					$color = isset($t[2]) ? $t[2] : '#ef2929';
+					$size = isset($t[6]) ? (int)$t[6] : 16;
+					$shape = isset($t[7]) ? $t[7] : 'square';
+					$icon = isset($t[3]) ? $config['views_url']."img/".$t[3].".svg" : $config['views_url']."img/default.svg";
+				?>
+					"<?=$k?>": { color: "<?=$color?>", size: <?=$size?>, shape: "<?=$shape?>", icon: "<?=$icon?>" },
+				<?php } ?>
+					"default": { color: "#ef2929", size: 16, shape: "square", icon: "<?=$config['views_url']?>img/default.svg" }
+			};
 		</script>

 		<?php if ($canViewHistory) { ?>
@@ -104,7 +104,7 @@ $(document).ready(function() {
 		return L.icon({
 			iconUrl: iconUrl,
 			iconSize: [size, size],
-			iconAnchor: [Math.floor(size / 2), size],
+			iconAnchor: [Math.floor(size / 2), Math.floor(size / 2)],
 			popupAnchor: [0, -size]
 		});
 	}
@@ -251,14 +251,21 @@ $(document).ready(function() {

 		// helper local : construit un L.Icon en fonction du type et du zoom
 		function getMarkerIconFor(type, zoom) {
-			var size = (zoom > 11) ? 32 : 24;
+		    var baseSize = 16;
+		    if (window.poi_style_map && window.poi_style_map[type] && window.poi_style_map[type].size) {
+		        baseSize = window.poi_style_map[type].size;
+		    }

-			return L.icon({
-				iconUrl: window.poi_icons[type],
-				iconSize: [size, size],
-				iconAnchor: [Math.floor(size / 2), size],
-				popupAnchor: [0, -size]
-			});
+		    var size = zoom > 11
+		        ? Math.round(baseSize * 2)
+		        : Math.round(baseSize * 1.5);
+
+		    return L.icon({
+		        iconUrl: window.poi_style_map[type].icon || window.poi_style_map["default"].icon,
+		        iconSize: [size, size],
+		        iconAnchor: [Math.floor(size / 2), Math.floor(size / 2)],
+		        popupAnchor: [0, -size]
+		    });
 		}

 		$.getJSON(
@@ -1,40 +1,131 @@
 // Carte des POIs et marqueur principal.
 var mymap;
 var poi_layer;
+var poiApiLayer;

 $(document).ready(function() {
    // Mode : edit (formulaire) ou view (affichage)
    var isEdit = (typeof poi_mode === "undefined" || poi_mode === "edit");

-    // Différentes couches pour la carte.
+    // ---------------------------------------------------------
+    // Fonds de carte
+    // ---------------------------------------------------------
    var topo_maptiler = L.tileLayer(
        'https://api.maptiler.com/maps/topographique/{z}/{x}/{y}.png?key=Sm8M7mJ53GtYdl773rpi',
        {
            tms: false,
-            attribution: 'Carte © <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a>, Données © <a href="http://www.openstreetmap.org/copyright" target="_blank">Contributeurs OpenStreetMap</a>',
+            attribution: 'Carte © <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a>, Données © <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
            tileSize: 512,
            zoomOffset: -1,
            minZoom: 1
        }
    );
+
    var ign = L.tileLayer(
-        'https://data.geopf.fr/private/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/jpeg&LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&apikey=ign_scan_ws',
+        'https://data.geopf.fr/private/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/jpeg&LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
        {
            attribution: 'Carte & Connées © <a href="http://ign.fr/" target="_blank">IGN-F/Géoportail</a>'
        }
    );
-    // Couches de base.
+
    var baseLayers = {
        "OpenStreetMap": topo_maptiler,
        "IGN France": ign
    };

+    // ---------------------------------------------------------
+    // Carte
+    // ---------------------------------------------------------
    mymap = L.map('mapid', {
        zoomControl: false,
-        layers: [topo_maptiler]
+        layers: [topo_maptiler],
+        minZoom: 10
    }).setView([47, 3], 6);
+
    $("#map-credits").html(topo_maptiler.getAttribution());

+    // ---------------------------------------------------------
+    // Icônes / markers issus de poi/api_bbox
+    // ---------------------------------------------------------
+    function getMarkerIconFor(type, zoom) {
+        var baseSize = 16;
+        if (window.poi_style_map && window.poi_style_map[type] && window.poi_style_map[type].size) {
+            baseSize = window.poi_style_map[type].size;
+        }
+
+        var size = zoom > 11
+            ? Math.round(baseSize * 2)
+            : Math.round(baseSize * 1.5);
+
+        return L.icon({
+            iconUrl: window.poi_style_map[type].icon || window.poi_style_map["default"].icon,
+            iconSize: [size, size],
+            iconAnchor: [Math.floor(size / 2), Math.floor(size / 2)],
+            popupAnchor: [0, -size]
+        });
+    }
+
+    function refreshPoiApiLayer() {
+        var b = mymap.getBounds();
+
+        $.getJSON(
+            root + "poi/api_bbox",
+            {
+                north: b.getNorth(),
+                south: b.getSouth(),
+                east: b.getEast(),
+                west: b.getWest()
+            },
+            function(pois) {
+                if (poiApiLayer) {
+                    mymap.removeLayer(poiApiLayer);
+                }
+
+                poiApiLayer = L.layerGroup();
+
+                const pathParts = window.location.pathname.split('/');
+                const poiIndex = pathParts.indexOf('poi');
+                const currentPermalink = (poiIndex !== -1 && pathParts[poiIndex + 1])
+                    ? decodeURIComponent(pathParts[poiIndex + 1])
+                    : null;
+
+                pois.forEach(function(poi) {
+                    if (currentPermalink && poi.permalink === currentPermalink) {
+                        return; // ne pas afficher le POI courant
+                    }
+
+                    var markerIcon = getMarkerIconFor(poi.type, mymap.getZoom());
+
+                    var marker = L.marker(
+                        [poi.lat, poi.lon],
+                        { icon: markerIcon }
+                    );
+
+                    marker.bindTooltip(
+                        poi.name,
+                        {
+                            direction: "top",
+                            offset: [0, -10],
+                            opacity: 0.9,
+                            className: "poi-tooltip"
+                        }
+                    );
+
+                    marker.on("click", function() {
+                        window.location = root + "poi/" + poi.permalink;
+                    });
+
+                    poiApiLayer.addLayer(marker);
+                });
+
+                poiApiLayer.addTo(mymap);
+            }
+        );
+    }
+
+    // ---------------------------------------------------------
+    // Contrôles
+    // ---------------------------------------------------------
    L.control.scale({
        position: "bottomleft",
        imperial: false
@@ -70,22 +161,28 @@ $(document).ready(function() {
        poiicon = L.icon({
            iconSize: [24, 24],
            iconAnchor: [12, 12],
- 			iconUrl: root + "views/img/" + poi_type + ".svg"
-         });
+            iconUrl: root + "views/img/" + poi_type + ".svg"
+        });
    }

    if (poiicon) {
-        poi_layer = L.marker([startLat, startLon], {draggable: isEdit, icon: poiicon}).addTo(mymap);
+        poi_layer = L.marker([startLat, startLon], { draggable: isEdit, icon: poiicon }).addTo(mymap);
    } else {
-        poi_layer = L.marker([startLat, startLon], {draggable: isEdit}).addTo(mymap);
+        poi_layer = L.marker([startLat, startLon], { draggable: isEdit }).addTo(mymap);
    }

    if (isEdit) {
-        // Mise à jour des coordonnées à chaque déplacement.
-        poi_layer.bindTooltip("Glissez moi au bon endroit.", {permanent: true, direction: 'auto'}).openTooltip();
+        poi_layer.bindTooltip("Glissez moi au bon endroit.", { permanent: true, direction: 'auto' }).openTooltip();
    }

+    // Centrage sur la cabane actuelle
+    if (typeof poi_lat !== "undefined" && typeof poi_lon !== "undefined") {
+        mymap.setView([poi_lat, poi_lon], 14);
+    }
+
+    // ---------------------------------------------------------
    // Interactions uniquement en mode édition
+    // ---------------------------------------------------------
    if (isEdit) {
        mymap.on('click', function(e){
            poi_layer.setLatLng(e.latlng);
@@ -98,8 +195,7 @@ $(document).ready(function() {
            $("#elevation_icon").show();
        });

-        // Si l'utilisateur modifie les champs lat/lon manuellement.
-        $("#lat,#lon").change(function() { // If the user changes the lat/lon input values manualy
+        $("#lat,#lon").change(function() {
            if(isNaN($("#lat").val()) || isNaN($("#lon").val()) || $("#lat").val().length==0 || $("#lon").val()==null)
                $("#elevation_icon").hide();
            else {
@@ -119,7 +215,6 @@ $(document).ready(function() {
            poi_layer.setIcon(editPoiIcon);
        });

-        // Chargement de l'altitude via le proxy.
        $("#elevation_icon").click(function(e) {
            $(this).find($(".fas")).removeClass('fa-search-location').addClass('fa-spinner').addClass('fa-spin');
            $.get(root+"poi/elevation_proxy", {location:$("#lat").val()+","+$("#lon").val()}, function(result){
@@ -127,10 +222,22 @@ $(document).ready(function() {
                $("#elevation_icon").find($(".fas")).removeClass('fa-spinner').removeClass('fa-spin').addClass('fa-search-location');
            });
        });
-    } else {
-        // Mode affichage : centrer sur le POI si coordonnées présentes
-        if (typeof poi_lat !== "undefined" && typeof poi_lon !== "undefined") {
-            mymap.setView([poi_lat, poi_lon], 14);
-        }
    }
-});
+
+    // ---------------------------------------------------------
+    // Rechargement du calque depuis poi/api_bbox
+    // ---------------------------------------------------------
+    mymap.on("zoomend", function() {
+        if (mymap.getZoom() >= 10) {
+            refreshPoiApiLayer();
+        }
+    });
+
+    mymap.on("moveend", function() {
+        if (mymap.getZoom() >= 10) {
+            refreshPoiApiLayer();
+        }
+    });
+
+    refreshPoiApiLayer();
+});