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.

106 lines
3.6 KiB

{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='assets/leaflet/leaflet.css') }}" />
<script src="{{ url_for('static', filename='assets/leaflet/leaflet.js') }}"></script>
{% endblock %}
{% block app_content %}
{% if objective.hash is none %}
<h1>Add Objective</h1>
{% elif objective.name == '' %}
<h1>Objective</h1>
{% else %}
<h1>Objective: {{ objective.name }}</h1>
{% endif %}
<hr>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-8">
{% if owner %}
<div class="row">
<form action="" method="post" class="form" role="form">
{{ form.hidden_tag() }}
{{ wtf.form_field(form.objective_name, value=objective.name, class='form-control') }}
{{ wtf.form_field(form.latitude, class='form-control', type='number', value=objective.latitude, min='-90', max='90', step='0.00001') }}
{{ wtf.form_field(form.longitude, class='form-control', type='number', value=objective.longitude, min='-180', max='181', step='0.00001') }}
{{ wtf.form_field(form.submit, class='btn btn-primary') }}
</form>
{% if objective.hash %}
<a href="{{ url_for('objective_delete', objective_hash = objective.hash) }}">
<button class="btn btn-danger">Delete</button></a>
{% endif %}
</div>
<div class="row">
<img src="{{ url_for('objective_qrcode', objective_hash=objective.hash) }}" alt="qr_code_failed", width="100%">
</div>
{% else %}
<h2>latitude: {{ objective.latitude }}</h2>
<h2>longitude: {{ objective.longitude }}</h2>
{% endif %}
</div>
<div id="map" style=" height: 600px; 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: ['{{ objective.latitude }}', '{{ objective.longitude }}'],
minZoom: 6,
maxZoom: 19,
bounds: [[50.5, 3.25], [54, 7.6]],
zoom: 10
});
L.control.scale().addTo(map);
L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', {
attribution: 'Kaartgegevens &copy; <a href="kadaster.nl">Kadaster</a>'
}).addTo( map );
if ('{{ owner }}' == 'True'){
var objectiveMarker = L.marker([
$("#latitude")[0].value,
$("#longitude")[0].value
], {
draggable: true
})
} else {
var objectiveMarker = L.marker([
'{{ objective.latitude }}',
'{{ objective.longitude }}'
])
}
objectiveMarker.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 %}