{% 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 not objective.hash %} <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') }} {% if objective.hash %} <div class="form-group"> <label for="hash">Hash</label> <p>{{ objective.hash }}</p> </div> {% endif %} {{ wtf.form_field(form.submit, class='btn btn-primary') }} </form> {% if objective.hash %} <a href="{{ url_for('main.delete_objective', objective_hash = objective.hash) }}"> <button class="btn btn-danger">Delete</button></a> {% endif %} </div> {% if objective.hash %} <div class="row"> <a href="{{ url_for('main.objective', objective_hash=objective.hash) }}"> <img src="{{ url_for('main.objective_qrcode', objective_hash=objective.hash) }}" alt="qr_code_failed", width="100%"> </a> </div> {% endif %} {% 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: 18, 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 © <a href="https://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 %}