Burathar
4 years ago
8 changed files with 169 additions and 34 deletions
@ -0,0 +1,82 @@
@@ -0,0 +1,82 @@
|
||||
{% extends "base.html" %} |
||||
{% import 'bootstrap/wtf.html' as wtf %} |
||||
|
||||
{% block head %} |
||||
{{ super() }} |
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" |
||||
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" |
||||
crossorigin=""/> |
||||
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" |
||||
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" |
||||
crossorigin=""></script> |
||||
{% endblock %} |
||||
|
||||
{% block app_content %} |
||||
<h1>Add Objective</h1> |
||||
<hr> |
||||
<div class="row"> |
||||
<div class="col-md-4 col-sm-6 col-xs-8"> |
||||
<form action="" method="post" class="form" role="form"> |
||||
{{ form.hidden_tag() }} |
||||
{{ wtf.form_field(form.objective_name, class='form-control') }} |
||||
{{ wtf.form_field(form.latitude, type='number', value='52.2', min='-90', max='90', step='0.00001') }} |
||||
{{ wtf.form_field(form.longitude, class='form-control', type='number', value='5.3', min='-180', max='181', step='0.00001') }} |
||||
{{ wtf.form_field(form.submit, class='btn btn-primary') }} |
||||
</form> |
||||
|
||||
</div> |
||||
<div id="map" style=" height: 500px; border-radius: 10px; " class="col-md-6 col-xs-12"></div> |
||||
|
||||
</div> |
||||
<hr> |
||||
|
||||
|
||||
{% endblock %} |
||||
|
||||
{% block scripts %} |
||||
{{ super() }} |
||||
<script type="text/javascript", crossorigin="anonymous"> |
||||
// Leaflet Map |
||||
var map = L.map( 'map', { |
||||
center: [52.2, 5.3], |
||||
minZoom: 6, |
||||
maxZoom: 19, |
||||
bounds: [[50.5, 3.25], [54, 7.6]], |
||||
zoom: 8 |
||||
}); |
||||
L.control.scale().addTo(map); |
||||
|
||||
L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', { |
||||
attribution: 'Kaartgegevens © <a href="kadaster.nl">Kadaster</a>' |
||||
}).addTo( map ); |
||||
|
||||
var objectiveMarker = L.marker([ |
||||
$("#latitude")[0].value, |
||||
$("#longitude")[0].value |
||||
], { |
||||
draggable: true |
||||
}).addTo(map); |
||||
|
||||
var round = function(value){ |
||||
return (Math.round(value * 100000) / 100000).toFixed(5); |
||||
}; |
||||
|
||||
objectiveMarker.on('dragend', function(e){ |
||||
var newPosition = e.target.getLatLng(); |
||||
$("#latitude")[0].value = round(newPosition.lat); |
||||
$("#longitude")[0].value = round(newPosition.lng); |
||||
}) |
||||
|
||||
$("#latitude").change(function(e) { |
||||
var newLatLng = new L.LatLng(e.target.value, objectiveMarker._latlng.lng); |
||||
objectiveMarker.setLatLng(newLatLng); |
||||
}); |
||||
|
||||
$("#longitude").change(function(e) { |
||||
var newLatLng = new L.LatLng(objectiveMarker._latlng.lat, e.target.value); |
||||
objectiveMarker.setLatLng(newLatLng); |
||||
}); |
||||
|
||||
</script> |
||||
|
||||
{% endblock %} |
Loading…
Reference in new issue