85 lines
2.2 KiB
HTML
85 lines
2.2 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block title %}Geocode to Commons{% endblock %}
|
||
|
|
|
||
|
|
{% block link %}
|
||
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||
|
|
crossorigin=""/>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block script %}
|
||
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||
|
|
crossorigin=""></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var map = L.map('map').setView([56, -4], 6);
|
||
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
|
|
maxZoom: 19,
|
||
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||
|
|
}).addTo(map);
|
||
|
|
|
||
|
|
|
||
|
|
var marker;
|
||
|
|
|
||
|
|
map.on('click', function(e) {
|
||
|
|
document.getElementById('info').innerHTML = '';
|
||
|
|
if (marker) {
|
||
|
|
// If the marker already exists, just set its new position
|
||
|
|
marker.setLatLng(e.latlng);
|
||
|
|
} else {
|
||
|
|
// If the marker doesn't exist yet, create it at the clicked position
|
||
|
|
marker = L.marker(e.latlng).addTo(map);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Send XHR to the server
|
||
|
|
var xhr = new XMLHttpRequest();
|
||
|
|
xhr.open('GET', '{{ request.root_path }}/pin/' + e.latlng.lat + '/' + e.latlng.lng, true);
|
||
|
|
xhr.onload = function() {
|
||
|
|
if (xhr.status === 200) {
|
||
|
|
var response = JSON.parse(xhr.responseText);
|
||
|
|
document.getElementById('info').innerHTML = response.html;
|
||
|
|
} else {
|
||
|
|
console.error('Request failed. Returned status of ' + xhr.status);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
xhr.send();
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block style %}
|
||
|
|
<style>
|
||
|
|
|
||
|
|
/* Styles for the map */
|
||
|
|
#map {
|
||
|
|
position: fixed; /* This keeps the map in place when the page is scrolled */
|
||
|
|
top: 0; /* Starting from the top edge of the browser window */
|
||
|
|
right: 0; /* Positioned on the right side */
|
||
|
|
width: 50%; /* Half the screen width */
|
||
|
|
height: 100%; /* Full height of the browser window */
|
||
|
|
}
|
||
|
|
|
||
|
|
#main {
|
||
|
|
width: 48%
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ css | safe }}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div id="map"></div>
|
||
|
|
<div class="m-3" id="main">
|
||
|
|
<h1>Geocode coordinates to Commons Category</h1>
|
||
|
|
|
||
|
|
<div id="info">Click on the map</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% endblock %}
|