{% extends 'global/base.html' %}
{% load staticfiles %}

{% block content %}

    <div class="container">
        <h2>Django Girls events</h2>
        <div id="map"></div>
    </div>
   
    <script>
        L.mapbox.accessToken = 'pk.eyJ1Ijoib2xhc2l0YXJza2EiLCJhIjoiZGUzZjUyNjUxYWNkOGU1ODBkYjcxNzc4MTllNGRlMjcifQ.t0yuSZmW5FvragLmVgJXNQ';
        var map = L.mapbox.map('map', 'olasitarska.m8nged0f', {scrollWheelZoom: false}).setView([30, 0], 2);

        {% for event in events %}
            {% if event.latlng %}
            L.marker([{{ event.latlng }}], {
                icon: L.mapbox.marker.icon({
                    'marker-size': 'medium',
                    'marker-symbol': 'heart',
                    'marker-color': '#{{ event.eventpage.main_color }}'
                })
            }).addTo(map).bindPopup('{% if event.eventpage.is_live %}<a href="/{{ event.eventpage.url }}">{% endif %}{{ event.city }}, {{ event.country }}{% if event.eventpage.is_live %}</a>{% endif %}');
            {% endif %}
        {% endfor %}
    </script>

{% endblock %}

{% extends 'global/base.html' %}
{% load staticfiles %}

{% block content %}

    <div class="container">
        <h2>Django Girls events</h2>
        <div id="map"></div>
    </div>
   
    <script>
        L.mapbox.accessToken = 'pk.eyJ1Ijoib2xhc2l0YXJza2EiLCJhIjoiZGUzZjUyNjUxYWNkOGU1ODBkYjcxNzc4MTllNGRlMjcifQ.t0yuSZmW5FvragLmVgJXNQ';
        var past = L.layerGroup()
        var future = L.layerGroup()
        var map = L.mapbox.map('map', 'olasitarska.m8nged0f', {scrollWheelZoom: false, layers: [past, future]}).setView([30, 0], 2);
        L.control.layers(null, {
          'Upcoming': future,
          'Past': past,
        }).addTo(map);

        {% for event in events %}
            {% if event.latlng %}
            L.marker([{{ event.latlng }}], {
                icon: L.mapbox.marker.icon({
                    'marker-size': 'medium',
                    'marker-symbol': 'heart',
                    'marker-color': '#{{ event.eventpage.main_color }}'
                })
              }).addTo(
                  {% if event.is_upcoming %}future{% else %}past{% endif %}
              ).bindPopup(
                  '{% if event.eventpage.is_live %}<a href="/{{ event.eventpage.url }}">{% endif %}{{ event.city }}, {{ event.country }}{% if event.eventpage.is_live %}</a>{% endif %}'
              );
            {% endif %}
        {% endfor %}
    </script>

{% endblock %}

Allow event map to filter on past / upcoming event
Allow event map to filter on past / upcoming event
