OpenLayers 3 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 | 183 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/32136 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Producer | ||
| Production Year | 2015 | |
| Production Place | Seoul, South Korea |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSS4G Seoul 2015127 / 183
7
8
47
53
54
65
73
74
79
82
84
92
102
103
105
124
126
127
130
141
142
143
156
161
162
170
176
178
181
183
00:00
Cycle (graph theory)TesselationSource codeFile formatSquare numberVariety (linguistics)Keyboard shortcutStandard deviationDifferent (Kate Ryan album)Context awarenessZoom lensOverlay-NetzCellular automatonVolumenvisualisierungAreaLibrary (computing)Pointer (computer programming)Type theoryFocus (optics)Queue (abstract data type)SmoothingRippingTexture mappingComputer animation
01:47
Interactive televisionGame controllerEvelyn PinchingAttribute grammarZoom lensDrag (physics)Connectivity (graph theory)Texture mappingKey (cryptography)Touch typingUML
02:45
Group actionGame controllerMultiplication signComputer iconPositional notationTexture mappingPosition operatorError messageMathematicsInformationAuthorizationAttribute grammarArrow of timeScaling (geometry)Line (geometry)
03:51
Positional notationDifferent (Kate Ryan album)Game controllerTexture mappingUniform resource locatorVector space
04:21
Functional (mathematics)BitSet (mathematics)Point (geometry)Multiplication signCASE <Informatik>Image resolutionMetreVector spacePhysical systemStatisticsVertex (graph theory)Artistic renderingScaling (geometry)Computer iconSymbol tableOrder of magnitudeWebsiteCategory of beingGeometryTexture mappingLatent heatMechanism designUniform resource locatorCuboidPolygonFeedbackFile formatIdentifiabilityObject (grammar)MetadataPixelComputer fileElement (mathematics)Context awarenessInformationTelecommunicationSource codeMUD1 (number)Projective planeMultilaterationOpen setComputer fontAdditionInterior (topology)QuicksortCoordinate systemGraph coloringView (database)VolumenvisualisierungStructural loadBuildingRaster graphicsElectric generatorLevel (video gaming)
10:07
Point (geometry)String (computer science)Functional (mathematics)Multiplication signGeometry2 (number)TrailDimensional analysisMeasurementProfil (magazine)Vertex (graph theory)Single-precision floating-point formatSoftware maintenanceAdditionDrop (liquid)Physical systemGreatest element
11:16
Medical imagingContext awarenessFunctional (mathematics)QuicksortThresholding (image processing)Operator (mathematics)PixelMultiplication signSource codeForestCovering spaceEvent horizonoutputVector spaceAreaElectric generatorRaster graphicsDenial-of-service attackSet (mathematics)
12:25
Raster graphicsVolumenvisualisierungVector spaceGeometryTunisUniform resource locatorPolygonCirclePoint (geometry)Line (geometry)Interactive televisionNetwork topologyTexture mappingComputer animation
13:09
PolygonGeometryRectanglePoint (geometry)Network topologyVertex (graph theory)Multiplication signTexture mappingLine (geometry)Regular graphInteractive televisionAreaCodecComputer animationPanel painting
14:33
Source codeSinc functionView (database)TesselationRaster graphicsLibrary (computing)Projective planeOverlay-NetzKeyboard shortcutObject (grammar)Latent heatTexture mappingVector spaceCoordinate systemWeb 2.0BitFile formatShape (magazine)Computer configurationFamilyXMLUML
17:30
Connected spaceMultiplication signTesselationFile formatProcess (computing)Vector spaceSource codeSoftware testingCuboidTexture mappingImage resolutionSocial classRaster graphics
18:48
Symmetry (physics)MappingQuicksortPoint (geometry)Operator (mathematics)Virtual machineGraphical user interfaceFunctional (mathematics)Cartesian coordinate systemLine (geometry)Software testingWeb 2.0Maxima and minimaPolygonFraction (mathematics)Library (computing)HypermediaCategory of beingVariety (linguistics)Figurate numberConstructor (object-oriented programming)ResultantVolumenvisualisierungHeegaard splittingTesselationStability theoryGeometryTexture mappingLimit (category theory)Configuration spaceUniform resource locatorVector spaceView (database)Web pageMultiplicationBitMassOpen setRaster graphicsServer (computing)Content delivery networkIdentifiabilityBuildingMedical imagingXMLUML
22:38
Computer animation
Transcript: English(auto-generated)
00:03
All right, thanks for coming. I'm Tim Schaabe. I work at Planet Labs. I'm Andreas Ocheva. I do OpenLayers work for Boundless. You can see we're all, we're trying to make this lightning-style talk. So this is our logo.
00:21
What we're gonna do is just rip through a lot of the defining features of OpenLayers, talk about things that have been in the library since the 3.0 release and some that are newer since then. We have a rapid release cycle. We're trying to get releases out every month. So new features are coming continuously. I'll start by just talking about some of the basics. You work with an OpenLayers map primarily. We have
00:41
separated layers and sources. So this is using an OSM source. We also support a wide variety of sources, both community standards and official standards, proprietary formats, other defining features. We don't only work with square tiles, we work with non-square tiles and
01:01
basically let you work with whatever format your data comes in. So new keyboard format here. Alright, so we've all seen basic tiled maps. Some of the things that make this different. In OpenLayers, we're using a canvas renderer. So all the tiles are fetched, rendered on the canvas. We have a tile queue, a prioritized tile queue in the background here.
01:26
I'll see if I zoom in. One of the things, as you go to a new area, we always load lower resolution tiles. And then if you watch my mouse go up to the top here, we prioritize tile loading in the area where your focus is, where the pointer is.
01:41
So this is pretty nice rendering, nice smooth animation throughout, and really slick tile handling. I'll get used to the keys shortly. So we have this concept of interactions and controls in OpenLayers. So we have two concepts,
02:04
interactions and controls. So interactions define the way the user interacts with the map. This is like double click to zoom, drag pan, rotate the map by dragging, and we also support touch devices. So we have pinch
02:23
interactions and pinch zoom as well. And the other concept is controls. So controls are visual components related to the map. So we have different controls, like the zoom control. I will show you how to rotate the map and an attribution control.
02:55
So this is an OpenLayers map, typical OpenLayers map. You see the controls on the corner.
03:01
So this is the zoom control. We have a scale line here, which you may not see. And there is an information attribution control, sorry, here. So here it's a big background layer. So there is a big attribution, and I can rotate the map.
03:21
As I rotate the map, you can see the arrow that changes up there, and I can reset the map to its original position using the arrow. And here I have two custom controls. There is a font issue here. So the first one is a geolocation control.
03:50
So it takes time to pick up the new location. And so it's animated. I can do an animation to the new location. But so this is a custom control that you can build by yourself. And
04:04
I have another one here that I just built for this example, so that you can just drop markers on your map. So this is very basic, but this is to show you that we have different controls and controls that you can build by yourself. We also work with vector data.
04:29
We support different formats to load vector layer. You specify a vector source. Here I use a GeoJSON format, and to load the whole file at once, I just specify a URL. Formats
04:41
we support include popular ones like KML and GeoJSON, and also more exotic ones like IGC or Google polylines. Nice thing is you don't have to worry about projections. Coordinates will be transformed on the fly to the view projection that you use for viewing your map.
05:01
Vector rendering. We take a lot of effort to make rendering super performant. We simplify geometries. We make animations look nice by replaying render instructions. So we maintain the stroke symbol size and fonts while zooming or rotating, and also since 3.5, we do
05:23
world-wrapped vector rendering. Now I'm loading 15 megabytes of GeoJSON files here, a country's layer with a resolution of 10 meters. Now as this is loaded, I have some statistics here at the top. So we loaded more than half a million vertices for this layer, but we only need to render
05:44
65,000 because of all the simplifications that we do in the background. Now as I zoom to region where we are right now, you can also see that I added another layer with point and labels, and you see as I rotate here with the vector replays, I
06:02
instantly can rotate without the symbols changing their orientation, and as I zoom in and out, you also see that the symbols and the fonts maintain their size.
06:20
So this is related to the rendering of vectors and tiles, so we also support different mechanisms for interacting with the map. So for example, we support UTF grid, which is a specification from Mapbox, and we also support vector feature,
06:41
heat detection, and also color detection. So we also support detecting colors on the raster layer. So you can basically interact with both raster and vector layers. And I have a quick example here.
07:01
So this is a background layer from Mapbox, and on top of it, I have a vector layer from a KML document. And as you can see, I can move the mouse and get immediate feedback. With an identifier or the name of the object under the mouse.
07:22
And this is very, very fast. And here, as Tim said, we rely on canvas as our renderer. So which means we cannot just add listeners to elements. So we use other techniques to be able to detect that there is a feature. This is all based on pixels.
07:41
So we just detect that there is a color at this picture, at this pixel, to detect a feature. And so we can see that this is very accurate and very, very fast. So in the example Eric just showed, that was a KML layer. And KML comes with its own styles.
08:02
So the styles that were in there were made by whoever generated the KML file. We also provide functionality for you to override styles that might come in a KML file. Or if you're working with GeoJSON or something that doesn't carry style information, you can set your own styles on a layer. This is an example of how you would set a single, let's say you had a layer with polygon features.
08:22
You would set a fill in the stroke that would be the same for all of the features. In addition, to give you a little bit more flexibility, we allow you to set a style function on a layer. So that function is called every time a feature is rendered for every feature on a layer. And you're given the feature, and then you're given the opportunity to do things with it.
08:42
Like in this case, let's say we had some points that represented earthquakes. I would get the magnitude property and scale an icon symbolizer by that magnitude. Building on that flexibility, we also let you transform the geometry before rendering. So in this case, again, it's just setting a style that would apply to all the features.
09:03
But here's an example of a geometry function on the style that will get called with every feature. And you don't need to render the original geometry. So if this was that polygon layer, I might get the geometry, get the coordinates of the first ring, and create a multi-point from it. So now instead of rendering a polygon, I've rendered a bunch of points where the vertices for that polygon are.
09:25
So you have a ton of flexibility, but there's still more ways to get custom rendering. You can listen for post compose or different rendering events, either on a map or on a layer. And along with that event, you get a vector context. And this is what we call the immediate rendering API.
09:43
So in this case, you don't even need to have features. You don't need to have features on a layer or anything. You can just generate geometries on the fly, generate styles on the fly, and you get one last opportunity after the map is composed to draw geometries on here. And this is sort of a higher level API than you'd get with drawing directly in Canvas because you can use things like open layers geometries.
10:04
So this is an example that sort of puts all of that together. And I've got a single geometry here. This is a bike ride, a download the GPX track, and here's a single multi-line string. And this is an example using that the geometry function on the
10:25
the style. So each of those points, each of the vertices in the multi-line string comes with an elevation and a time measure. And now I'm playing through time and saying at the time, you know, elapsed since I started this animation, I want to draw a point. So there's a get coordinate at M that says give me the coordinate at this time.
10:44
Let's say 10 seconds into the ride or something and I can render that. Then I'm listening for post compose and drawing a little track of points behind there, going back in time and getting other features to give you a little kind of vanishing trail. I don't know if you can see it down at the bottom, but there's also an elevation profile that's showing where we've currently gone. Because each of those points has this elevation measure, we preserve those when we parse them in the geometries.
11:05
We don't get rid of the additional dimensions. And you can get access to that data and do things like get, maintain elevation data and time data with your point geometries. So I'll stop that before anybody gets nauseous.
11:20
The final way that sort of formalizes some of this custom rendering that you can do. So I showed an example of how you can listen for post compose events, and then you get this vector context. You can also listen for post compose events and get the the canvas 2D context. This is an example again that builds on that by giving you a raster source that lets you compose other sources.
11:43
So I might have an imagery data set and some land cover data, and I want to run some operation. I want to say, you know, if there's if there's a certain amount of brightness in forested areas, I want to generate new data out of that. So this is how you can generate a new source given to input sources and a function.
12:02
This is an example that does the same sort of thing with getting the whole image context, so you don't have to just operate one pixel at a time. But I'm clicking around here, and there's a threshold set, and I can go out and do a little flood fill operation. So for every pixel that is within some tolerance of the original pixel,
12:21
it's being painted here, and I can change the tolerance and watch it. Change there. So we showed you how we can render raster layers and vector layers, vector data. We also have editing tools, feature editing tools.
12:41
So this is the kind of tool we provide. So we have tools to be able to draw points, lines, polygons, circles, etc. And we also have tools to modify the geometries that are displayed on the map. So we have a modified translate interaction.
13:00
We also support snapping, and we can also maintain topology, and I will show you this now. So again, a map, a regular map with a background layer, so I can select the tool here. I can draw a point, obviously, very basic. I can draw lines.
13:22
I can draw a polygon. I can also draw a rectangle, for example. So here I have the snapping, snap interaction, which is active, which means if I have features already drawn on the map, I can draw a polygon and then snap
13:47
to this rectangle here and just follow the edge at points. So we can see that I can maintain the topology. I have some topological relationship between the two
14:03
geometries. I can now select them. I can move them at the same time. I select the two. I can move the vertices while preserving the topology. I can also add a vertex here. So when I move this vertex, I actually move, I actually modified the two geometries at the same time.
14:25
So this example is to show you that we are building advanced editing tools in OpenLayers. So with so many features, you also have to be cautious to not
14:43
bloat the library. So we also make simplifications and remove things that turn out to not be useful or make no sense because they're not used by anyone. We simplified the way we use vector sources since last year in 3.5. We also removed two-way bindings of our objects because we think that external JavaScript libraries can do that in a better way. And
15:07
we removed something. We had another way to do vector features, which was called feature overlay. This is now all covered by vector layers directly. An example for the simplification of the vector source API.
15:22
Previously, we had sources for each format. If you wanted to configure the format with specific options, it was very hard to do. And also you had to specify the projection and that was the view projection. Now, this is all straightforward. You configure a vector source with the format you want to use and
15:42
give it the URL you want to use to load the features. So this is what we have so far. And now I'm going to show you two features that are upcoming in the next few weeks or months. The first one is raster reprojection.
16:00
Easy thing, you have a source, for example, OpenStreetMap. As we all know, OpenStreetMap tiles are in Web Mercator. But what if you want to display these tiles in a map that you have created for Korea? Maybe want to overlay layers that you have in Korean projections. Now you can do it by just specifying the projection on your view and then you get the view in your Korean projection.
16:26
This effort was implemented by Glocan technology and I'm going to show you this in a quick example. So here we have a map in Web Mercator and
16:40
I can now change to geographic coordinates. You see the map looks different, obviously, and then I can also go to places where we... wrong, sorry.
17:02
Ah, here we are. Thanks. A bit disoriented here. So many places in so few days. And here I can use the Korean projection now to make things look more familiar for Koreans. I think most Koreans will
17:21
want to see Korea in this shape and not in, I don't know, Web Mercator or what you frequently, what you usually get. And the second new thing is vector tiles. We're going to add a new layer class, OL layer vector tile
17:43
for use with the new vector tile source. And we also are adding support for the map box vector tile format and I'm going to show you how this is going to look as well. So this is a
18:02
world map. It pulls vector tiles from map box and also here I can, hopefully, I do a better job zooming into Korea right now. As you can see, while tiles for higher resolution are loading, I already, I see the tiles that I have already
18:20
rendered from a lower resolution like with raster tiles. And now as I zoom in more, even more tiles get loaded. So it's still loading tiles now. In connection is quite slow here it seems, but that's what you're going to get. The styles here are similar to the styles that a map box use for this example.
18:43
And we still have to do some work on styling capabilities, but basically this is rendering map box vector tiles in OpenLayers. Alright, so that's a ton of functionality in what is really a you know, full-featured mapping toolkit. So OpenLayers is unlike other mapping libraries in that we don't try to just give you the minimum kind of common denominator.
19:05
We provide you a rich variety that you should really pick from and figure out what's going to work just for your application. So what I had queued up on my machine is not here, so all we get to see is a screenshot. But by the next release, I'll commit to having
19:20
this hosted on the website. It'll be, we've always provided a way for people to specify a build configuration and say I only use OSM, I only use the map and the view and geometries or something and then generate a build. But it requires a little bit of extra work because you have to download some tools and run it locally on your machine. So this is a hosted build tool that lets you do the same sort of thing with a graphical interface. You come in and you
19:43
can either search for what you're using your application or you pick the first the category, then you can say I want all of raster or all of OSM or something. You can also drill down further and say actually I don't want all of raster, I just want the constructor and on method. So you can really get a custom build that just uses what your your application needs.
20:04
You'll be able to generate that, we have a hosted build server and then we're going to push the result to a CDN. So you'll have a stable URL for your your build of open layers. And then this, you'll be able to come back to this page, revisit the page and say oh actually I added WMS, that'll generate a new build for you,
20:21
you know, with a new identifier and then you can pull that into your application. So I think we made it through, right? I didn't interrupt the next few talks.
20:55
What's the status of the WebGL renderer? Maybe Eric wants to say something that we've mentioned. We have a canvas renderer, a DOM renderer, and a WebGL renderer.
21:05
The WebGL renderer you can use for raster tiles and it's got limited vector support right now. So point support currently and Eric can talk about the status of that. Yeah, so we we support image layers, tile layers and vector layers, but only points at this point.
21:21
But we've started working on line and polygon support. It's coming together. We still have limitations relating to the styling, to the way you can style. It's not as rich as what you can do with canvas today, but we're working on it. And text is another thing. We haven't started yet, but
21:40
which is also quite challenging, I would say. Thank you very much for your great work. Sorry. You don't
22:01
Maybe you were asking about dissolving two features, getting the union of features or splitting features. We currently don't have that sort of those geometry operations. Open layers, it's easy to get out GeoJSON-like data, so you could use something like the turf library or other libraries that let you do stuff like get the union of multiple polygons, split polygons or something.
22:22
So currently our solution would be to say pull in another library, use open layers editing tools, but then use another library to do the topological or those geometry operations. Thanks. We'll be around out in the hall out there. People can come find us for more questions.
22:43
Thank you very much.