Skip to content

Commit

Permalink
Try using the templates to avoid maps for non-spatial tables
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonaraphael
jonaraphael committed Oct 18, 2023
1 parent e736a85 commit 45faf8d
Show file tree
Hide file tree
Showing 3 changed files with 320 additions and 0 deletions.
77 changes: 77 additions & 0 deletions cerulean_cloud/cloud_run_tipg/templates/collection.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
{% include "header.html" %}

<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light">
{% for crumb in crumbs %} {% if not loop.last %}
<li class="breadcrumb-item">
<a href="{{ crumb.url }}/">{{ crumb.part }}</a>
</li>
{% else %}
<li class="breadcrumb-item active" aria-current="page">{{ crumb.part }}</li>
{% endif %} {% endfor %}

<li class="ml-auto json-link">
<a target="_blank" href="{{ url }}?f=json">JSON</a>
</li>
</ol>
</nav>

<h1>Collection: {{ response.title or response.id }}</h1>

<div class="row">
<div class="col-sm">
<p>{{ response.description or response.title or response.id }}</p>
{% if "keywords" in response and length(response.keywords) > 0 %}
<div id="keywords">
<p>
{% for keyword in response.keywords %}
<span class="badge badge-secondary">{{ keyword }}</span>
{% endfor %}
</p>
</div>
{% endif %}

<h2>Links</h2>
<ul>
{% for link in response.links %}
<li><a href="{{ link.href }}">{{ link.title or link.rel }}</a></li>
{% endfor %}
</ul>
</div>
<div class="col-sm">
<div id="map" class="rounded" style="width: 100%; height: 400px">
Loading...
</div>
</div>
</div>

<script>
$(function() {
var collection = {{ response|tojson }};
if (collection.extent && collection.extent.spatial){
var bbox = collection.extent.spatial.bbox[0]
var bbox_polygon = L.polygon([
[bbox[1], bbox[0]],
[bbox[1], bbox[2]],
[bbox[3], bbox[2]],
[bbox[3], bbox[0]]
]);

var map = L.map('map').setView([0, 0], 1);
map.addLayer(new L.TileLayer(
'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}
));

map.addLayer(bbox_polygon);
map.fitBounds(bbox_polygon.getBounds());
} else {
document.getElementById("map").style.display = "none";
}

});
</script>

{% include "footer.html" %}
96 changes: 96 additions & 0 deletions cerulean_cloud/cloud_run_tipg/templates/item.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
{% include "header.html" %}

<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light">
{% for crumb in crumbs %}
{% if not loop.last %}
<li class="breadcrumb-item"><a href="{{ crumb.url }}/">{{ crumb.part }}</a></li>
{% else %}<li class="breadcrumb-item active" aria-current="page">{{ crumb.part }}</li>
{% endif %}
{% endfor %}

<li class="ml-auto json-link"><a target="_blank" href="{{ url }}?f=geojson">GeoJSON</a></li>
</ol>
</nav>

<h1>Collection Item: {{ response.id }}</h1>

<div class="row">
<div class="col-sm">
<h2>Properties</h2>
<ul>
<li><strong>ID:</strong> {{ response.id }}</li>
{% for key, value in response.properties.items() %}
<li><strong>{{ key }}:</strong> {{ value }}</li>
{% endfor %}
</ul>
</div>
<div class="col-sm">
<div id="map" class="rounded" style="width:100%;height:400px;">Loading...</div>
</div>
</div>

<script>
var geojson = {{ response|tojson }};
if (geojson.geometry) {
var map = L.map('map').setView([0, 0], 1);
map.addLayer(new L.TileLayer(
'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}
));

function displayValue(value) {
switch (typeof value) {
case 'string':
return value;
case 'number':
return value.toString();
case 'object':
if (value instanceof Array) {
return value.map(displayValue).join(', ');
} else {
return JSON.stringify(value);
}
default:
return '';
}
}

function addPopup(feature, layer) {
if (feature.properties) {
var popupElm = document.createElement('div');
popupElm.style.overflowX = 'scroll';

Object.keys(geojson.properties).map(prop => {
var propElm = document.createElement('div');

var bElm = document.createElement('b');
bElm.innerText = prop;
propElm.appendChild(bElm);
var valueElm = document.createTextNode(` : ${displayValue(feature.properties[prop])}`);
propElm.appendChild(valueElm);

var brElm = document.createElement('br');
propElm.appendChild(brElm);

popupElm.appendChild(propElm);
})

layer.bindPopup(popupElm);
}
}

var features = L.geoJSON(geojson, {
onEachFeature: addPopup
}).addTo(map);

map.fitBounds(features.getBounds());
} else {
document.getElementById("map").style.display = "none";
}

</script>

{% include "footer.html" %}
147 changes: 147 additions & 0 deletions cerulean_cloud/cloud_run_tipg/templates/items.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
{% include "header.html" %}

{% set show_prev_link = false %}
{% set show_next_link = false %}
{% if 'items?' in url %}
{% set urlq = url + '&' %}
{% else %}
{% set urlq = url + '?' %}
{% endif %}


<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light">
{% for crumb in crumbs %}
{% if not loop.last %}
<li class="breadcrumb-item"><a href="{{ crumb.url }}/">{{ crumb.part }}</a></li>
{% else %}<li class="breadcrumb-item active" aria-current="page">{{ crumb.part }}</li>
{% endif %}
{% endfor %}

<li class="ml-auto json-link"><a target="_blank" href="{{ urlq }}f=geojson">GeoJSON</a></li>
</ol>
</nav>

<h1>Collection Items: {{ response.title or response.id }}</h1>

<div id="map" class="rounded" style="width:100%; height:400px;">Loading...</div>

<p>
<b>Number of matching items:</b> {{ response.numberMatched }}<br/>
<b>Number of returned items:</b> {{ response.numberReturned }}<br/>
<b>Page:</b> <span id="current_page"></span> of <span id="total_pages"></span><br/>
</p>

<div class="form-row" style="margin-bottom:10px;" id="controls">
{% for link in response.links %}
{% if link.rel == 'prev' %}
<div class="col-auto"><a class="btn btn-secondary" title="previous page" href="{{ link.href }}">prev</a></div>
{% endif %}
{% endfor %}
<div class="col-auto">
<select class="form-control" id="limit"> <!-- TODO: dynamically populate the values based on oga_max_limit -->
<option value="10">page size</option>
<option>10</option>
<option>100</option>
<option>1000</option>
<option>10000</option>
</select>
</div>
{% for link in response.links %}
{% if link.rel == 'next' %}
<div class="col-auto"><a class="btn btn-secondary" title="next page" href="{{ link.href }}">next</a></div>
{% endif %}
{% endfor %}
</div>
<div class="table-responsive">
{% if response.features is defined and response.features|length > 0 %}
<table class="table">
<thead class="thead-light">
<th>ID</th>
{% for key, value in response.features.0.properties.items() %}
<th>{{ key }}</th>
{% endfor %}
</thead>
<tbody>
{% for feature in response.features %}
<tr>
<td><a target="_blank" href="{{ template.api_root }}/collections/{{ response.id }}/items/{{ feature.id }}">{{ feature.id }}</a></td>
{% for key, value in feature.properties.items() %}
<td>{{ value }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>

<script>
var currentURL = "{{ template.api_root }}/collections/{{ response.id }}/items"
function changePageSize() {
var url = "{{ template.api_root }}/collections/{{ response.id }}/items?";
url += "limit=" + $("#limit").val();
window.location.href = url;
}
$(function() {
//
// mapping
//
var geojson = {{ response|tojson }};

var features = (geojson.features) ? geojson.features : [];
var hasGeom = features.some(feat => feat.geometry);
if (hasGeom) {
var map = L.map('map').setView([0, 0], 1);
map.addLayer(new L.TileLayer(
'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}
));

function addPopup(feature, layer) {
var aElm = document.createElement('a');
aElm.setAttribute('href', `${currentURL}/${feature.id}`);
aElm.setAttribute('target', '_blank');
aElm.innerText = feature.id;
layer.bindPopup(aElm);
}

var features = L.geoJSON(geojson, {
onEachFeature: addPopup
}).addTo(map);

map.fitBounds(features.getBounds());
} else {
document.getElementById("map").style.display = "none";
}

//
// paging
//
var offset = 0; // defaults
var limit = 10;

{% if "offset" in template.params %}
offset = {{ template.params.offset }};
{% endif %}
{% if "limit" in template.params %}
limit = {{ template.params.limit }};
{% endif %}

var current_page = (offset + limit)/limit;
$("#current_page").html(current_page);
var total_pages = Math.ceil({{ response.numberMatched }}/limit);
$("#total_pages").html(total_pages);

//
// event handling
//
$("#limit").on("change", function() {
changePageSize();
});
});
</script>

{% include "footer.html" %}

0 comments on commit 45faf8d

Please sign in to comment.