map.js

// PnP 60-Store Rollout — Map renderer
// Reads from window.STORES (set in stores.js) and renders an interactive Leaflet map.

const tierColors = {
  "Tier 1 \u2013 highest access":     "#d62728",
  "Tier 2 \u2013 strong access":      "#ff7f0e",
  "Tier 3 \u2013 selected watchlist": "#f1c40f",
  "Existing anchor":                   "#2ca02c",
  "Buffer Store":                      "#1f77b4"
};

const tierOrder = [
  "Tier 1 \u2013 highest access",
  "Tier 2 \u2013 strong access",
  "Tier 3 \u2013 selected watchlist",
  "Existing anchor",
  "Buffer Store"
];

function initMap() {
  const stores = window.STORES || [];

  const map = L.map('map');
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '\u00a9 OpenStreetMap contributors'
  }).addTo(map);

  const bounds = L.latLngBounds([]);
  const tierCounts = {};

  stores.forEach(s => {
    const tier = s["Priority Tier"];
    const color = tierColors[tier] || "#888";
    tierCounts[tier] = (tierCounts[tier] || 0) + 1;

    const icon = L.divIcon({
      className: '',
      html: '<div class="pin" style="background:' + color + ';"></div>',
      iconSize: [18, 18],
      iconAnchor: [9, 9]
    });

    const marker = L.marker([s.Lat, s.Lon], { icon }).addTo(map);
    marker.bindPopup(
      '<b>' + s["Store Name"] + '</b><br>' +
      '<span style="color:#666">' + s.Code + ' \u00b7 ' + s["City / Town"] + ', ' + s.Province + '</span><br>' +
      'Status: ' + s.Status + '<br>' +
      '<span class="tier-badge" style="background:' + color + '">' + tier + '</span>'
    );
    bounds.extend([s.Lat, s.Lon]);
  });

  map.fitBounds(bounds, { padding: [40, 40] });

  // Legend
  const legend = L.control({ position: 'bottomright' });
  legend.onAdd = function() {
    const div = L.DomUtil.create('div', 'legend');
    let html = '<h4>Priority Tier</h4>';
    tierOrder.forEach(t => {
      if (tierCounts[t]) {
        html += '<div class="row">' +
                '<span class="swatch" style="background:' + tierColors[t] + '"></span>' +
                '<span>' + t + '</span>' +
                '<span class="count">' + tierCounts[t] + '</span>' +
                '</div>';
      }
    });
    html += '<div style="margin-top:8px;padding-top:8px;border-top:1px solid #eee;color:#666;font-size:12px;">' +
            'Total: ' + stores.length + ' stores</div>';
    div.innerHTML = html;
    return div;
  };
  legend.addTo(map);
}

window.addEventListener('load', initMap);