{"id":58236,"date":"2026-09-01T23:02:45","date_gmt":"2026-09-01T21:02:45","guid":{"rendered":"https:\/\/careconcierge.fr\/find-the-nearest-bin\/"},"modified":"2026-09-01T23:02:45","modified_gmt":"2026-09-01T21:02:45","slug":"find-the-nearest-bin","status":"publish","type":"page","link":"https:\/\/careconcierge.fr\/en\/find-the-nearest-bin\/","title":{"rendered":"Find the Nearest Bin"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"58236\" class=\"elementor elementor-58236 elementor-52717\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ec4aae8 e-flex e-con-boxed e-con e-parent\" data-id=\"ec4aae8\" 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-4e89fd0 elementor-widget elementor-widget-text-editor\" data-id=\"4e89fd0\" 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 style=\"text-align: center;\">When you tap the button, your device will ask permission to use your location. Please accept so we can show you the nearest bin.\u00a0<\/p>\t\t\t\t\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-5c64f0d e-flex e-con-boxed e-con e-parent\" data-id=\"5c64f0d\" 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-939ac02 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"939ac02\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"apps-trigger\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#btnNearest\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\ud83d\udccd Find the nearest bin<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\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-34a17d1 e-flex e-con-boxed e-con e-parent\" data-id=\"34a17d1\" data-element_type=\"container\" data-e-type=\"container\" id=\"apps-group\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3828106 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"3828106\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#btnGmaps\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Google<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b1ad9a elementor-align-center elementor-widget elementor-widget-button\" data-id=\"5b1ad9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#btnApple\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Apple<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b0016eb elementor-align-center elementor-widget elementor-widget-button\" data-id=\"b0016eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#btnWaze\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Waze<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\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-69cce7e e-flex e-con-boxed e-con e-parent\" data-id=\"69cce7e\" 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-4812c29 elementor-widget elementor-widget-html\" data-id=\"4812c29\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* Hide the group on the live site *\/\r\n  #apps-group { display:none; }\r\n\r\n  \/* Keep them visible while editing in Elementor so you can work on them *\/\r\n  body.elementor-editor-active #apps-group { display:block; }\r\n<\/style>\r\n\r\n<script>\r\n  jQuery(function($){\r\n    \/\/ Reveal once (no CSS Pro needed)\r\n    $('#apps-trigger').one('click', function(){\r\n      $('#apps-group').stop(true,true).slideDown(200);\r\n      \/\/ If your trigger button has a link like \"#\", uncomment the next line:\r\n      \/\/ return false;\r\n    });\r\n\r\n    \/\/ If you prefer toggle instead of one-time reveal, use this instead:\r\n    \/\/ $('#apps-trigger').on('click', function(e){\r\n    \/\/   e.preventDefault(); \/\/ only if the button has a link\r\n    \/\/   $('#apps-group').stop(true,true).slideToggle(200);\r\n    \/\/ });\r\n  });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-85b663f elementor-widget elementor-widget-html\" data-id=\"85b663f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Leaflet CSS -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet.locatecontrol\/dist\/L.Control.Locate.min.css\" \/>\r\n\r\n<style>\r\n  :root{\r\n    --brand-primary:#C8A26B;   \/* adjust to your gold *\/\r\n    --brand-sand:#F3E9DC;      \/* adjust to your sand *\/\r\n    --brand-text:#2B2723;\r\n    --brand-shadow:rgba(0,0,0,.08);\r\n  }\r\n\r\n  \/* Style the Elementor buttons (we add classes via JS) *\/\r\n  .mapbtn{\r\n    padding:10px 14px;border:1px solid transparent;border-radius:10px;\r\n    box-shadow:0 2px 6px var(--brand-shadow);font-weight:600;\r\n    background:var(--brand-sand);color:var(--brand-text);border-color:var(--brand-primary);\r\n  }\r\n  .mapbtn.primary{ background:var(--brand-primary); color:#fff; }\r\n  .mapbtn.secondary{ background:var(--brand-sand); }\r\n  .mapbtn.disabled{ pointer-events:none; opacity:.45; }\r\n\r\n  \/* Map + help *\/\r\n  #garbage-map{ height:540px; border-radius:12px; overflow:hidden; margin-top:10px; }\r\n  #geo-help{\r\n    display:none; font-size:14px; line-height:1.35; margin:8px 0 12px;\r\n    background:#fff6f0; border:1px solid #f2d2b3; border-radius:10px; padding:10px 12px;\r\n  }\r\n\r\n  \/* ===== Pulsing red pin for user's location ===== *\/\r\n  .pulse-pin { position: relative; width:36px; height:36px; }\r\n  .pulse-pin .pin{\r\n    position:absolute; left:50%; bottom:4px; transform:translateX(-50%);\r\n    width:26px; height:26px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));\r\n  }\r\n  .pulse-pin .ring{\r\n    position:absolute; left:50%; bottom:6px; width:12px; height:12px;\r\n    margin-left:-6px; border-radius:50%; background:rgba(224,49,49,.55);\r\n    animation:pulse 1.6s ease-out infinite;\r\n  }\r\n  @keyframes pulse{\r\n    0%   { transform: scale(1);   opacity:.7; }\r\n    70%  { transform: scale(3);   opacity:0;  }\r\n    100% { transform: scale(3);   opacity:0;  }\r\n  }\r\n<\/style>\r\n\r\n<div id=\"geo-help\">\r\n  To use \u201cFind Nearest Bin\u201d, allow location for this site (iPhone: aA \u25b8 Website Settings \u25b8 Location \u25b8 Allow),\r\n  or tap the map to set your location manually.\r\n<\/div>\r\n\r\n<div id=\"garbage-map\"><\/div>\r\n\r\n<!-- Leaflet + helpers -->\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/leaflet-omnivore@0.3.4\/leaflet-omnivore.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/leaflet.locatecontrol\/dist\/L.Control.Locate.min.js\"><\/script>\r\n\r\n<script>\r\n(function(){\r\n  \/* ===== Hook Elementor buttons by their Link anchors (no Pro needed) ===== *\/\r\n  const btnNearest = document.querySelector('a[href=\"#btnNearest\"]');\r\n  const btnGmaps   = document.querySelector('a[href=\"#btnGmaps\"]');\r\n  const btnApple   = document.querySelector('a[href=\"#btnApple\"]');\r\n  const btnWaze    = document.querySelector('a[href=\"#btnWaze\"]');\r\n\r\n  \/\/ Add classes for styling; block clicks while disabled\r\n  if (btnNearest) btnNearest.classList.add('mapbtn','primary');\r\n  [btnGmaps, btnApple, btnWaze].forEach(b=>{\r\n    if (!b) return;\r\n    b.classList.add('mapbtn','secondary','disabled');\r\n    b.addEventListener('click', e=>{ if (b.classList.contains('disabled')) e.preventDefault(); });\r\n  });\r\n\r\n  \/* ===== Map ===== *\/\r\n  const map = L.map('garbage-map');\r\n  L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', { maxZoom:19 }).addTo(map);\r\n  map.setView([45.915, 6.86], 13); \/\/ Les Houches \/ Chamonix\r\n\r\n  L.control.locate({\r\n    position:'topleft', setView:'untilPanOrZoom', flyTo:true,\r\n    showCompass:true, drawCircle:true, initialZoom:16\r\n  }).addTo(map);\r\n\r\n  \/* ===== KML bins ===== *\/\r\n  const kmlUrl = 'https:\/\/careconcierge.fr\/wp-content\/uploads\/2025\/09\/garbage-bins.kml';\r\n  const kmlLayer = omnivore.kml(kmlUrl).addTo(map);\r\n  const binMarkers = [];\r\n  kmlLayer.on('ready', function(){\r\n    kmlLayer.eachLayer(l => { if (typeof l.getLatLng==='function') binMarkers.push(l); });\r\n  }).on('error', function(e){\r\n    console.error('KML load error:', e);\r\n    alert('Sorry, the bin locations could not be loaded.');\r\n  });\r\n\r\n  \/* ===== Pulsing red pin icon ===== *\/\r\n  const pulseIcon = L.divIcon({\r\n    className: 'pulse-pin',\r\n    html: `\r\n      <div class=\"ring\"><\/div>\r\n      <svg class=\"pin\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\r\n        <path fill=\"#e03131\" stroke=\"white\" stroke-width=\"2\"\r\n          d=\"M16 2c-5.5 0-10 4.4-10 9.8 0 7.2 9.5 17.6 9.9 18.1.1.1.3.1.4 0 .4-.4 9.9-10.9 9.9-18.1C26 6.4 21.5 2 16 2z\"\/>\r\n        <circle cx=\"16\" cy=\"12\" r=\"4.5\" fill=\"white\" opacity=\".85\"\/>\r\n      <\/svg>\r\n    `,\r\n    iconSize: [36,36],\r\n    iconAnchor: [18,36]  \/\/ bottom center of the icon\r\n  });\r\n\r\n  \/* ===== Helpers ===== *\/\r\n  let youMarker = null, originLatLng = null;\r\n\r\n  function setYou(latlng){\r\n    if (youMarker) map.removeLayer(youMarker);\r\n    youMarker = L.marker(latlng, { icon: pulseIcon, zIndexOffset: 1000 }).addTo(map);\r\n    originLatLng = latlng;\r\n  }\r\n\r\n  function nearest(latlng){\r\n    let node=null, best=Infinity;\r\n    for (const m of binMarkers){\r\n      const d = latlng.distanceTo(m.getLatLng());\r\n      if (d<best){ best=d; node=m; }\r\n    }\r\n    return {node, dist:best};\r\n  }\r\n\r\n  function enableApps(dest, origin){\r\n    const gOrigin = origin ? `&origin=${origin.lat},${origin.lng}` : '';\r\n    const aOrigin = origin ? `saddr=${origin.lat},${origin.lng}&` : '';\r\n    if (btnGmaps) btnGmaps.href = `https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${dest.lat},${dest.lng}${gOrigin}&travelmode=walking`;\r\n    if (btnApple) btnApple.href = `https:\/\/maps.apple.com\/?${aOrigin}daddr=${dest.lat},${dest.lng}&dirflg=w`;\r\n    if (btnWaze)  btnWaze.href  = `https:\/\/www.waze.com\/ul?ll=${dest.lat},${dest.lng}&navigate=yes`;\r\n    [btnGmaps, btnApple, btnWaze].forEach(b=> b && b.classList.remove('disabled'));\r\n  }\r\n\r\n  function compute(latlng){\r\n    if (!binMarkers.length){ alert('Bin data is still loading.'); return; }\r\n    const {node, dist} = nearest(latlng);\r\n    if (!node){ alert('Could not find bin markers.'); return; }\r\n    const dest = node.getLatLng();\r\n    const group = L.featureGroup([youMarker, node]);\r\n    map.fitBounds(group.getBounds(), { padding:[40,40] });\r\n    node.bindPopup(`<b>Closest bin<\/b><br\/>~ ${Math.round(dist)} m`).openPopup();\r\n    enableApps(dest, originLatLng);\r\n  }\r\n\r\n  \/* ===== Click handlers ===== *\/\r\n  if (btnNearest) btnNearest.addEventListener('click', function(e){\r\n    e.preventDefault(); \/\/ prevent jump to #anchor\r\n    const help = document.getElementById('geo-help');\r\n    if (!navigator.geolocation){ help.style.display='block'; return; }\r\n    navigator.geolocation.getCurrentPosition(function(pos){\r\n      help.style.display='none';\r\n      const you = L.latLng(pos.coords.latitude, pos.coords.longitude);\r\n      setYou(you); compute(you);\r\n    }, function(){\r\n      help.style.display='block';\r\n      alert('Location access was blocked. Allow it in browser settings, or tap the map to set your location manually.');\r\n    }, { enableHighAccuracy:true, timeout:8000 });\r\n  });\r\n\r\n  \/\/ Manual tap fallback\r\n  map.on('click', function(e){ setYou(e.latlng); compute(e.latlng); });\r\n})();\r\n<\/script>\r\n\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-58236","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"mattman416","author_link":"https:\/\/careconcierge.fr\/en\/articles\/author\/mattman416\/"},"rttpg_comment":0,"rttpg_category":" <a href=\"https:\/\/careconcierge.fr\/?taxonomy=translation_priority&#038;term=facultatif\" rel=\"tag\">Facultatif<\/a>","rttpg_excerpt":null,"_links":{"self":[{"href":"https:\/\/careconcierge.fr\/en\/wp-json\/wp\/v2\/pages\/58236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careconcierge.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/careconcierge.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/careconcierge.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/careconcierge.fr\/en\/wp-json\/wp\/v2\/comments?post=58236"}],"version-history":[{"count":0,"href":"https:\/\/careconcierge.fr\/en\/wp-json\/wp\/v2\/pages\/58236\/revisions"}],"wp:attachment":[{"href":"https:\/\/careconcierge.fr\/en\/wp-json\/wp\/v2\/media?parent=58236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}