gig-map.html

---
title: Every gig we’ve ever played
---

<div
  class='gig-map rounded'
  id='gig-map'
  ></div>

<script>
  map = L.map('gig-map').setView(
    [
      51.50979,
      -0.13204
    ],
    11
  );

  {% include fragments/map-layers.js %}

  $.getJSON('/gig-map.json', function(data) {
    L.geoJson(data, {
      onEachFeature: onEachFeature
    })
  })

  function onEachFeature(feature, layer) {
    s = `
      <div
        class='gig-map-popup'
        >
        <span class='venue-name'>
          ${ feature.properties.name }
        </span>
        `

    $.each(feature.properties.gigs, function(index, gig) {
      s += `
      <a href="${ gig.url }">
        ${ moment(gig.date).format('Do MMMM YYYY') }
      </a>
      <br />
      `
    })

    s += `</div>`

    L.geoJSON(feature, {
      pointToLayer: function(feature, latlng) {
        return L.marker(latlng, {icon: marker})
      }
    }).bindPopup(s).addTo(map)
  }
</script>