You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.6 KiB
79 lines
2.6 KiB
4 years ago
|
{% 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 %}
|