OpenLayers 3 Feature Frenzy

Video thumbnail (Frame 0) Video thumbnail (Frame 1688) Video thumbnail (Frame 2684) Video thumbnail (Frame 4120) Video thumbnail (Frame 5782) Video thumbnail (Frame 6514) Video thumbnail (Frame 7493) Video thumbnail (Frame 11864) Video thumbnail (Frame 12645) Video thumbnail (Frame 14148) Video thumbnail (Frame 15130) Video thumbnail (Frame 16912) Video thumbnail (Frame 18074) Video thumbnail (Frame 18630) Video thumbnail (Frame 19720) Video thumbnail (Frame 21831) Video thumbnail (Frame 23660) Video thumbnail (Frame 24215) Video thumbnail (Frame 24839) Video thumbnail (Frame 25359) Video thumbnail (Frame 25915) Video thumbnail (Frame 26438) Video thumbnail (Frame 26940) Video thumbnail (Frame 28207) Video thumbnail (Frame 33940)
Video in TIB AV-Portal: OpenLayers 3 Feature Frenzy

Formal Metadata

OpenLayers 3 Feature Frenzy
Title of Series
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 license.
Release Date
Production Year
Production Place
Seoul, South Korea

Content Metadata

Subject Area
OpenLayers 3 aims to be a full-featured, flexible, and high-performance mapping library leveraging the latest web technologies. Since the initial release of 3.0 at the end of 2013, the library has matured significantly, and great new features are rolling out with each monthly release. This talk will provide you with a tour of the latest features in the library, including daring live demonstrations. We will present our recent and ongoing work on making the library more user-friendly and introduce you to our new online build tool that makes it easy to create custom builds of the library. Whether you're a developer or decision maker, come to this talk to learn about the current status of OpenLayers 3, and see what's in store for the future.
Context awareness Standard deviation Tesselation File format Variety (linguistics) Cellular automaton Keyboard shortcut Source code Type theory Computer animation Square number Cycle (graph theory) Library (computing)
Overlay-Netz Area Pointer (computer programming) Lecture/Conference Different (Kate Ryan album) Tesselation Zoom lens Volumenvisualisierung
Game controller Evelyn Pinching Texture mapping Computer animation Drag (physics) Connectivity (graph theory) Touch typing Interactive television Attribute grammar
Game controller Group action Texture mapping Information Multiplication sign Computer icon Attribute grammar Mathematics Positional notation Different (Kate Ryan album) Authorization Arrow of time Error message Position operator
Point (geometry) Metre Pixel Statistics Identifiability Computer file Image resolution Source code 1 (number) Computer font Metadata Element (mathematics) Latent heat Mechanism design Cuboid Physical system Texture mapping File format MUD Projective plane Feedback Symbol table Uniform resource locator Computer animation Vector space Artistic rendering Vertex (graph theory) Website Object (grammar) Geometry
Point (geometry) Addition Functional (mathematics) Building Scaling (geometry) Information Computer file Interior (topology) Multiplication sign Polygon Set (mathematics) Bit Order of magnitude Computer icon Category of being Computer animation Personal digital assistant Telecommunication Vertex (graph theory) Geometry
Context awareness Texture mapping Computer animation Vector space Personal digital assistant Artistic rendering Quicksort Multilateration Open set Geometry
Point (geometry) Trail Addition Greatest element Functional (mathematics) Multiplication sign Drop (liquid) Software maintenance Measurement Dimensional analysis 2 (number) Computer animation Profil (magazine) String (computer science) Vertex (graph theory) Geometry Physical system
Area Covering space Functional (mathematics) Context awareness Computer animation Vector space Forest Operator (mathematics) Source code output Quicksort Event horizon
Point (geometry) Context awareness Pixel Texture mapping Multiplication sign Polygon Interactive television Line (geometry) Thresholding (image processing) Medical imaging Uniform resource locator Computer animation Vector space Lecture/Conference Operator (mathematics) Network topology Volumenvisualisierung Circle Quicksort Tunis
Multiplication sign View (database) Source code Regular graph Latent heat Computer configuration Area Overlay-Netz Texture mapping File format Polygon Keyboard shortcut Projective plane Interactive television Line (geometry) Rectangle Computer animation Vector space Network topology Vertex (graph theory) Codec Object (grammar) Sinc function Geometry Library (computing)
Overlay-Netz World Wide Web Consortium Texture mapping Computer animation View (database) Source code Projective plane
World Wide Web Consortium Computer animation
Computer animation Shape (magazine) Family
Computer animation Vector space File format Tesselation Multiplication sign Source code Cuboid Social class
Process (computing) Texture mapping Computer animation Multiplication sign Image resolution Cuboid Software testing Connected space
Web page Point (geometry) Functional (mathematics) Identifiability Variety (linguistics) View (database) Virtual machine Mass Web 2.0 Fraction (mathematics) Heegaard splitting Hypermedia Operator (mathematics) Stability theory World Wide Web Consortium Multiplication Texture mapping Mapping Tesselation Polygon Constructor (object-oriented programming) Maxima and minima Bit Line (geometry) Cartesian coordinate system Limit (category theory) Category of being Graphical user interface Uniform resource locator Computer animation Vector space Symmetry (physics) Volumenvisualisierung Configuration space Figurate number Quicksort Resultant Library (computing) Geometry
far thanks for coming uh and Tim other work in the labs and research about a who lives were for context and so on it's the world automakers make this lightning cell type so this is a logo on it will you do is just ripped through all the defining features of OpenLayers talk about things that have been libraries is a 3 . 0 release and some the newer since then we have a rapid release cycle returning out every month so new features are coming continuously all started by to talk about some of the 6 that work with an open there's map primarily we have separated layers and sources so this is using an awesome source and we also support a wide variety of sources that from that community standards and the official standards proprietary formats other defining features would only work with square tiles work with non square tiles and basically let you work with whatever format your data comes in the so a new keyboard for here so
alright so we've all seen basic TileMap some of things make this difference them in overlays were using a canvas renderer
so the volatiles fetched rendered
on canvas we have a tile Q prioritize tactile cue in background here was if by zoom in on 1 of the things as you go to a new area we always load lower-resolution tiles and then if you watch the mouse go to the top here where we prioritize Tyre loading in area where your focuses were the pointers so this is pretty nice guy rendering nice smooth animation throughout and really slick tile handling the in
August news shortly also it
we have this concept of interactions and controls in opening so we have 2 concepts are interaction and controls so interactions defined the way the user interact with the map of this is like double to zoom drag and i rotate the and by dragging and we also support touch devices so we have we have pinch um Finch interactions and and consumers well and the other concept is controls the controls all visual components are related to the map so we have different controls on that doesn't control I will show you how to rotate the map and an attribution control the
my phone but people work and so so this is another males not to because there's not how you see the controls on the corner of this is in control of have the year which you may not see and there is an information uh attribution control sorry here so it's a being a background so there's a big at the ocean and icons action rather they demand and as I wrote in nite can see the error aerial the changes of there and I can reset the map to its original position using the arrow and here I have to uh the to build to custom control authorities all there is a font issue here so the 1st the 1st 1 is a geo-location control yes so it takes time to to become the new notation
and so it's it's uh it's animated I can I can do and I mean you mention to the new notation but so this is our custom control that you can build by yourself and I have another 1 here that I just don't follow 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 I
it we also work have been marked with metadata but we support different formats to load the vector layer you specify a vector source here use that should test for mud and to load the whole file that wants to specify your performance with support include popular ones like a metal and you're chasing on also a more exotic ones like I choose to you or what would colonize nice thing is you don't have to worry about projections so that traffic on that's will be transformed on the fly on the fly to review projection that you use for viewing them but
rendering we take a lot of effort to make rendering super performance we simplified geometries we make animations looking look nice by replaying around the instructions so we maintain a stroke symbol size and fonts was assuming your rotating and also since 3 5 we do a rat world wrapped vector in the null and loading 15 megabytes of chip testifies here account this layer with the resolution 10 meters not as this is loaded with some statistics here at the top so we loaded more than half a million vertices for this layer but we only need to render 65 thousand because of all the simplifications that we do in the background my so through the region where we are right now you can also see that I added another layer with point and labels and use yes I rotate here with the victory place a instantly you can rotate without the system was changing the orientation and as I assume and all you also see that the symbols and the farms maintain the sites the so this is directly related to the rendering and a vector boson ties so we also support a different mechanisms for interacting with the map and so for example we support you grid uh which is a specification from my box and we also support feature vector Victor feature and the detection and and also cut out the diction so we also support detecting at corals on on arrest press earlier so you can basically interact with both roster and victory URLs and I a quick example here on so this is a background background layer from my box and on top of it I have a vector layers of so from a chemical chimera documents and as as you can see I can move the mouse and get immediate feedback and uh with uh an identifier of the name of the object under the mouse and this is very very fast and here as said we rely on canvas L as all rendered so which means we we cannot just and at least know those 2 elements uh so we use other techniques to be able to detect that there is a feature of this is all based on pixels which is they think that there is a cut had this picture and this pixel and to to detect a feature and so we can see that is this is very accurate and very very fast so an example here uh
the to show those occasional layer and Kamal comes with its own styles so the stars are in there were made by whoever generated the cannot file we also provide functionality for you to override styles my communication file or the working with duties in a something doesn't carry style information you can set you Tyrone styles on layer this is an example of how you would set a single with the outer layer with polygon features you would set a film a stroke through would be same for the same for all of the features and in
addition add to give you a bit more flexibility we allow you to set style function on a layer so that function is called every time a features rendered and for every feature on the layer and you're given the feature and then you're given up to do things with that like in this case it's a we had some points are represented earthquakes I get the ad magnitude property and scale that an icon symbolizes by that 90 that building on the flexibility that we also let you transform the geometry before rendering so in this case against a setting is styled would apply to all the features but here's example of geometry function on the style that will get called with every feature and you don't need to original that I'm only to render the original geometry so if this is that polygon layer and they get the geometry get the coordinates of the 1st ring and create a multipoint from at it's announcer rendering polygon have rendered uh a bunch of points for the vertices that Pollyanna so you have a ton of flexibility but they're still
still more ways to get custom rendering you can listen for post-compose or different i rendering events either on the map from layer and along with that of and you get a vector context in this we call the immediate rendering API so in this case you need to have features union of features on later anything you can just generate the geometries on-the-fly generate styles on the fly and you get 1 last opportunity for the uh after the map is composed to drop geometries on here this sort of a higher-level API than you get with uh drawing directly in canvas because you can use things like open there's geometries so this is an example that I should
put all that together and um
I've got a single geometry here this is
a bike ride download the GPX track and here's a single mom
multiline strings ended but this is an
example using that the geometry function on the this style so each of those pointed to the vertices and we'll do answering comes with an elevation at time measure and now I'm playing through time and saying at the time you know elapsed since I started this animation drop points there's a get coordinate at and the system me accordance at this time it's a 10 seconds in the Ryder something and I can render that they're missing the composed and drawing a little track of points behind they're going back in time and getting other features to give you a little convincing trail of EC down the bottom but there's also an elevation profile that showing where we've heard on because each of those points has this elevation measure we preserve those we pass and geometries non-guaranteed additional dimensions and you can get access to that data and and do things like get maintain elevation data and time-delay witches and point geometries so stop that before it's notions
of the final way that sort of formalizes some of this and custom rendering the can do such an example of how you can listen for post-compose events and you get this vector context you can also listen for post-compose events and get the the canvas that to the context but this is example again that builds on that by giving you a Rasta source that lets you compose other sources so I might have an imagery dataset and some of land cover data and I'll run some operations say you know if there's a there's certain amount of brightness in forest areas I want to generate new data that so this is what how you can generate new source given to input sources and a function this is an example that does the same
sort of thing with um getting the whole image context so you'll have to just operate 1 pixel time but I'm putting around here and there's a threshold said and I can go out and do a little floodfill fill operations so for every pixel that is within some tolerance of the original pixel is being painted here they can change the tolerance and what that change their so we
showed you how we can render rest on URLs on and victory URLs vector data we also have a editing tools of our future editing tools and so this is the kind of tune and we provide so we have the tools to be able to to draw all the points lines polygons circles etc. and we also have tools to modify the geometries so that off and displayed on the map so we have a modified translate interaction that we also supports snapping uh and we can also mention topology and the Irish for you this no so again on a
map regular map with a background layer so I can select the tour here I can draw of very basic I can draw lines I can grow 31 but I can also draw a rectangle for example so here I have this not being a not interaction which is active which means that if I have shows already drawing on the map I can grow polygon and then snap to this rectangle here and just follow the edge the comments so we can see that I can maintain the topology essence of origin double the footage of the political a relationship between the 2 geometries I can now select them I can move them at the same time as 2 I can move the vertices while preserving the topology I can also added and other vertex here so when I when I move this vertex and actually move area actually modified to geometries at the same time so this it's this example is to show you that we're building an advanced editing tools In often males the with so
many features you also have to be cautious to not have to go to the library so we also makes simplifications and remove things that turned out to not be useful or make no sense because they're not used by anyone we simplify 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 removed as something we had another way to do vector features which was called feature overlay this is now all covered by a vector layers directly an example borders simplification of the vector source API 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 head to specify their projection and that was the view projection now this is all straightforward you configure a vector source with the form of you want to use and give it to your that you want to use to to future so this is what we
have so far and now I'm going to show you 2 features that are upcoming in the next few weeks or months the first one is Raftery protection a thing you have a source for example openstreetmap as we all know OpenStreetMap ties are in Web Mercator but what if you want to display the styles in
a map that you have created for Korea may want to overlay of layers that you have in Korean projections now you can do it by just specifying their projection on your view and then so you get the view in your Korean projection this effort was implemented by token technology and I am going to show you this in the cricket
example so here we have a in Web Mercator and I can now change to geographic coordinates
to see them that looks different obviously and then I can also go to this is where we rock so the other thing
her were you going on I here we have a big family history and here it so many places in in so few days so and here I can use the Korean protection out to make
things look more familiar for Koreans if the most Koreans will but want to see a career in this shape and not in I don't know but Matera you frequently but you usually get
I and the 2nd the new
thing is that vector priors we're
going to add a new layer class vector tied for use with the new of vector tile source and we also are adding support for them that box vector time format and we aren't going to show you how this is going to look as well
so this is a a world map it loose of ties from the met box and also here I can hopefully a good better job something into Korea right now so as you can see by ties for high resolution are loading I already as he uttered times that I have already rendered from a lower resolution like with the rest of and not as I so mean more human more ties Italy so it's still loading tests now a connections quite slow here it seems but that's what you're going to get the size here are are similar to those guys that I met books used for for this example of and we still have to do some work on signing capabilities but basically this is rendering methods like the
testing of this alright so that's a ton of
functionality in what is really a uh you know full-featured mapping toolkit so unlike other mapping libraries and we don't try to just give you the minimum common common denominator we provide you a rich variety but uptake from and figure was there were just 3 applications application so I had queued up on my machine is not here so we could see a screenshot but by the next release all commit to having this hosted on on the website it'll be would always provide a way for people that specify build configuration and say I only use of OS and when we use the map and the view and and geometries or something and then generate build but requires a little bit of extra work is it downloads and tools and run a local when machine so this is a hosted build tool that lets you do the same sort of thing with a graphical interface to come in and the the search for what you're using application or you pick that the 1st category then you can say I want all of a roster although SM or something you can also drill down further and say actually don't want all of the Rasta just want the constructor and on method so you can really get a accustomed build that just I uses what you're your application needs valuable to generate that we have a hosted build server and reinforce the result to cdnc of a stable URL for Europe and your build up in layers and then this you we will come back to this page revisit the pages say 0 actually I added w mass will generate a new built for you that you the new identifier and then you can call that in your application so the new really been you rub the theft you don't the mind I want to do this for the so what's the step what's the status of the web Jill under the media wants to say something that we've mentioned we have a kinase render add-on render and Web GL rendered web GL render you can use Rasta tiles and it's got limited vector support right now so support currently American talk about status yeah so we and we support the major player URLs Etiolate URLs and vector labels with on the points at this point but we've started working on line and polygon supports coming together but we still haven't annotations relating to the starting to the way you can start it's not as rich as what you can do with can today but we're working on it and text is another thing we haven't started yet but which is a sort of quite challenging an a cue for a much will you agree to walk sorry you but to the feature all had 18 ictal had editing and that legal you created in media can create little the the maybe you're asking about dissolving to features in a union of features or splitting features exactly we currently don't have that sort of those geometry operations OpenLayers it's easy to get out due Jason like data so you can use something like at the turf library or other libraries ladies stuff like that that the union of multiple violence but violence or something and so currently you would our solution be the same pull another library use of Myers editing tools that then use library do the topological or at the symmetry operations thanks will be around
and all other people can can find us for more questions OK thank you very much but