{% extends "base.html" %}
{% load leaflet_tags %}
{% load geojson_tags %}
{% load i18n %}

{% block extra_assets %}
  {% leaflet_js %}
  {% leaflet_css %}
{% endblock %}

{% block content %}

{% if ident %}
<div class="well">
{%trans "Selected user" %}: {{ident}}       <a href="{% url 'geoimage' %}">{%trans "Reset filter" %}</a>
</div>
{% endif %}
    <script type="text/javascript">

      var collection = {{ grimages|geojsonfeature:"popupContent"|safe }};
      var coords=[];

      function onEachFeature(feature, layer) {
         if (feature.properties && feature.properties.popupContent) {
           layer.bindPopup(feature.properties.popupContent);
         }
         if (feature.geometry && feature.geometry.coordinates) {
           coords.push( [ feature.geometry.coordinates[1],feature.geometry.coordinates[0] ]);
         }
      }

      function map_init(map, options) {
         L.geoJson(collection, {onEachFeature: onEachFeature}).addTo(map);
         map.fitBounds(coords);
      }

    </script>

    {% leaflet_map "spots" callback="window.map_init" %}


<p>
  <form  method="POST" class="form-inline" role="form">{% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value={%trans "Submit" %} class="btn">
  </form>
</p>

{% endblock %}