<script>
$(function() {
    // Handler for .ready() called.
    var mymap = L.map('addressMap').setView([41.89193, 12.51133], 4);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: '{{ MAPBOX_ACCESSTOKEN }}',
    }).addTo(mymap);

    mymap.on('click', function(e){
      var coord = e.latlng;
      var lat = coord.lat;
      var lng = coord.lng;
      $('input[name ="latitude"]').val(lat);
      $('input[name ="longitude"]').val(lng);
    });
});
</script>
