From 860f1077aafe6904db7f78d927004de8645a2f52 Mon Sep 17 00:00:00 2001
From: leosw <leo@lstronic.com>
Date: Sun, 18 Oct 2026 17:14:26 +0200
Subject: [PATCH] =?UTF-8?q?Les=20pois=20sont=20affich=C3=A9s=20correctemen?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/views/css/d.map.css |  6 +++++
 public/views/js/d.map.js   | 47 ++++++++++++++++++++------------------
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/public/views/css/d.map.css b/public/views/css/d.map.css
index 136876e..0707982 100755
--- a/public/views/css/d.map.css
+++ b/public/views/css/d.map.css
@@ -210,4 +210,10 @@ footer {
 
 .leaflet-fullscreen-on .easy-button-container {
 	display: none;
+}
+
+/* Map PBF tiles overflow of icons */
+
+.leaflet-container .leaflet-tile{
+	overflow: visible !important;
 }
\ No newline at end of file
diff --git a/public/views/js/d.map.js b/public/views/js/d.map.js
index cbb7dc7..916e93d 100755
--- a/public/views/js/d.map.js
+++ b/public/views/js/d.map.js
@@ -51,33 +51,36 @@ $(document).ready(function() {
 	// Styles des POIs pour les vector tiles
 	// ---------------------------------------------------------
 
-	function svgDataUriFor(color, size, shape) {
-		var width = size;
-		var height = size;
-		var svg = "";
+	// Fonction qui génère le SVG du point pour les calques en pbf
+	function svgDataUriFor(color, size, shape, strokeOpacity = 0.2) {
+	  const w = size, h = size, strokeWidth = 1, r = Math.max(1, Math.round(size * 0.15));
+	  const inset = 2 + strokeWidth / 2, innerW = w - inset * 2, innerH = h - inset * 2;
+	  let shapeSvg;
 
-		if (shape === "triangle") {
-			svg =
-				"<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "' viewBox='0 0 " + width + " " + height + "'>" +
-				"<polygon points='" + (width / 2) + ",2 " + (width - 2) + "," + (height - 2) + " 2," + (height - 2) + "' fill='" + color + "'/>" +
-				"</svg>";
-		} else {
-			svg =
-				"<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "' viewBox='0 0 " + width + " " + height + "'>" +
-				"<rect x='2' y='2' width='" + (width - 4) + "' height='" + (height - 4) + "' fill='" + color + "'/>" +
-				"</svg>";
-		}
+	  if (shape === 'triangle') {
+	    const p1 = `${w/2},${inset}`, p2 = `${w-inset},${h-inset}`, p3 = `${inset},${h-inset}`, points = `${p1} ${p2} ${p3}`;
+	    shapeSvg = `<g>
+	      <polygon points='${points}' fill='${color}' stroke='none'/>
+	      <polygon points='${points}' fill='none' stroke='#fff' stroke-opacity='${strokeOpacity}' stroke-width='${strokeWidth}' stroke-linejoin='round'/>
+	    </g>`;
+	  } else {
+	    shapeSvg = `<g>
+	      <rect x='${inset}' y='${inset}' rx='${r}' ry='${r}' width='${innerW}' height='${innerH}' fill='${color}' stroke='none'/>
+	      <rect x='${inset}' y='${inset}' rx='${r}' ry='${r}' width='${innerW}' height='${innerH}' fill='none' stroke='#fff' stroke-opacity='${strokeOpacity}' stroke-width='${strokeWidth}' stroke-linejoin='round'/>
+	    </g>`;
+	  }
 
-		return "data:image/svg+xml;utf8," + encodeURIComponent(svg);
+	  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${w}' height='${h}' viewBox='0 0 ${w} ${h}'>${shapeSvg}</svg>`;
+	  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
 	}
 
 	var poiStyleMap = {
-		"wilderness_hut": { color: "#d73a3a", size: 12, shape: "square" },
-		"basic_hut":     { color: "#d73a3a", size: 8,  shape: "square" },
-		"alpine_hut":    { color: "#d73a3a", size: 16, shape: "square" },
-		"halt":          { color: "#4caf50", size: 16, shape: "square" },
-		"bivouac":       { color: "#d73a3a", size: 12, shape: "triangle" },
-		"campsite":      { color: "#4caf50", size: 12, shape: "triangle" }
+		"wilderness_hut": { color: "#d73a3a", size: 16, shape: "square" },
+		"basic_hut":     { color: "#d73a3a", size: 14,  shape: "square" },
+		"alpine_hut":    { color: "#d73a3a", size: 18, shape: "square" },
+		"halt":          { color: "#4caf50", size: 18, shape: "square" },
+		"bivouac":       { color: "#d73a3a", size: 16, shape: "triangle" },
+		"campsite":      { color: "#4caf50", size: 16, shape: "triangle" }
 	};
 
 	function buildPoiVectorIcon(properties) {