bierkarte

Le prix de la pinte de pils dans les bars de Strasbourg. Plutôt demi ? Clique sur un bar pour connaître le prix.

urlMeteor = "https://docs.google.com/spreadsheets/d/1-qndigtab0fshihgIM3E_KIGM17oYKMIz1W5Z1UnriI/export?format=csv&gid=0"

d3 = require('d3')

dataMeteor = d3.csv(urlMeteor, d3.autoType)

map = {

  // Assurer le chargement du plugin Leaflet.Locate
  await new Promise((resolve, reject) => {
  if (typeof L.Control.Locate === "undefined") {
    const script = document.createElement('script');
    script.src = "https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js";
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  } else {
    resolve();
  }
  });

  const container = yield htl.html`<div style="height: 72vh;">`;
  
  // carte
  const map = L.map(container).setView([48.5839, 7.7455], 14);
  
  // tuile Carto DB
  L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
    subdomains: 'abcd',
    maxZoom: 20
  }).addTo(map);
  
  // bouton pour localiser l'utilisateur
  L.control.locate({
    strings: {
      title: "Montre-moi où je suis !"
    }
  }).addTo(map);


  dataMeteor.forEach(bar => {
   
    // création de l'icône avec le prix
    const priceIcon = L.divIcon({
      className: "price-label",
      html: `
        <svg width="30" height="39.75" viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" style="overflow: visible; fill:#ffffff; stroke:#333e48; stroke-width:20;">
            <path d="M384 192c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0S384 86 384 192z"/>
        </svg>
        <div style="
            position: absolute; 
            top: 68%; 
            left: 37%; 
            transform: translate(-50%, -55%);
            color: #333e48; 
            font-weight: 700; 
            font-family: 'Arial Rounded MT Bold', Arial, sans-serif; 
            font-size: 14px;
            pointer-events: none;
            user-select: none;
          ">
          ${bar.pinte}
          </div>
          `,
        iconSize: [40, 24], // taille approximative
        iconAnchor: [16, 45] // Pointe de l'icone sur le point
      });
      
  const lat = parseFloat(bar.latitude);
  const lon = parseFloat(bar.longitude);
  
  if (!isNaN(lat) && !isNaN(lon)) {
  
    const marker = L.marker([lat, lon], {icon: priceIcon}).addTo(map)
    
    const popup =  L.popup({
      offset: [0, -30] // décale le popup de 30 pixels vers le haut
    }).setContent(`
        <strong>${bar.bar}</strong><br/>
        ${bar.adresse}<br/>
        Bière : ${bar.biere} <br/>
        Demi : ${bar.demi} €<br/>
        Pinte : ${bar.pinte} €<br/>
        <i>Le ${bar.date}<br/><i>
      `);
      
      marker.bindPopup(popup);
      }
      
    });
}

D’après une enquête de terrain aussi rigoureuse que joyeuse