Skip to content

Commit 7cf0586

Browse files
webb-benwebb-ben
authored
Add mainstem tile representations (#34)
* Commit tiles * Add MVT representations of mainstems * Revert "Commit tiles" This reverts commit 9f5ebfb. * Use zipped mainstem tiles
1 parent 6536f41 commit 7cf0586

File tree

4 files changed

+188
-1
lines changed

4 files changed

+188
-1
lines changed

‎Dockerfile

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,9 @@ RUN pip3 install --no-cache-dir --no-deps https://github.com/cgs-earth/pygeoapi-
1010

1111
COPY ./sitemap /sitemap
1212
RUN mv /sitemap/_sitemap.xml /sitemap/sitemap.xml
13+
14+
COPY ./tiles /tmp/tiles/
15+
RUN apt-get update \
16+
&& apt-get install -y unzip \
17+
&& mkdir -p /data/tiles \
18+
&& unzip /tmp/tiles/* -d /data/tiles/

‎pygeoapi-skin-dashboard/templates/collections/tiles/index.html

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
{% extends "_base.html" %}
2+
{% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
3+
{% block crumbs %}{{ super() }}
4+
/ <a href="{{ data['collections_path'] }}">{% trans %}Collections{% endtrans %}</a>
5+
/ <a href="../{{ data['id'] }}">{{ data['title'] }}</a>
6+
/ <a href="../{{ data['id'] }}/tiles">{% trans %}Tiles{% endtrans %}</a>
7+
{% endblock %}
8+
{% block extrahead %}
9+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
11+
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
12+
<style>
13+
.leaflet-popup-content {
14+
width: 200px;
15+
height: 100px;
16+
}
17+
</style>
18+
{% endblock %}
19+
20+
{% block body %}
21+
<section id="collection">
22+
<h1>{{ data['title'] }}</h1>
23+
<p>{{ data['description'] }}</p>
24+
<p>
25+
{% for kw in data['keywords'] %}
26+
<span class="badge text-bg-primary bg-primary">{{ kw }}</span>
27+
{% endfor %}
28+
</p>
29+
<h3>Tiles</h3>
30+
<div class="row">
31+
<div class="col-md-2 col-sm-12">{% trans %}Tile Matrix Set{% endtrans %}</div>
32+
<div class="col-md-8">
33+
<select id="tilingScheme">
34+
{% for tileset in data['tilesets'] %}
35+
<option value="{{ tileset }}">{{ tileset }}</option>
36+
{% endfor %}
37+
</select>
38+
</div>
39+
</div>
40+
<br/>
41+
<div class="row">
42+
<div class="col-md-2 col-sm-12">{% trans %}Metadata{% endtrans %}</div>
43+
<div class="col-md-8"><a id="metadata_link" href="" target="_blank">Metadata</a></div>
44+
</div>
45+
<script>
46+
var select = document.getElementById('tilingScheme');
47+
let params = (new URL(document.location)).searchParams;
48+
var scheme = params.get('scheme') ?? select.value;
49+
if (scheme) {
50+
select.value = scheme;
51+
document.getElementById("metadata_link").href = "{{ config['server']['url'] }}/collections/{{ data['id'] }}/tiles/" + scheme + "/metadata";
52+
}
53+
select.addEventListener('change', ev => {
54+
var scheme = ev.target.value;
55+
console.log(scheme);
56+
document.location.search = `scheme=${scheme}`;
57+
document.getElementById("metadata_link").href = "{{ config['server']['url'] }}/collections/{{ data['id'] }}/tiles/" + scheme + "/metadata";
58+
});
59+
</script>
60+
<br/>
61+
<div class="row">
62+
<div class="col-md-2 col-sm-12">Map</div>
63+
<div class="col-md-8">
64+
<div id="items-map"></div>
65+
</div>
66+
</div>
67+
</section>
68+
{% endblock %}
69+
70+
{% block extrafoot %}
71+
<script>
72+
var map = L.map('items-map').setView([{{ 45 }}, {{ -75 }}], 10);
73+
74+
map.addLayer(new L.TileLayer(
75+
'{{ config["server"]["map"]["url"] }}', {
76+
maxZoom: {{ data['maxzoom'] }},
77+
attribution: '{{ config["server"]["map"]["attribution"] | safe }}'
78+
}
79+
));
80+
81+
{% for link in data["links"] %}
82+
{% if link["rel"] == "item" %}
83+
var tilesUrl = '{{ link["href"] }}';
84+
{% endif %}
85+
{% endfor %}
86+
var url = tilesUrl
87+
.replace('{dataset}', '{{ data["id"] }}')
88+
.replace('{tileMatrixSetId}', scheme)
89+
.replace("tileMatrix", "z")
90+
{% if data['tile_type'] == 'raster' %}
91+
url = url
92+
.replace("tileRow", "y")
93+
.replace("tileCol", "x");
94+
map.addLayer(new L.TileLayer(
95+
url, {
96+
maxZoom: {{ data['maxzoom'] }},
97+
crs: 'EPSG:3857'
98+
}
99+
));
100+
{% elif data['tile_type'] == 'vector' %}
101+
url = url
102+
.replace("tileRow", "x")
103+
.replace("tileCol", "y");
104+
var VectorTileOptions = {
105+
interactive: true,
106+
rendererFactory: L.canvas.tile,
107+
maxZoom: {{ data['maxzoom'] }},
108+
indexMaxZoom: 5,
109+
getFeatureId: function(feat) {
110+
return feat.properties["id"]
111+
},
112+
vectorTileLayerStyles: {
113+
{{ data["id"] }}: function(properties, zoom) {
114+
115+
return {
116+
weight: 1,
117+
}
118+
}
119+
}
120+
};
121+
122+
var highlight;
123+
var clearHighlight = function() {
124+
if (highlight) {
125+
tilesPbfLayer.resetFeatureStyle(highlight);
126+
}
127+
highlight = null;
128+
};
129+
130+
var tilesPbfLayer = L.vectorGrid.protobuf(url, VectorTileOptions)
131+
.on('click', function(e) { // The .on method attaches an event handler
132+
var uri = e.layer.properties.uri;
133+
L.popup({minWidth: 300, maxHeight: 50})
134+
.setContent(`<b>URI</b>: <a href="${uri}">${uri}</a>`)
135+
.setLatLng(e.latlng)
136+
.openOn(map);
137+
138+
clearHighlight();
139+
highlight = e.layer.properties.id;
140+
tilesPbfLayer.setFeatureStyle(highlight, {
141+
weight: 2,
142+
color: 'red',
143+
opacity: 1,
144+
fillColor: 'red',
145+
fill: false,
146+
radius: 6,
147+
fillOpacity: 1
148+
});
149+
150+
L.DomEvent.stop(e);
151+
})
152+
.addTo(map);
153+
154+
map.on('click', clearHighlight);
155+
{% endif %}
156+
157+
bounds = L.latLngBounds([
158+
[
159+
{{ data['bounds'][1] }},
160+
{{ data['bounds'][0] }}
161+
],[
162+
{{ data['bounds'][3] }},
163+
{{ data['bounds'][2] }}
164+
]
165+
]);
166+
map.fitBounds(bounds, maxZoom={{ data['maxzoom']}});
167+
168+
</script>
169+
{% endblock %}

‎pygeoapi.config.yml

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@ server:
4040
language: en-US
4141
cors: true
4242
pretty_print: true
43-
limit: 500
43+
limits:
44+
default_items: 500
45+
max_items: 10000
4446
map:
4547
url: https://tile.openstreetmap.org/{z}/{x}/{y}.png
4648
attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'
@@ -523,6 +525,16 @@ resources:
523525
- subject: '?distribution'
524526
predicate: 'schema:encodingFormat'
525527
object: '?distributionFormat'
528+
- type: tile
529+
name: MVT-tippecanoe
530+
data: /data/tiles/mainstems/
531+
options:
532+
zoom:
533+
min: 0
534+
max: 10
535+
format:
536+
name: pbf
537+
mimetype: application/vnd.mapbox-vector-tile
526538

527539
dams: # updated 2024-04-23
528540
type: collection

‎tiles/mainstems.zip

76.6 MB
Binary file not shown.

0 commit comments

Comments
 (0)