OpenLayers Feature Frenzy
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 | 351 | |
| Author | ||
| Contributors | ||
| 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/69245 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Year | 2022 |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
FOSS4G Firenze 20221 / 351
1
7
13
22
25
31
33
36
39
41
43
44
46
52
53
55
58
59
60
76
80
93
98
104
108
127
128
133
135
141
142
143
150
151
168
173
176
178
190
196
200
201
202
204
211
219
225
226
236
242
251
258
263
270
284
285
292
00:00
Lattice (order)MathematicsSoftware developerServer (computing)Remote procedure callDemo (music)Process (computing)Revision controlLibrary (computing)Open setBitMobile appDirectory serviceComputer animation
00:55
Source codeFunction (mathematics)Computer configurationConstructor (object-oriented programming)Module (mathematics)Social classVector spaceModul <Datentyp>Artistic renderingPoint (geometry)PolygonLine (geometry)Library (computing)Goodness of fitWebsiteVolumenvisualisierungBitAuthorizationModule (mathematics)Line (geometry)InternetworkingWordLevel (video gaming)Point (geometry)Revision controlSoftware developerWeb browserIntegrated development environmentDifferent (Kate Ryan album)PolygonAdditionOpen setMathematicsLatent heatVector spaceGame controllerComputer animation
02:49
Tape driveQuicksortPolygonLevel (video gaming)Constructor (object-oriented programming)AreaDifferenz <Mathematik>Covering spaceInsertion lossComputer animation
03:43
Set (mathematics)Web 2.0VolumenvisualisierungFocus (optics)
04:04
Personal digital assistantDefault (computer science)Shader <Informatik>Vector spaceAttribute grammarClique-widthDifferent (Kate Ryan album)Level (video gaming)Vertex (graph theory)Default (computer science)Functional (mathematics)Shader <Informatik>ExpressionFormal languageClique-widthGraph coloringAttribute grammarCASE <Informatik>Library (computing)Sinc functionComputer animation
05:16
WaveComputer configurationVector spaceSinc functionPoint (geometry)Level (video gaming)Greatest elementReal numberComputer configurationOpen setInteractive televisionZoom lensPolygonPresentation of a groupLibrary (computing)Tracing (software)Network topologyVector spaceComputer animation
05:58
Vertex (graph theory)Interactive televisionFunctional (mathematics)Patch (Unix)Computer configurationTracing (software)
06:40
Clique-widthAttribute grammarSymbol tableComputer fontInteractive televisionLevel (video gaming)Default (computer science)Category of beingDifferent (Kate Ryan album)Link (knot theory)Computer iconComputer configurationCartesian coordinate systemWeb pageOpen setDynamical systemTesselationStandard deviationInformationSingle-precision floating-point formatPresentation of a groupUniform resource locatorExpressionGroup actionVolumenvisualisierungRaster graphicsSource codeState of matterCodeVector spacePower (physics)Functional (mathematics)Clique-widthLibrary (computing)Constructor (object-oriented programming)MathematicsCurvatureGraph coloringStructural loadBitPoint (geometry)Line (geometry)String (computer science)Object (grammar)Set (mathematics)Asynchronous Transfer ModeEvent horizonNumberPixelArtistic renderingComputer animation
12:13
Structural loadUniform resource locatorArchaeological field surveyZoom lensOpen setSource codeSet (mathematics)Fisher informationBookmark (World Wide Web)View (database)WindowText editorMathematicsComputer animation
12:36
Source codeDifferent (Kate Ryan album)Variable (mathematics)Cartesian coordinate systemSummierbarkeitSubsetGraph coloringAreaArithmetic meanSource codeMathematicsTesselationInterpolationSubject indexingNumberPoint (geometry)Level (video gaming)NeuroinformatikMusical ensembleState of matterArtistic renderingSingle-precision floating-point formatMultiplicationDrag (physics)ExpressionDrop (liquid)Computer animationDiagram
14:21
CASE <Informatik>Personal area networkGraph coloringRaw image formatPixelRight angleStructural loadBoltzmann equationSingle-precision floating-point formatComputer animation
14:44
Structural loadDifferent (Kate Ryan album)Musical ensembleRight angleCASE <Informatik>Price indexNormal (geometry)Subject indexingRaw image formatBootingPixelNeuroinformatikExpressionComputer animation
15:17
Source codeLevel (video gaming)View (database)Image resolutionRotationElement (mathematics)Data structureFunctional (mathematics)Category of beingMusical ensembleSoftware developerVolumenvisualisierungStandard deviationSource codePoint (geometry)Division (mathematics)Computer fileView (database)Level (video gaming)Image resolutionArithmetic progressionRevision controlFunction (mathematics)Internet service providerCASE <Informatik>Multiplication signFlow separationComplex (psychology)ExpressionOpen setTerm (mathematics)Type theoryRegular graphTesselationSocial classStructural loadFluid staticsEvent horizonFrame problemData structurePolygonContext awarenessCartesian coordinate systemState of matterContent (media)Interior (topology)RotationBitExtension (kinesiology)Goodness of fitoutputMetadataCombinational logicQueue (abstract data type)Projective planeOverlay-NetzRaw image formatMereologyAuthorizationSemiconductor memoryParameter (computer programming)Variable (mathematics)Direction (geometry)ImplementationPixelWordOcean currentHeegaard splittingWeb 2.0Element (mathematics)Uniform resource locatorGeometryOperator (mathematics)Computer configurationSingle-precision floating-point formatLibrary (computing)Computer animation
22:21
Computer configurationEvent horizonComplete metric spaceLevel (video gaming)Type theorySoftware developerCategory of beingVideoconferencingMereologyPresentation of a groupAutomatic differentiationComputer animation
23:15
Software developerCodeSoftware developerProjective planeNeighbourhood (graph theory)Computer animation
Transcript: English(auto-generated)
00:00
Thanks all for joining. Andreas is a bit taller, so I should probably put this at my forehead. And thanks to those that are joining remotely. We're braving a live demonstration here, so we hope people are tolerant of any hiccups along the way. We've got a lot of live demos. We're excited to show you.
00:22
I'm Tim Schaub and I work at Planet Labs. I'm Andreas Hoceva, and I'm co-founder of a small Austrian company called W3Geo. And we're excited today to talk to you about what's new in OpenLayers. If folks haven't used the library before, or it's been a while, this is our three-step process for getting started.
00:44
npm create-ol-app, my-new-app, my-app, change into that directory, and then npm start to start a development server. So let's dive in and see what's new. We've just released version 7 of the library, so this is our seventh major version.
01:03
Along with that comes some breaking changes. We took the opportunity to clean up the library a bit, and we dropped support for Internet Explorer. We had a good 16-year run with Internet Explorer, but it was
01:22
quite cathartic to be able to move beyond it and get rid of all the workarounds and other things we had in the library that were IE specific. We also took the opportunity to refresh the look and feel a little bit. The website has gotten a little overhaul. The documentation is a little bit easier to read, and we've cleaned up the style, kind of trimmed it down.
01:40
You'll notice the map controls have gone gray, like me. So specifically what's new in version 7, we've got a new WebGL vector render that we're excited to keep building on. Because we've dropped support for Internet Explorer, we no longer need to transpile modules in the library, so for those
02:01
who don't recognize the word transpile, it's just about taking what you've authored in the library and changing it so it works with a different target environment, like an older browser. We no longer do that, so what we author in the library is directly what you use during development. This meant that our package size dropped by about five megabytes.
02:20
We also have a lot of other goodies in Open Layer 7 and recent releases that we're excited to get into. And now let's look into the most recent addition, which is WebGL vector renderer, not only for points, which we had already, but also for lines and polygons. Right now this is in an early development stage. The APIs around it are
02:45
experimental, and it currently works for untiled vector data only. Let me show an example to get started with. Here I have a map of Austria, the country I live in. It shows the Korean land cover data for 2018, and I also have prepared a diff between 2012 and 2018 to show
03:07
where soil was lost due to construction, built roads, or things like skippists. And you see the region around Vienna is
03:20
the fastest growing region of Austria, but the loss of soil is not very severe here compared to other rural areas. So if I zoom in here to some area, I can show the polygons where soil was lost here, mostly due to creating built-up areas, and I can also switch back to this
03:45
data from 2018 and compare it with the data for 2012. Takes a while to load. Each data set here is about 80 megabytes in GeoJSON, so you can see this amount of data is easy to handle with this WebGL renderer.
04:04
Again, focus on one of these places here and see the difference between 2012, 2018, and 2012. As I said, the API is experimental and very low-level, so I'm not going to focus on it much.
04:21
The default shaders for common use cases allow you to style color, opacity, and width of the stroke using a function that's called with a feature. So most basic use cases are covered with that. That's also the shader I used in this example.
04:41
This is how the default vertex shader looks, so you can see here the attributes for color and opacity, and also uniforms. These are things in the shader language that apply to all features can be provided, but don't take this API for granted. It's really in a very early stage and very low level and is going to change in favor of higher level
05:05
expression-based styling API. Also, one thing that you saw in this example, maybe, was a gradiQL, which we had around in the library since forever, but now it starts to look nice if you look at the labels here at the right side and the bottom of the map throughout all zoom levels.
05:30
All right, and I can't resist showing vector editing. I think every year since I've started showing presentations on open layers I've focused on vector editing. I believe this is a real strong point in the library. We have interactions for drawing new features, for modifying existing features, and then the snap interaction
05:46
lets you retain topology when you're editing features, let's say that polygons that are adjacent to one another. Something that's brand new, so new it's not even released, is this trace option for drawing. So what that looks like,
06:01
I'll show you the existing functionality. Let's say I'm drawing over here on the right. The snap interaction is engaged, so that encourages me to snap these vertices to existing vertices. What's new is the trace option. So as I approach this target feature, I snap to it. If I click on the edge of it,
06:21
I can now trace out the edge and then I could go back and snap to finish off. So that'll be in the next release, not included in the 7 release, but it'll be in the next patch or feature release.
06:41
A couple other things, we mentioned styling a bit already. There are a number of different ways to style vector features in open layers. This was the old style for vector layers where you imported the style constructor and the different symbolizers like stroke and fill, and it was quite verbose. You'd say new style, new fill, new stroke, etc.
07:02
In a recent release, we've added support for these flat object literal styles, so you can just say fill color, stroke color, stroke width, etc. All the properties that you want, set a style, and that works as long as you have a static style, a style that's not changing per feature or based on any application state.
07:20
This is the style of style that we're progressing towards. So Andreas talked about the WebGL vector render. All the renders and all of our layers will converge upon a style like this, and then we'll support arbitrary expressions instead of those literals like orange. You'll be able to say I want it to come from a feature attribute or some application state to do dynamic styling.
07:42
Another thing that was shown in the last example, but you couldn't see it because I didn't reload the page, is this link interaction. So interactions are about taking events, map events, or user events and taking some action based on those. The link interaction takes changes in the map state or the layer visibility and persists them in the URL, so that when you reload the page
08:01
that state is restored on the map. So the link interaction is new in a recent release. And now back to Andreas to talk about vector tiles. Also, a thing that I've been talking about at every OpenLayers presentation since it was added to the library, and same with vector rendering. There are still
08:22
improvements here, and that's why we still talk about it. The most convenient way these days to add a vector tiles layer is to use the Mapbox vector layer as long as your Mapbox style only has a single vector tile source, then you just provide the style URL, and that's it.
08:41
It's also possible to use the OLMapboxStyle library, which OpenLayers depends on for Mapbox style rendering, and this provides an apply function. The code snippet here applies the whole style with all its vector, geo-chasing, and raster layers to a map, but since the last release it can also apply it to a layer group, which I have
09:03
imported here, so you can see where to find it. And it works exactly the same way and makes it easier to combine layers from a Mapbox style with your own application layers. Another new thing that's quite exciting to use is
09:21
symbol decluttering, not only per layer, but also per style. So previously decluttering symbols and text was only possible on a whole layer using the declutter option, and now at least for icons you can decouple it from the declutter property on the layer by using the new icon style property declutter mode, which you can set to none,
09:44
which means it won't be decluttered at all, or to obstacles, which means other styles will not cover it, but it will not get decluttered with styles from its own property.
10:00
The next important thing that was added is rich text style. Previously when you used the text property of a text style or the set text method, you could provide a string and that would be styled with the style properties that you have on the text style. Now you can instead provide an array, and this array always contains pairs of a text that you want to render, and the style,
10:27
this is a CSS font style that you want to render it with. So here you start with the feature ID in bold, 13 pixel font, then you use the default text style, whatever it is, and
10:41
show the name of the feature, then you make a new line, and then with a smaller font, assuming you're going to label grids of solar panels, then the power of the solar panel grid. An example this year, I'm not going to show OpenStreetMap data, but the newly released
11:02
open government data cadastra of the Austrian national land surveying agency, which comes with several exciting styles, and here I can show all these options. So decluttering, like we already know, it looks like quite cluttered when you don't turn it on. Here the parcel
11:24
labels and the streets names overlap, so we want this decluttered, but pay attention to these symbols here, which indicate that these borders here are not partial borders. These have this new option, so they don't get decluttered, so this is this style-based decluttering.
11:43
Rich text styles, here we have on the border of the country, so we use two different font styles for different information that's contained in these points here. The nice thing about Mapbox styles is that it's a de facto standard, and there are nice graphical editing tools for it, like Mapbox Studio or
12:07
Meputnik, and this cadastra also can take advantage of it, of course, and here I'm going to load an alternative style using the Meputnik editor here. You see the preview of the style already. I'm going to
12:22
download this style. You could also make more changes before downloading the style, but anyway, I'm going to save this here, and then I can switch back to my main tab, and this example is configured to accept Mapbox styles per drag-and-drop, and you can see the whole
12:44
cadastra with a different style, and this is a style that I especially like for using the cadastra as background map for other topics. Let me just show you real quickly where it is densest here. The parcels are really dense,
13:00
and this was really optimized for good performance even with these small parcels in this area here. Alright, so last year we introduced WebGL tile rendering and talked about the GeoTIFF sources. There have been a number of enhancements in recent releases, so I want to go over those. By means of review, the GeoTIFF source lets you point to a single,
13:24
let's say, multi-band GeoTIFF, or you can point to multiple single-band GeoTIFFs and render them together in a single layer. One advantage of using this WebGL tile layer is that you have access to the GPU, and we run all of our styling computation on there, so you compose these expressions, like here
13:44
I'm accessing band 3 and then band 4, taking the difference between them and then the ratio of the difference in the sum to get an NDVI, or normalized difference vegetation index. You can also, then you can say you want to color that NDVI value and interpolate it, let's say, between some gray and some green color.
14:04
You can also provide variables, so if your application has some state that changes, this I've shown folks before, but if you have a slider that changes sea level, you can base your style based on that application state, add a listener for changes to your application state, and then update those style variables.
14:23
So here we have this GeoTIFF data loaded, I'm zooming in, panning around, the stuff that's new, I'm showing in the upper right, are the raw pixel values, so in this case we've got single-byte data, so you're seeing those values as I move my mouse around. I can change to a false color composite,
14:45
which loads different bands, where the data is not normalized, it's UINT 16 data in this case, and I'm hovering over and showing the values in the top right, and then here's an example of applying an arbitrary band expression,
15:00
and so I'm computing the normalized difference vegetation index in here, and then again as I hover around, you can see in the top right, I'm taking those raw pixel values, and then showing the NDVI value, and one thing I want you to focus on is this little loader indicator as I zoom around, because that's also something that's new.
15:21
Shown in the previous example, I didn't really focus on it, but when you change from one GeoTIFF to another, if you have an application that's just showing a single layer, instead of configuring your view with the same projection and extent and everything as a GeoTIFF, you can just get those view parameters from the GeoTIFF itself. The part that's new is this get data function, so on a layer now
15:43
you can call get data, you give it a pixel location, and it returns the raw multiband data in the case of GeoTIFFs. The part that enabled that load spinner, it seems quite basic, but we now have a load start and a load end event on the map, so this makes it easier to show progress of loading,
16:02
so in that case we were adding a spinner class and then removing it on load end. A bunch of new WebGL features that we didn't have time to go through in detail, but you can now supply expressions for band arguments, so instead of just a literal band 3, you can say you want it to be based on application state or something.
16:22
We also support a palette operator, so you can have palleted GeoTIFFs and map those to color values. The WebGL context is available in render events, so if people want to do whatever they want to do with a canvas, clip it or do arbitrary operations, you have access to that in render events. We have support for non-square tiles, so if you have tiles that are not as tall as they are wide or something,
16:42
we support those. We support loading GeoTIFFs from a blob, not just from URLs, so if you load your GeoTIFF in some other way, you can now give it to our source as a blob. We read the GeoTIFF metadata, and we have better handling for no data values now in that metadata. We have the new normalize option, which lets you say you don't want the data to be normalized if you want access to
17:02
the raw data instead of having it normalized in your style expressions. The WebGL layer supports multiple sources, or sorry, rather the source supports, you can have multiple sources. You can have it like a GeoTIFF pyramid all together in a single layer, and then finally,
17:20
we support canvas reuse, and Andreas will talk a little bit more about this, but this allows you to have many layers without having a WebGL context for each layer. And this brings me to the history of map composition in OpenLayers. Until version 5, for those who remember back then, we had a very basic WebGL renderer 2,
17:41
and you had to opt in to either render the whole map in WebGL or with canvas 2D, and everything was rendered to a single canvas. In version 6, we split that up, and we created the WebGL points layer, and to support that and to make it easy to also support custom renderers,
18:02
we decided to render each layer to its own canvas, and then throughout, as we progressed with version 6, we started an effort to combine canvas 2D outputs again when they were fully opaque, had the same source
18:21
resolution and the same rotation technique. This was because we found out that the performance dropped because of the need for many canvases to overlay in the DOM, so this was a performance improvement, and as Tim already said, for WebGL, we did the same for canvas 2D, an
18:41
effort to combine all adjacent canvas 2D outputs to a single canvas, and this is especially good news for iOS users. Apple reduced the available canvas memory on iOS devices two times since we started with this new implementation in version 6, and now with this technique, we don't have any memory problems on iOS devices
19:04
anymore. We, with version 6, we also introduced a class name property, which allowed us you to modify the rendered output using CSS or to provide separate
19:20
pre-render and post-render functions for each renderer, and class name was the property that allowed you to split renderers, and that's still available, so if you want open layers to render one layer to its own canvas, you can use this class name property, and renderers are, when you mix renderers using canvas 2D layers or WebGL layers or even custom layers,
19:43
then open layers cannot combine the rendered outputs and will also split outputs to separate canvases, and I'm going to show this example here where really a lot is going on. At the top, you see meterite impacts
20:01
animated per year for our regulars. This is nothing new. We already showed this last year, but new is this layer in the middle here, which comes from a static SVG file and is also styled with pure CSS, so when you hover over it, the background for these polygons is removed, and you see the background layer through, which is a canvas 2D layer.
20:26
So this is quite a complex structure in terms of renderers, and the structure it creates in the OL layers container where all layer renderers go in. It has this background layer using the standard class name OL layer.
20:40
Then it has our custom SVG layer and canvas with the class name WebGL layer. If all these layers were just canvas 2D or just WebGL layers, then this OL layers container would only have one renderer container inside.
21:01
So for those who are interested in loading static SVG like we did in this example, that's really easy. You create a container div element, you fetch the SVG file and put its text content as inner HTML into that container. Then you create a custom layer renderer, which is just a layer with a render function that takes the frame state, and you need this frame state to transform
21:27
this SVG using the current center resolution and size, and then you return that container, and it will be put into the composition queue of the map renderer.
21:42
The WebGL points layer that I showed, so this is not new for our regulars who also attended last year, just to keep in mind what we're moving towards. We also have style expressions here like Tim already showed for the WebGL tile layers. You have variables and
22:01
filter properties and eventually our styling API will converge into that direction. A few words on developer experience, maybe. We author open layers in JavaScript, but use JS doc type definitions and publish these with the library, and what you get is really a nice developer experience,
22:25
which not only gives you autocomplete on whatever you type, it also shows you parts of the API documentation, and everything is typed. So here, for example, I create a new map, and as soon as I start adding options and hover over an option, I see its documentation, like here, and
22:45
these type definitions go even further. In the next snippet, you see that I add an event on the map and it even knows for each event type this is, I think, going to be
23:01
a click event, and it even knows the properties of the event it's adding. And while our video here is typing, we are already almost at the end of our presentation. One more thing, please consider sponsoring your neighborhood developer.
23:21
Sponsor money that's donated to the project is used for gatherings of the developers for code sprints, and if you want to acknowledge the work of a specific developer, please consider sponsoring them on GitHub. I think that's it. Thanks for attending.