leo/kabano
1
0 Fork 0
Code Issues Pull Requests Releases Activity

Les pois sont affichés correctement

Browse Source
This commit is contained in:
leosw committed 2026-10-18 17:14:26 +02:00
1 parent 321296e90f
commit 860f1077aa
2 files changed
+29 -20
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/views/css/d.map.css
+6
View File
@@ -211,3 +211,9 @@ footer {
.leaflet-fullscreen-on .easy-button-container { .leaflet-fullscreen-on .easy-button-container {
display: none; display: none;
} }
/* Map PBF tiles overflow of icons */
.leaflet-container .leaflet-tile{
overflow: visible !important;
}
public/views/js/d.map.js
+23 -20
View File
@@ -51,33 +51,36 @@ $(document).ready(function() {
// Styles des POIs pour les vector tiles // Styles des POIs pour les vector tiles
// --------------------------------------------------------- // ---------------------------------------------------------
function svgDataUriFor(color, size, shape) { // Fonction qui génère le SVG du point pour les calques en pbf
var width = size; function svgDataUriFor(color, size, shape, strokeOpacity = 0.2) {
var height = size; const w = size, h = size, strokeWidth = 1, r = Math.max(1, Math.round(size * 0.15));
var svg = ""; const inset = 2 + strokeWidth / 2, innerW = w - inset * 2, innerH = h - inset * 2;
let shapeSvg;
if (shape === "triangle") { if (shape === 'triangle') {
svg = const p1 = `${w/2},${inset}`, p2 = `${w-inset},${h-inset}`, p3 = `${inset},${h-inset}`, points = `${p1} ${p2} ${p3}`;
"<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "' viewBox='0 0 " + width + " " + height + "'>" + shapeSvg = `<g>
"<polygon points='" + (width / 2) + ",2 " + (width - 2) + "," + (height - 2) + " 2," + (height - 2) + "' fill='" + color + "'/>" + <polygon points='${points}' fill='${color}' stroke='none'/>
"</svg>"; <polygon points='${points}' fill='none' stroke='#fff' stroke-opacity='${strokeOpacity}' stroke-width='${strokeWidth}' stroke-linejoin='round'/>
</g>`;
} else { } else {
svg = shapeSvg = `<g>
"<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "' viewBox='0 0 " + width + " " + height + "'>" + <rect x='${inset}' y='${inset}' rx='${r}' ry='${r}' width='${innerW}' height='${innerH}' fill='${color}' stroke='none'/>
"<rect x='2' y='2' width='" + (width - 4) + "' height='" + (height - 4) + "' fill='" + color + "'/>" + <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'/>
"</svg>"; </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 = { var poiStyleMap = {
"wilderness_hut": { color: "#d73a3a", size: 12, shape: "square" }, "wilderness_hut": { color: "#d73a3a", size: 16, shape: "square" },
"basic_hut": { color: "#d73a3a", size: 8, shape: "square" }, "basic_hut": { color: "#d73a3a", size: 14, shape: "square" },
"alpine_hut": { color: "#d73a3a", size: 16, shape: "square" }, "alpine_hut": { color: "#d73a3a", size: 18, shape: "square" },
"halt": { color: "#4caf50", size: 16, shape: "square" }, "halt": { color: "#4caf50", size: 18, shape: "square" },
"bivouac": { color: "#d73a3a", size: 12, shape: "triangle" }, "bivouac": { color: "#d73a3a", size: 16, shape: "triangle" },
"campsite": { color: "#4caf50", size: 12, shape: "triangle" } "campsite": { color: "#4caf50", size: 16, shape: "triangle" }
}; };
function buildPoiVectorIcon(properties) { function buildPoiVectorIcon(properties) {