adding the crumbspath as suggested in #93
various improvements in html display; add items list to items page, add link to json in crumbs bar, add description where available
This commit is contained in:
Paul
+12
-1
@@ -433,7 +433,7 @@ class API(object):
|
||||
self.config['server']['url'], dataset, next_)
|
||||
}, {
|
||||
'type': 'application/json',
|
||||
'title': 'Collection',
|
||||
'title': self.config['datasets'][dataset]['title'],
|
||||
'rel': 'collection',
|
||||
'href': '{}/collections/{}'.format(
|
||||
self.config['server']['url'], dataset)
|
||||
@@ -525,8 +525,19 @@ class API(object):
|
||||
}, {
|
||||
'rel': 'collection',
|
||||
'type': 'application/json',
|
||||
'title': self.config['datasets'][dataset]['title'],
|
||||
'href': '{}/collections/{}'.format(
|
||||
self.config['server']['url'], dataset)
|
||||
}, {
|
||||
'rel': 'prev',
|
||||
'type': 'application/json',
|
||||
'href': '{}/collections/{}/items/{}'.format(
|
||||
self.config['server']['url'], dataset, identifier ) #todo: getPrevious
|
||||
}, {
|
||||
'rel': 'next',
|
||||
'type': 'application/json',
|
||||
'href': '{}/collections/{}/items/{}'.format(
|
||||
self.config['server']['url'], dataset, identifier ) #todo: getNext
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -6,4 +6,19 @@ header {
|
||||
}
|
||||
main {
|
||||
background-color:white
|
||||
}
|
||||
}
|
||||
|
||||
.crumbs {
|
||||
background-color:rgb(230, 230, 230);
|
||||
padding: 6px;
|
||||
}
|
||||
.crumbs a {
|
||||
padding-left:10px;
|
||||
color:black;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
#items-map {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
@@ -20,24 +20,35 @@
|
||||
</head>
|
||||
<body>
|
||||
<header class="sticky row">
|
||||
<div class="col-sm col-md-10 col-md-offset-1">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1">
|
||||
<a role="button" title="{{ config['metadata']['identification']['description'] }}" href="{{ config['server']['url'] }}/?f=html">{{ config['metadata']['identification']['title'] }}</a>
|
||||
<a href="#" role="button" style="float:right">Contact</a>
|
||||
<a href="#" role="button" style="float:right">About</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="sticky row crumbs">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1">
|
||||
{% block crumbs %}
|
||||
<a href="{{ config['server']['url'] }}">Home</a>
|
||||
{% endblock %}
|
||||
<span style="float:right">
|
||||
<a href=".?f=json">JSON</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<div class="container">
|
||||
<div class="row cols-sm-12 cols-md-10">
|
||||
<div class="col-md-offset-1">
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1">
|
||||
<br/>
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="row bottom">
|
||||
<div class="col-sm col-md-10 col-md-offset-1">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1">
|
||||
Powered by <a title="pygeoapi" href="https://github.com/geopython/pygeoapi">pygeoapi</a> {{ version }}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
|
||||
{% block crumbs %}{{ super() }}
|
||||
<a href="../collections">Collections</a>
|
||||
<a href="./{{ data['name'] }}">{{ data['title'] }}</a>
|
||||
{% endblock %}
|
||||
{% block body %}
|
||||
<section id="collection">
|
||||
<h2>{{ data['title'] }}<a title="JSON" href="{{ config['server']['url'] }}/collections/{{ data['name'] }}"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
|
||||
<h2>{{ data['title'] }}</h2>
|
||||
<div>{{ data['description'] }}</div>
|
||||
<div><a title="Browse Features" href="{{ config['server']['url'] }}/collections/{{ data['name'] }}/items?f=html">Browse Features</a></div>
|
||||
<div><a title="Browse Items" href="{{ config['server']['url'] }}/collections/{{ data['name'] }}/items?f=html">Browse</a> through the items of the collection {{ data['title'] }}</div>
|
||||
<h2>Links</h2>
|
||||
<ul>
|
||||
{% for link in data['links'] %}
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ super() }} Collections {% endblock %}
|
||||
{% block crumbs %}{{ super() }}
|
||||
<a href="./collections">Collections</a>
|
||||
{% endblock %}
|
||||
{% block body %}
|
||||
<section id="collections">
|
||||
<h2>Collections <a title="JSON" href="{{ config['server']['url'] }}/collections"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
|
||||
<h2>Collections in this service</h2>
|
||||
<ul>
|
||||
{% for k, v in config['datasets'].items()%}
|
||||
<li><a title="{{ v['title'] }}" href="{{ config['server']['url'] }}/collections/{{ k }}?f=html">{{ v['title'] }}</a></li>
|
||||
<li>
|
||||
<a title="{{ v['title'] }}" href="{{ config['server']['url'] }}/collections/{{ k }}?f=html">{{ v['title'] }}</a><br/>
|
||||
{{ v['description'] }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
@@ -1,28 +1,42 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
|
||||
{% block crumbs %}{{ super() }}
|
||||
<a href="../../../collections">Collections</a>
|
||||
{% for link in data['links'] %}
|
||||
{% if link.rel == 'collection' %}
|
||||
<a href="{{ link['href'] }}">{{ link['title'] }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<a href="../items">Items</a>
|
||||
<a href="./{{ data['ID'] }}">{{ data['title'] or data['ID'] }}</a>
|
||||
{% 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: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<section id="items">
|
||||
<h2>{{ data['title'] }}</h2>
|
||||
<span>{{ data['description'] }}</span>
|
||||
<h2>Feature {{ data['ID'] }} <a title="JSON" href="./{{ data['ID'] }}"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td><h3>Properties</h3>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h2>Item {{ data['ID'] }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h3>Properties</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Property</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<td>{{ data.ID }}</td>
|
||||
</tr>
|
||||
{% for k, v in data['properties'].items() %}
|
||||
<tr>
|
||||
<th>{{ k }}</th>
|
||||
@@ -39,13 +53,25 @@
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div id="items-map"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div col-sm-12">
|
||||
{% for link in data['links'] %}
|
||||
{% if link['rel'] == 'prev' %}
|
||||
<a role="button" href="{{ link['href'] }}&f=html">Prev</a>
|
||||
{% elif link['rel'] == 'next' %}
|
||||
<a role="button" href="{{ link['href'] }}&f=html">Next</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -1,32 +1,63 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
|
||||
{% block crumbs %}{{ super() }}
|
||||
<a href="../../collections">Collections</a>
|
||||
{% for link in data['links'] %}
|
||||
{% if link.rel == 'collection' %}
|
||||
<a href="{{ link['href'] }}">{{ link['title'] }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<a href="./items">Items</a>
|
||||
{% 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>
|
||||
<div class="row col-sm-12">
|
||||
<h2>Items</h2>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
{% for k, v in data['features'][0]['properties'].items() %}
|
||||
<th>{{ k }}</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for ft in data['features'] %}
|
||||
<tr>
|
||||
<td data-label="ID"><a href="items/{{ ft.ID }}">{{ ft.ID }}</a></td>
|
||||
{% for k, v in ft['properties'].items() %}
|
||||
<td data-label="{{ k }}">{{ v }}</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div id="items-map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div col-sm-12">
|
||||
{% for link in data['links'] %}
|
||||
{% if link['rel'] == 'prev' %}
|
||||
<a role="button" href="{{ link['href'] }}&f=html">Prev</a>
|
||||
{% elif link['rel'] == 'next' %}
|
||||
<a role="button" href="{{ link['href'] }}&f=html">Next</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@@ -42,7 +73,7 @@
|
||||
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>';
|
||||
var html_ = '<span><a href="items/' + feature.ID + '?f=html">' + feature.ID + '</a></span>';
|
||||
layer.bindPopup(html_);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -11,10 +11,12 @@
|
||||
</table>
|
||||
</section>
|
||||
<section id="conformance">
|
||||
<h2><a href="{{ config['server']['url'] }}/conformance?f=html">Conformance</a></h2>
|
||||
<h2>Conformance</h2>
|
||||
<a href="{{ config['server']['url'] }}/conformance?f=html">View the conformance classes of this service</a>
|
||||
</section>
|
||||
<section id="collections">
|
||||
<h2><a href="{{ config['server']['url'] }}/collections?f=html">Collections</a></h2>
|
||||
<h2>Collections</h2>
|
||||
<a href="{{ config['server']['url'] }}/collections?f=html">View the collections in this service.</a>
|
||||
</section>
|
||||
<section id="links">
|
||||
<h2>Links</h2>
|
||||
|
||||
Reference in New Issue
Block a user