ol-stac: STAC and OpenLayers combined
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
Title |
| |
Title of Series | ||
Number of Parts | 156 | |
Author | ||
License | CC Attribution 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
Identifiers | 10.5446/68503 (DOI) | |
Publisher | ||
Release Date | ||
Language |
Content Metadata
Subject Area | ||
Genre | ||
Abstract |
| |
Keywords |
FOSS4G Europe 2024 Tartu84 / 156
6
33
35
53
55
59
61
67
70
87
97
99
102
103
104
105
107
111
121
122
123
124
125
126
127
128
134
144
150
151
155
00:00
Process (computing)Stack (abstract data type)MappingLibrary (computing)Group actionOpen set
00:11
Local GroupMountain passVolumenvisualisierungLink (knot theory)GeometryFile formatServer (computing)Computer fileVisualization (computer graphics)Level (video gaming)Point cloudLink (knot theory)Mathematical optimizationExtension (kinesiology)Web 2.0VolumenvisualisierungService (economics)Maxima and minimaGeometryTesselationMetadataElectronic mailing listBoolean algebraFile formatCuboidComputer animation
01:08
CuboidLevel (video gaming)HookingDifferent (Kate Ryan album)InformationMedical imagingEvent horizonProbability density functionElectronic mailing listType theoryVisualization (computer graphics)ThumbnailDemo (music)TesselationMultiplication signComputer animation
01:47
Generic programmingCodeDifferent (Kate Ryan album)MappingConnectivity (graph theory)Library (computing)LogicAdaptive behaviorView (database)Demo (music)Computer animationLecture/Conference
02:27
Demo (music)Computer animation
02:31
Library (computing)Stack (abstract data type)Computer fileLevel (video gaming)Uniform resource locatorObject (grammar)Point cloudStructural loadTesselationGroup actionRight angleRange (statistics)GeometryModal logicMathematical optimizationComputer animationLecture/Conference
03:26
Service (economics)Event horizonMultiplicationLink (knot theory)Electronic mailing listPoint (geometry)ThumbnailCASE <Informatik>Computer animation
04:15
Metra potential methodWebsiteMappingConnectivity (graph theory)Library (computing)Point (geometry)Computer animation
04:36
Computer-assisted translationPoint (geometry)Connectivity (graph theory)MappingLibrary (computing)Computer animation
Transcript: English(auto-generated)
00:00
Good morning, this is a small library for showing stack entities on OpenLayers maps. And what it does is pretty much creates a layer group in OpenLayers. And then you pass in a stack entity such as a stack item or a collection or a list of items and collections. And then it tries to make the best out of it and try to render what is in the stack entity.
00:22
So, for example, an item has geometry and a collection has one or multiple bounding boxes, so it starts to show that, of course. And then it looks into the assets, whether there are anything that it can render. So, for example, if there is a Cloud Optimized Geotiff, then it starts to render that and shows it to you based on the metadata that you have.
00:42
So, if there are min and max values, for example, it tries to stretch the values accordingly for nice visualization. And then, if there are other file formats, it can actually also pass that through a tile renderer so that you can also show those on the map. Then there is a Web Map Links extension which can link to other tile services such as WMTS, WMS, and that is also passed through.
01:09
This should be an animation, but in the PDF it doesn't work, so let's look at that in the demo. So, what it tries to visualize on the map is, in the end, a thumbnail, if it's available, a Geotiff, or all these different types of map visualizations, XYZ, WMS, WMTS, or PMTiles.
01:30
If there are lists of items and collections, it tries to render all of them with the bounding boxes and the images on the map. And there are events that you can hook into so that if you're clicking one of these,
01:42
for example, it shows you or gives you information about the stack entity that you have clicked. There are other ideas that came up. For example, stack layer is the same for Leaflet. There is another library that does the same for Leaflet. But what is it, for example, about Map Libre? Yesterday there was Terradraw, for example, so there's the idea.
02:04
Maybe we can just do the same there, where you have adapters for different mapping libraries and the whole business logic is the same. So that's something that if you're interested in other mapping libraries, that's something we can discuss, of course. That would be an interesting idea, I think. And then maybe integrating something like this also as components into these view component libraries would also be an interesting idea, just saw.
02:29
Let's quickly go into the demo because the animations don't work. Let's see whether that goes according to plan. So here's some examples, right? And they show you how to use the library and what it does.
02:42
So, for example, if I just render a stack item that has a coq file, it loads a map, shows the geometry and then starts to load the Cloud Optimized Geotab. You can zoom in, as usual, and then it loads the necessary tiles via HTTP range requests and shows them on the map. It's relatively simple. That's all the JavaScript that you need. You pretty much import the
03:04
stack layer group here, do all the other things that you need for open layers. It reprojects automatically if required, if you have this here, and then you pass in the URL to the stack entity or the stack object and then pretty much just add it to the map.
03:23
And there you go, that's it. If you have multiple lists of items, that just shows this. This is based because there are no cogs in the examples. It tries to do the best with the thumbnails, for example. And if you click them, that's the events here that you see. In this case, it just shows the ID that you clicked.
03:46
But you could show pop-ups or anything. So maybe just go through the examples, have a look. WMS loaded from a service here that is in the stack entity here, so if there is a link that points to WMS, you can specify which layers to show.
04:03
And then you have it. You could add, for example, a layer chooser here as well. And then, depending on which things you have, you can change the opacity of individual layers, etc. And that's it. The website is here. If you want to use it, it's on NPM. You can just install it and use it.
04:23
As I said, there is an equivalent for leaflet as well, which is called stacklayer. You can find it on NPM and GitHub as well. But maybe we can also just abstract it away and do one of these libraries for all mapping components at some point. Thanks.