notes.txt

1) index.html + app.js
  - Mapbox GL JS <script> and <link> tags
  - div#map in index.html
  - setupMap() in map.js

2) data.js: getting the concerts
  - uncomment getConcerts() in app.js
  - look at console
    - see what data we have to work with
  - look at
    - getSongkickConcertsPage()
      - feature geometry
      - pushed to concertsCollection
  - still nothing on the map...
    - uncomment addSources() in data.js
      - map.getSource('concerts') --> _data
    - uncomment addLayers() in data.js
  - note: sources and layers are added after data object is populated
  - zoom in and out, see Mapbox handling collisions :)

3) map.js: cluster the concerts
  - uncomment cluster options in addSources() in map.js
  - uncomment the other layers in addLayers() in map.js

4) concert info list
  - uncomment 70% width in style.css
  - uncomment addConcertSection() in data.js

5) more interactivityness
  - uncomment addScrollListener() in app.js
  - uncomment flyTo() in map.js

6) play
  - uncomment playback() in data.js

7) custom Mapbox style
  - show mapbox.com/studio

extra note: markers at same location with Leaflet's MarkerCluster
  - http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.10000.html