{"id":2,"date":"2026-03-19T13:55:47","date_gmt":"2026-03-19T13:55:47","guid":{"rendered":"http:\/\/wp.zacube.com\/?page_id=2"},"modified":"2026-04-27T08:59:49","modified_gmt":"2026-04-27T08:59:49","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/wp.zacube.com\/index.php\/sample-page\/","title":{"rendered":"Page Leaflet"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b80bf28 e-flex e-con-boxed e-con e-parent\" data-id=\"b80bf28\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-e1e8639 e-con-full e-flex e-con e-child\" data-id=\"e1e8639\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-61c35dc e-con-full e-flex e-con e-child\" data-id=\"61c35dc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37113a2 elementor-widget elementor-widget-text-editor\" data-id=\"37113a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-835b68f e-flex e-con-boxed e-con e-parent\" data-id=\"835b68f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-02d614c elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"02d614c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\/>\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script><div id=\"image-map\"><\/div>\n\n<!-- Boutons de filtrage -->\n<div id=\"map-controls\">\n  <button class=\"map-btn active\" data-cat=\"0\">Cat\u00e9gorie 1<\/button>\n  <button class=\"map-btn active\" data-cat=\"1\">Cat\u00e9gorie 2<\/button>\n  <button class=\"map-btn active\" data-cat=\"2\">Cat\u00e9gorie 3<\/button>\n  <button class=\"map-btn active\" data-cat=\"3\">Cat\u00e9gorie 4<\/button>\n  <button id=\"btn-toggle-all\">Tout masquer<\/button>\n<\/div>\n\n<style>\n#map-controls {\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\/* les boutons passent \u00e0 la ligne si besoin *\/\n  margin-top: 12px;\n  width: 100%;\n  box-sizing: border-box;\n}\n.map-btn {\n  padding: 8px 18px;\n  border: 2px solid #ccc;\n  border-radius: 20px;\n  background: #fff;\n  cursor: pointer;\n  font-size: 14px;\n  opacity: 0.45;\n  transition: opacity 0.2s, border-color 0.2s;\n  flex-shrink: 1; \/* les boutons peuvent r\u00e9tr\u00e9cir *\/\n  min-width: 0; \/* supprime la largeur minimale native *\/\n  white-space: nowrap; \/* \u00e9vite les retours \u00e0 la ligne dans le libell\u00e9 *\/\n}\n  .map-btn.active {\n    opacity: 1;\n    border-color: var(--cat-color);\n    color: var(--cat-color);\n    font-weight: bold;\n  }\n#btn-toggle-all {\n  padding: 8px 18px;\n  border: 2px solid #555;\n  border-radius: 20px;\n  background: #fff;\n  cursor: pointer;\n  font-size: 14px;\n  color: #555;\n  transition: opacity 0.2s, background 0.2s;\n  margin-left: auto;\n  flex-shrink: 1;\n  min-width: 0;\n  white-space: nowrap;\n}\n<\/style>\n\n<script>\n(function () {\n  var IMAGE_URL    = 'https:\/\/wp.zacube.com\/wp-content\/uploads\/2026\/03\/Fond-plan-interactif-3000px-2025-scaled.jpg';\n  var IMAGE_WIDTH  = 3000;\n  var IMAGE_HEIGHT = 1364;\n  var RATIO        = IMAGE_HEIGHT \/ IMAGE_WIDTH;\n  var bounds       = [[0, 0], [IMAGE_HEIGHT, IMAGE_WIDTH]];\n  var center       = [IMAGE_HEIGHT \/ 2, IMAGE_WIDTH \/ 2];\n  var container    = document.getElementById('image-map');\n\n  \/\/ \u2500\u2500\u2500 Couleurs par cat\u00e9gorie \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  var CAT_COLORS = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12'];\n  var CAT_NAMES  = ['Cat\u00e9gorie 1', 'Cat\u00e9gorie 2', 'Cat\u00e9gorie 3', 'Cat\u00e9gorie 4'];\n\n  \/\/ Applique la couleur CSS sur chaque bouton\n  document.querySelectorAll('.map-btn').forEach(function(btn) {\n    var c = parseInt(btn.dataset.cat);\n    btn.style.setProperty('--cat-color', CAT_COLORS[c]);\n    btn.style.borderColor = CAT_COLORS[c];\n    btn.style.color       = CAT_COLORS[c];\n  });\n\n  \/\/ \u2500\u2500\u2500 Donn\u00e9es des marqueurs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  \/\/ lat\/lng dans le rep\u00e8re de l'image (y depuis le bas, x depuis la gauche)\n  var MARKERS = [\n    \/\/ Cat\u00e9gorie 0\n    { cat: 0, lat: 1100, lng:  300, img: 'https:\/\/picsum.photos\/seed\/1\/200\/120',  titre: 'Point A', texte: 'Description du point A.', lien: '#' },\n    { cat: 0, lat:  900, lng:  600, img: 'https:\/\/picsum.photos\/seed\/2\/200\/120',  titre: 'Point B', texte: 'Description du point B.', lien: '#' },\n    { cat: 0, lat:  700, lng:  400, img: 'https:\/\/picsum.photos\/seed\/3\/200\/120',  titre: 'Point C', texte: 'Description du point C.', lien: '#' },\n    { cat: 0, lat:  500, lng:  700, img: 'https:\/\/picsum.photos\/seed\/4\/200\/120',  titre: 'Point D', texte: 'Description du point D.', lien: '#' },\n    { cat: 0, lat: 1200, lng: 1000, img: 'https:\/\/picsum.photos\/seed\/5\/200\/120',  titre: 'Point E', texte: 'Description du point E.', lien: '#' },\n    \/\/ Cat\u00e9gorie 1\n    { cat: 1, lat:  800, lng: 1200, img: 'https:\/\/picsum.photos\/seed\/6\/200\/120',  titre: 'Point F', texte: 'Description du point F.', lien: '#' },\n    { cat: 1, lat:  600, lng: 1500, img: 'https:\/\/picsum.photos\/seed\/7\/200\/120',  titre: 'Point G', texte: 'Description du point G.', lien: '#' },\n    { cat: 1, lat: 1000, lng: 1800, img: 'https:\/\/picsum.photos\/seed\/8\/200\/120',  titre: 'Point H', texte: 'Description du point H.', lien: '#' },\n    { cat: 1, lat:  400, lng: 2000, img: 'https:\/\/picsum.photos\/seed\/9\/200\/120',  titre: 'Point I', texte: 'Description du point I.', lien: '#' },\n    { cat: 1, lat: 1100, lng: 2300, img: 'https:\/\/picsum.photos\/seed\/10\/200\/120', titre: 'Point J', texte: 'Description du point J.', lien: '#' },\n    \/\/ Cat\u00e9gorie 2\n    { cat: 2, lat:  300, lng: 2500, img: 'https:\/\/picsum.photos\/seed\/11\/200\/120', titre: 'Point K', texte: 'Description du point K.', lien: '#' },\n    { cat: 2, lat:  700, lng: 2700, img: 'https:\/\/picsum.photos\/seed\/12\/200\/120', titre: 'Point L', texte: 'Description du point L.', lien: '#' },\n    { cat: 2, lat: 1000, lng: 2600, img: 'https:\/\/picsum.photos\/seed\/13\/200\/120', titre: 'Point M', texte: 'Description du point M.', lien: '#' },\n    { cat: 2, lat:  500, lng: 2900, img: 'https:\/\/picsum.photos\/seed\/14\/200\/120', titre: 'Point N', texte: 'Description du point N.', lien: '#' },\n    { cat: 2, lat: 1200, lng: 2800, img: 'https:\/\/picsum.photos\/seed\/15\/200\/120', titre: 'Point O', texte: 'Description du point O.', lien: '#' },\n    \/\/ Cat\u00e9gorie 3\n    { cat: 3, lat:  900, lng:  100, img: 'https:\/\/picsum.photos\/seed\/16\/200\/120', titre: 'Point P', texte: 'Description du point P.', lien: '#' },\n    { cat: 3, lat:  200, lng:  900, img: 'https:\/\/picsum.photos\/seed\/17\/200\/120', titre: 'Point Q', texte: 'Description du point Q.', lien: '#' },\n    { cat: 3, lat:  400, lng: 1700, img: 'https:\/\/picsum.photos\/seed\/18\/200\/120', titre: 'Point R', texte: 'Description du point R.', lien: '#' },\n    { cat: 3, lat:  100, lng: 2200, img: 'https:\/\/picsum.photos\/seed\/19\/200\/120', titre: 'Point S', texte: 'Description du point S.', lien: '#' },\n    { cat: 3, lat:  600, lng: 2400, img: 'https:\/\/picsum.photos\/seed\/20\/200\/120', titre: 'Point T', texte: 'Description du point T.', lien: '#' },\n  ];\n\n  \/\/ \u2500\u2500\u2500 Ic\u00f4nes color\u00e9es par cat\u00e9gorie \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function makeIcon(color) {\n    var svg = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 36\">'\n      + '<path d=\"M12 0C5.4 0 0 5.4 0 12c0 9 12 24 12 24s12-15 12-24C24 5.4 18.6 0 12 0z\" fill=\"' + color + '\" stroke=\"#fff\" stroke-width=\"1.5\"\/>'\n      + '<circle cx=\"12\" cy=\"12\" r=\"5\" fill=\"#fff\"\/>'\n      + '<\/svg>';\n    return L.divIcon({\n      html: '<div style=\"width:24px;height:36px\">' + svg + '<\/div>',\n      className: '',\n      iconSize:   [24, 36],\n      iconAnchor: [12, 36],\n      popupAnchor:[0, -38]\n    });\n  }\n\n  \/\/ \u2500\u2500\u2500 Init carte \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function setHeight() {\n    container.style.height = Math.round(container.offsetWidth * RATIO) + 'px';\n  }\n\n  function getMinZoom() {\n    var zoomX = Math.log2(map.getSize().x \/ IMAGE_WIDTH);\n    var zoomY = Math.log2(map.getSize().y \/ IMAGE_HEIGHT);\n    return Math.min(zoomX, zoomY);\n  }\n\n  function fitImage() {\n    setHeight();\n    map.invalidateSize();\n    var minZoom = getMinZoom();\n    map.setMinZoom(minZoom);\n    map.setView(center, minZoom);\n    updateDragState(minZoom);\n  }\n\n  function updateDragState(minZoom) {\n    map.off('zoomend').on('zoomend', function() {\n      if (map.getZoom() <= minZoom + 0.01) {\n        map.dragging.disable();\n        map.doubleClickZoom.disable();\n      } else {\n        map.dragging.enable();\n        map.doubleClickZoom.enable();\n      }\n    });\n    if (map.getZoom() <= minZoom + 0.01) {\n      map.dragging.disable();\n      map.doubleClickZoom.disable();\n    }\n  }\n\n  setHeight();\n\n  var map = L.map('image-map', {\n    crs:                L.CRS.Simple,\n    zoomSnap:           0,\n    zoomDelta:          0.5,\n    scrollWheelZoom:    true,\n    attributionControl: false,\n    maxBounds:          bounds,\n    maxBoundsViscosity: 1.0\n  });\n\n  L.imageOverlay(IMAGE_URL, bounds).addTo(map);\n\n  \/\/ \u2500\u2500\u2500 Cr\u00e9ation des marqueurs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  var layers = [L.layerGroup(), L.layerGroup(), L.layerGroup(), L.layerGroup()];\n  layers.forEach(function(lg) { lg.addTo(map); });\n\n  MARKERS.forEach(function(m) {\n    var marker = L.marker([m.lat, m.lng], { icon: makeIcon(CAT_COLORS[m.cat]) });\n    marker.bindPopup(\n      '<div style=\"width:200px;text-align:center\">'\n      + '<img decoding=\"async\" src=\"' + m.img + '\" style=\"width:100%;border-radius:6px;margin-bottom:8px\"\/>'\n      + '<strong style=\"display:block;margin-bottom:4px\">' + m.titre + '<\/strong>'\n      + '<p style=\"margin:0 0 8px;font-size:13px\">' + m.texte + '<\/p>'\n      + '<a href=\"' + m.lien + '\" target=\"_blank\" style=\"background:#333;color:#fff;padding:5px 12px;border-radius:4px;text-decoration:none;font-size:13px\">En savoir plus<\/a>'\n      + '<\/div>',\n      { maxWidth: 220 }\n    );\n    layers[m.cat].addLayer(marker);\n  });\n\n  \/\/ \u2500\u2500\u2500 Logique des boutons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  var activeState = [true, true, true, true]; \/\/ toutes actives au d\u00e9part\n\n  function allActive() {\n    return activeState.every(function(v) { return v; });\n  }\n\nfunction applyState() {\n  activeState.forEach(function(active, i) {\n    if (active) {\n      if (!map.hasLayer(layers[i])) map.addLayer(layers[i]);\n    } else {\n      if (map.hasLayer(layers[i])) map.removeLayer(layers[i]);\n    }\n    var btn = document.querySelector('.map-btn[data-cat=\"' + i + '\"]');\n    if (active) {\n      btn.classList.add('active');\n      btn.style.borderColor = CAT_COLORS[i];\n      btn.style.color       = CAT_COLORS[i];\n    } else {\n      btn.classList.remove('active');\n      btn.style.borderColor = '#ccc';\n      btn.style.color       = '#999';\n    }\n  });\n\n  \/\/ \u2705 Met \u00e0 jour le libell\u00e9 du bouton toggle\n  document.getElementById('btn-toggle-all').textContent =\n    allActive() ? 'Tout masquer' : 'Tout voir';\n}\n\n  document.querySelectorAll('.map-btn').forEach(function(btn) {\n    btn.addEventListener('click', function() {\n      var i = parseInt(btn.dataset.cat);\n\n      if (allActive()) {\n        \/\/ Toutes visibles \u2192 on isole la cat\u00e9gorie cliqu\u00e9e\n        activeState = [false, false, false, false];\n        activeState[i] = true;\n      } else {\n        \/\/ Comportement normal : toggle\n        activeState[i] = !activeState[i];\n        \/\/ Si tout est masqu\u00e9 \u2192 on remet tout\n        if (activeState.every(function(v) { return !v; })) {\n          activeState = [true, true, true, true];\n        }\n      }\n\n      applyState();\n    });\n  });\n  \n  document.getElementById('btn-toggle-all').addEventListener('click', function() {\n  if (allActive()) {\n    activeState = [false, false, false, false];\n  } else {\n    activeState = [true, true, true, true];\n  }\n  applyState();\n});\n\n  \/\/ \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  setTimeout(fitImage, 300);\n  window.addEventListener('load', function() { setTimeout(fitImage, 100); });\n  var resizeTimer;\n  window.addEventListener('resize', function() {\n    clearTimeout(resizeTimer);\n    resizeTimer = setTimeout(fitImage, 150);\n  });\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Cat\u00e9gorie 1 Cat\u00e9gorie 2 Cat\u00e9gorie 3 Cat\u00e9gorie 4 Tout masquer<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/wp.zacube.com\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.zacube.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp.zacube.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp.zacube.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.zacube.com\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":60,"href":"https:\/\/wp.zacube.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":199,"href":"https:\/\/wp.zacube.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/199"}],"wp:attachment":[{"href":"https:\/\/wp.zacube.com\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}