index.html

---
layout: base

---
<div class="index-page">
  <div class="container">
    <div class="jumbotron index-page">
      <h1>
        <img src="{{ site.baseurl }}/static/img/mapnificent_big.png" alt="Mapnificent" class="img-responsive">
      </h1>
      <p>
        Shows you areas you can reach with public transport in a given time.
      </p>
      <p>
        <a href="#map" class="btn btn-mapnificent btn-lg smooth-scroll" role="button">
          See all the cities
        </a>
        <a href="#about" data-toggle="modal" class="btn btn-default btn-lg" role="button">
          About
        </a>
      </p>
    </div>
  </div>
</div>

<div id="map"></div>

<div class="container">
  <div id="list">
    <h3>All Mapnificent Cities</h3>
    <div class="row">
      {% for city in site.cities %}
        {% unless city.hidden %}
        <div class="col-sm-6 col-md-4 col-xs-12">
          <a href="{{ site.baseurl }}/{{ city.url|replace_first:"/","" }}" class="thumbnail">
            <!-- <img src="#" alt="Mapnificent {{ city.cityname }}"/> -->
            <div class="caption">
              <h3>{{ city.cityname }}</h3>
            </div>
          </a>
        </div>
        {% endunless %}
      {% endfor %}
    </div>
  </div>

</div>

{% include about.html %}

<footer class="footer">
  <div class="container">
    <a href="http://stefanwehrmeyer.com/#impressum">Impressum</a>
  </div>
</footer>

<script src="{{ site.baseurl }}/static/vendor/leaflet/dist/leaflet.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
  $('#map').height($(window).height() - 200);

  $('.smooth-scroll').click(function(e) {
    e.preventDefault();
    //calculate destination place
    var dest = 0;
    if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
        dest = $(document).height() - $(window).height();
    } else {
        dest = $(this.hash).offset().top;
    }
    //go to destination
    $('html,body').animate({
        scrollTop: dest
    }, 1000, 'swing');
  });

  var tileUrl = '{{ site.tileUrl }}';
  L.Icon.Default.imagePath = '{{ site.baseurl }}/static/vendor/leaflet/dist/images/';
  var map = L.map('map', {
    center: [20, 11],
    zoom: 2,
    scrollWheelZoom: false
  });
  defaultTileLayer = new L.TileLayer(tileUrl, {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'});
  map.attributionControl.setPrefix("");
  map.addLayer(defaultTileLayer);

  var marker, coords;
  {% for city in site.cities %}
    {% unless city.hidden %}
      coords = {{ city.coordinates | jsonify }};
      if (coords) {
        marker = L.marker([coords[1], coords[0]]).addTo(map);
        marker.bindPopup('<h2><a href="{{ city.url|replace_first:"/","" }}">{{ city.cityname }}</a></h2>');
      }
    {% endunless %}
  {% endfor %}

</script>