{% extends 'base.html' %}

{% block header %}
  <h2>{% block title %}Agregar bache o algo{% endblock title %}</h2>
{% endblock header %}

{% block content %}
<section class="maps">
    <h1>Mapa de urbanismo chingón</h1>
    <div id="map"></div>
</section>


{% include 'form.html' %}

<script type="text/javascript">



    function success(position) {
        console.log(position)
    }

    navigator.geolocation.getCurrentPosition(success);
    var lon = document.getElementById('latitude');
    document.getElementById('latitude').value = lon.options[lon.selectedIndex].value;
    var lat = document.getElementById('longitude');
    document.getElementById('longitude').value = lat.options[lat.selectedIndex].value;
    
    var map = L.map('map', {
        center: [lat, lon],
        zoom: 13
    });
    map.on('moveend', function() {
        var center = map.getCurrentPosition();
        document.getElementById('latitude').value = center.lng;
        document.getElementById('longitude').value = center.lat;
    })
</script>
{% endblock content %}