Tom Kralidis
54 lines
1.7 KiB
HTML
54 lines
1.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
|
|
{% block extrahead %}
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
|
|
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
|
|
<style>
|
|
#items {
|
|
width: 80%;
|
|
}
|
|
#items-map {
|
|
width: 100%;
|
|
height: 600px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<section id="items">
|
|
<h2>{{ data['title'] }}</h2>
|
|
<span>{{ data['description'] }}</span>
|
|
<h2>Features <a title="JSON" href="./items"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
|
|
{% for link in data['links'] %}
|
|
{% if link['rel'] == 'prev' %}
|
|
<a href="{{ link['href'] }}&f=html">Prev</a>
|
|
{% elif link['rel'] == 'next' %}
|
|
<a href="{{ link['href'] }}&f=html">Next</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
<div id="items-map"></div>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
{% block extrafoot %}
|
|
<script>
|
|
var map = L.map('items-map').setView([{{ 45 }}, {{ -75 }}], 5);
|
|
map.addLayer(new L.TileLayer(
|
|
'http://tile.osm.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 18,
|
|
subdomains: '1234'
|
|
}
|
|
));
|
|
var geojson_data = {{ data['features'] |to_json }};
|
|
var items = new L.GeoJSON(geojson_data, {
|
|
onEachFeature: function (feature, layer) {
|
|
var html_ = '<span><a target="_blank" href="items/' + feature.ID + '?f=html">' + feature.ID + '</a></span>';
|
|
layer.bindPopup(html_);
|
|
}
|
|
});
|
|
|
|
map.addLayer(items);
|
|
map.fitBounds(items.getBounds());
|
|
</script>
|
|
{% endblock %}
|