{% extends 'skeleton.html' %}

{% block content %}
<!-- MAP RENDER -->
<div id="mapid"></div>

<!-- TOPONYM FORM -->
<div class="container" style="background-color: white;padding: 5px;">
    <p>

    </p>
    <form action="/" method="get">
        <div class="form-group">
            <label for="formGroupExampleInput">Toponym</label>
            <input type="text" class="form-control" name="top"
                placeholder="Paris">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput2">Context Toponym</label>
            <input type="text" class="form-control" name="c_top"
                placeholder="Cherbourg">
        </div>
        <button type="submit" class="btn btn-primary">Get Coords !</button>
    </form>
</div>
{% endblock %}

{% block script %}
<script>

    // Initialize the map
    // [50, -0.1] are the latitude and longitude
    // 4 is the zoom
    // mapid is the id of the div where the map will appear
    var mymap = L
        .map('mapid')
        .setView([50, -0.1], 4);

    // Add a tile to the map = a background. Comes from OpenStreetmap
    L.tileLayer(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
    }).addTo(mymap);
    {% if lat and lon %}
    var marker = L.marker([{{lat}}, {{lon}}]).addTo(mymap);
    var circle = L.circle([{{lat}}, {{lon}}], {
          color: "red",
          fillColor: "#f03",
          fillOpacity: 0.5,
          radius: 50000.0
      }).addTo(mymap); 
    {% endif %}

</script>
{% endblock %}