{% extends "name/base.html" %}
{% load staticfiles %}

{% block head-extra %}
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>
{% endblock %}

{% block title %}Map{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-sm-12">
            <form name="map" action="{% url "name:locations-json" %}">
                <span id="attribution" class="hidden">&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors</span>
            </form>
            <div id="map" style="width: 100%; height: 800px"></div>
        </div>
    </div>

    <script src="{% static "name/js/map.js" %}"></script>
{% endblock %}
