forked from orson/bachemap
50 lines
1.5 KiB
HTML
50 lines
1.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Add Pin</title>
|
||
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='leaflet.css') }}">
|
||
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Add a New Pin</h1>
|
||
|
|
<form method="post" enctype="multipart/form-data">
|
||
|
|
{{ form.hidden_tag() }}
|
||
|
|
<p>
|
||
|
|
{{ form.description.label }}<br>
|
||
|
|
{{ form.description(size=32) }}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
{{ form.photo.label }}<br>
|
||
|
|
{{ form.photo() }}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<label for="lat">Latitude:</label><br>
|
||
|
|
<input type="text" id="lat" name="lat" readonly>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<label for="lng">Longitude:</label><br>
|
||
|
|
<input type="text" id="lng" name="lng" readonly>
|
||
|
|
</p>
|
||
|
|
<p>{{ form.submit() }}</p>
|
||
|
|
</form>
|
||
|
|
<a href="{{ url_for('index') }}">Back to map</a>
|
||
|
|
|
||
|
|
<div id="map" style="height: 600px;"></div>
|
||
|
|
<script src="{{ url_for('static', filename='leaflet.js') }}"></script>
|
||
|
|
<script>
|
||
|
|
var map = L.map('map').setView([51.505, -0.09], 13);
|
||
|
|
|
||
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
|
|
attribution: '© OpenStreetMap contributors'
|
||
|
|
}).addTo(map);
|
||
|
|
|
||
|
|
map.on('click', function(e) {
|
||
|
|
var latlng = e.latlng;
|
||
|
|
document.getElementById('lat').value = latlng.lat;
|
||
|
|
document.getElementById('lng').value = latlng.lng;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|