Logo TIB AV-Portal Logo TIB AV-Portal

Getting Started with OpenLayers 3

Video in TIB AV-Portal: Getting Started with OpenLayers 3

Formal Metadata

Getting Started with OpenLayers 3
Title of Series
CC Attribution 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 purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date
Open Source Geospatial Foundation (OSGeo)
Production Year
Production Place
Portland, Oregon, United States of America

Content Metadata

Subject Area
OpenLayers 3 is here! Now it's time to dive in and get mapping. Join us for an overview of OL3 from a user's perspective. We'll cover common use cases and cool features of the library you might not have heard about. Our goal in this presentation is to get you comfortable with the OpenLayers 3 style of mapping - providing an introduction to raster and vector basics, discussing tips for integration with other JavaScript libraries, and exposing you to the build tools so you can choose just the functionality you need for your mapping application.
Keywords JavaScript web mapping Canvas WebGL vector raster
Point (geometry) Presentation of a group Scheduling (computing) Game controller State of matter Code Image resolution View (database) Zoom lens Sheaf (mathematics) Web browser Information technology consulting Revision control Web service Stability theory Rotation Texture mapping Arm Software developer Interactive television Shared memory Bit Cartesian coordinate system Process (computing) Personal digital assistant Duality (mathematics) Order (biology) Right angle Quicksort Library (computing)
Texture mapping Computer animation Tesselation Personal digital assistant Different (Kate Ryan album) Internet service provider View (database) Source code Volumenvisualisierung Number
Area Point (geometry) Texture mapping Touchscreen Tesselation Structural load Image resolution Zoom lens Source code Number Connected space Computer animation Different (Kate Ryan album) Internetworking Energy level Right angle
Computer animation Tesselation Image resolution Artistic rendering Quicksort Connected space
Overlay-Netz Default (computer science) Game controller Texture mapping Touchscreen Computer animation Visualization (computer graphics) Interactive television Representation (politics) Scale (map)
Web page Game controller Image resolution View (database) Source code Web browser Number Web 2.0 Heegaard splitting Medical imaging Coefficient of determination Mathematics Electronic visual display Rotation Scaling (geometry) Texture mapping File format Tesselation Keyboard shortcut Interactive television Sound effect Line (geometry) Category of being Arithmetic mean Uniform resource locator Word Computer animation Vector space Personal digital assistant
Area Addition Default (computer science) Group action Texture mapping Scaling (geometry) Image resolution View (database) Multiplication sign Zoom lens Instance (computer science) Replication (computing) Functional (mathematics) Graph coloring Attribute grammar Computer animation Vector space Single-precision floating-point format Linearization Representation (politics) Geometry Condition number Distortion (mathematics)
Rotation Stapeldatei Clique-width Quicksort Computer font
Ocean current Server (computing) Pixel Real number Connectivity (graph theory) Direction (geometry) Set (mathematics) Parameter (computer programming) Element (mathematics) Medical imaging Roundness (object) Software framework Position operator Overlay-Netz Texture mapping Information Polygon Keyboard shortcut Interactive television Functional (mathematics) Frame problem Uniform resource locator Computer animation Vector space Personal digital assistant Quicksort Sinc function
Point (geometry) Area Mathematics Texture mapping Computer animation Personal digital assistant Bit Shape (magazine) Cursor (computers) Resource allocation
Game controller Stapeldatei Multiplication Texture mapping Information Software developer Multiplication sign Zoom lens Interactive television Combinational logic Event horizon Type theory Latent heat Pointer (computer programming) Computer animation Software Different (Kate Ryan album) Quicksort Library (computing) Geometry
Vertex (graph theory) Boundary value problem Line (geometry)
Computer chess Default (computer science) Group action Texture mapping Validity (statistics) Image resolution View (database) Projective plane Open set Instance (computer science) Sphere Functional (mathematics) Web 2.0 Computer animation Personal digital assistant Core dump Website Configuration space Software framework Contrast (vision) Extension (kinesiology) Traffic reporting Library (computing)
Computer chess Trail Greatest element Texture mapping Computer file Personal digital assistant Projective plane Sphere Functional (mathematics) Position operator Geometry
Texture mapping Computer animation Wrapper (data mining) Personal digital assistant Code Software framework Bit Line (geometry) Freeware Demoscene Library (computing)
Satellite Uniform resource locator Computer animation Different (Kate Ryan album) Flag
Point (geometry) Three-dimensional space Context awareness Functional (mathematics) Greatest element Texture mapping Tesselation Wrapper (data mining) Source code 1 (number) Web browser Event horizon Element (mathematics) Web 2.0 Medical imaging Vector space Different (Kate Ryan album) Helmholtz decomposition Volumenvisualisierung Circle Library (computing) Exception handling
Addition Texture mapping Computer animation Blog Videoconferencing Sound effect Electronic visual display Cuboid Office suite Event horizon Frame problem
Fluid statics Computer animation Tesselation Internet service provider Source code Videoconferencing Quicksort
Functional (mathematics) Markup language Connectivity (graph theory) Multiplication sign Source code Function (mathematics) Software testing Software framework Compilation album Position operator Plug-in (computing) Physical system Task (computing) Scripting language Overlay-Netz Texture mapping Mapping Tesselation Structural load Plastikkarte Cartesian coordinate system Compiler Category of being Data management Computer animation Vector space Algebraic closure Commitment scheme Internet service provider Customer relationship management Configuration space Limit set Library (computing)
Email Group action Computer animation Lecture/Conference Personal digital assistant Source code Electronic mailing list Open set
Texture mapping Lecture/Conference Projective plane Booting
Overlay-Netz Functional (mathematics) Scaling (geometry) Software developer Decision theory Web browser Distance Measurement Radius Ring (mathematics) Lecture/Conference Meeting/Interview Query language
Lecture/Conference Meeting/Interview
the service could as the OpenLayers 3 top conveys switched rooms if you're here for the previously scheduled it's over on the side so what but present like that right enough let's talk down here the latter about alright so I and this was not mentioned in the schedule but this is a problem dual presentation underestimate of arms my co-conspirator here in order both be sort tag team for this presentation we're here to talk about the recently released OpenLayers 3 the I'll do a little bit more introduction to that in a 2nd but I'm Tim job at work at finer labs and the many of you and I work with a consultant more of the so just died 2 weeks ago we finally released OpenLayers 3 . 0 it's been about 2 years in the making it's a complete rewrite bad shares no code with the from Rigel 2 versions of a library and it was pretty massive undertaking it was a community that a consortia of companies funded it raise funds for the development of it and we're using Community funds for it and I really had ambitious Goals in a sort of a Herculean effort to get it to a stable point we finally just 2 weeks ago marked by a usable section of the API as stable and Release 3 . 0 the so the way the stock is gonna work is orders but a goal appears something that would do as an application developer with OpenLayers 3 and also a code example how the API is used in this case and will move into a real example what looks like in a browser so the 1st thing you'll notice is that OpenLayers 3 is split apart concepts of a map interview the map is a collection of layers it has things like controls are interactions will talk about coming up associated with the map in the view is that the actual view states and so it has things like center rotation resolution or zoom as a shorthand for that but where to get that layer from
there's a layer collection in there so you goal might be to use that layers tire layers from a number of different providers so you could use a higher layer and with an OSM source these are 2 more new concepts 0 a layer is about the rendering but in the view of the the data and the source describes how to fetch the data so in this case today comes from this awesome community OpenStreetMap tile provider it's renders a tile layer the now you could use that
same tile layer with the proprietary tile source in this case is being maps and you put in your T in the style you want and use the same layer for that the so here's an example of
a number of different layers that there's aerial
from being W so and emphasizes this example and RDI tile cash each of those sources I mentioned maintains its own tile catch so as a zoom in here and I tend to new area I haven't seen yet at this resolution we get good that here but you'll see these lower-resolution tiles from but a I lower zoom level are being used as intermediate tiles while the target zoom old tiles load so the idea is you never pan off the edge of the map given that if you if you load about an at a low zoom level and then zoom in you should never panned out that of map and seeing a white another thing 1 emphasizes the start point out is a the tile Q again it's pretty subtle here with a fast Internet connection but this is a prioritize tile cues of you the mouse down here in the lower right corner of the screen as a zoom in and you
should see the optimal see this connection that the tiles around my mouse are loaded 1st so if tiles that were
requested at a previous resolution when you get to new red resolution that triggers a rendering and then the tile Q is a sort of restructured with newer higher priority tiles in those 11 cells my you sort
him assuming pan around on the map and uh this was the default behavior for users to interact with the map not the goal is to give the user control and modified of ways how you give users control and for this we have to packages an open there's 3 1 is interactions interactions are usually about 0 . gestures that allow you to interact with the map like when you drag the map hands when you pinch shown on a mobile device you can zoom in and so on for things like the plus and minus buttons you saw on the top left of the screen that's controls controllers have buttons or any visual representation on top of the map scale like for example uh has also an overlay on top of them let's look at this hard looks and a real example the so
here the we have another so that we use in the being there of the blast plus and minus buttons here are for the same meaning and also that's so multiple here to see more context while at did that you saw the the scale line here the ch changes also as you change the the resolution and also to change the center of the map are worth noting may be that the scale is calculated for the center of the map and then we have a 2 here also that's so again to where I come from somewhere and dogs and then I want to know over and this is a custom control which provides the simple OK button here takes a while for the browser to figure out my location and as soon as under the brand to medication then another nice thing about controls and about controlling the view is to use a two-way bindings 1 thing we can do an open Friis rotate them out view and as you can see here as a rotate using 1 of the and most interactions the also this latter here updates there's a two-way binding become between this page them and 5 of slider control and the rotation property on the map you and there's also this additional control that allows me to reset the rotation uh to north of you all so
read everything we've been looking at so far Rasta tiles in those words and we brought those in with I tile data sources and display than in image of base layers no 1 look at that working with vector data so again there's a split you have a vector layer and then any number of sources that describe hiring effects that data so in this case that we sort of bundled together the format of the data and how it is retrieved at it's addressed by this URL and I say to Jason source so that gives me a G adjacent format to pass it and I wanna read into the PSG 38 57 so Web Mercator and that will display these due Jason countries on the map and rendered in the browser but what is the 1 a style
we've default style that you get them but you might wanna style and to your liking so if replication so on a vector layer you can set the style here I'm giving it a single style instances with a fill and stroke specified all I've always specify the color here for both you specified the with the the opacities specifying the color of the Phil in addition you can call that set style function sets out method with a function that functionally called for every feature at every resolution the map is rendered it's not calling during it's not called during animated transitions between resolutions very tiny stop and not animating that this function is called with every feature so you can decide how you want feature pay 1 style your features based on their attributes or the view resolution so there's enough room here for the code but if the resolution is less than some value I might construct few symbolizes otherwise might collect the construct different symbolizes this
example and argues that style function and at each time it's called I get the area of the projected area of the geometries and then on the geodesic area of the geometries the and divide the geodesic area by the projected area and that's scale there's a linear scaling Mike inspired users uh HCl interpolate them functionality between like a brownish color to steel blue color is on essentially the distortion a much bigger a country is relative to its much bigger the projected represent representation is relative to its geographic area so as a zoom in and you can see there's also labeling going on here so that's a scale resolution conditional condition conditionally and labeling they the layer the features there and I've got a little stroke and on the
text as well the nice thing is you rotate around if you Eric stock you heard him talk about how we batch these rendering instructions and that this is all rendered in canvas were typically to rotate this rotator this you would get a rotation of labels this is re-rendering with every rotation as a zoom-in as well you can see that the font size stays consistent found during that animated transition as
does the stroke width sort scaling the canvas for literally redrawing using the same batch of rendering instructions at
every frame in this animation so
now we saw her vector data Brenda but but the real advantage of vector is that you can let the user interact with the data which means you don't just look at the bound map image but you can really get instant information about what you're looking at without having an that to do another round trip to the server I let me explain this the 2 things that we're going to see in the next example we're going to create a pop a sort of a pop up and the pop-up is going to show you some information about the feature that we're looking at on the map but probably you can easily be implemented using any JavaScript framework of of your liking and to bind it to a geographic location on your map we have a component if we called the well overlaid you configure it with an HTML over element that you have in your mark and then you just at this overlay to the map and this can can see here we register a click handler on the map and this is the map provides us a function that's called for each of for each feature at pixel what this function does is it uses the pitch detection that Eric has explained in his talk and gives me back all the features that are at the current pixel location in the past year was the 1st argument and then this function is called with all of these features and In this case of since I'm looking at a polygon layer usually it's only expect 1 polygon at a location because these are countries and have ponderous and don't overlap so I'm going to create a pop pop up with the name of the feature in this case and then the most important thing here is to put the problem at the exact position that I clicked I call this set position method here In this featuring direction example that I'm going to show here
I do a bit more than just this if you noticed my mouse cursor here at the ocean room where there are no countries it's just the point and as soon as I move here to a country changes such its shape but notifying me that I can teach here so there's 2 handlers involved here obviously 1 of 4 point to move in and out of 48 never click here I created this pop-up as assets it sticks to the allocation of the mapper can also our rotate the map and will still maintain my my pop up here and In this case the information displays also the calculated that the geodesic area of the of the country dedicated Ch
alright so is a basic interaction with features 1 of things it's worth mentioning that the last example that showed is we've I sort of written a shame for the pointer mn specification if people know about this it tries to generalize the different type of events again fired and different devices so the you register for a pointer move event and for example in networks untouched devices were devices with mouse works if you have multi is worsened of advice so and so the nice feature of the library OK so the goal here is to allow editing we'd interacted with features display some basic information now and modify the geometry associated with features so that's handled in library with a combination of 2 different interactions these to be wrapped together in an editing control the 1 they have buttons on your map person the developer control for toggling that the activity of these interactions the select interaction and we'll see in just a 2nd maintains a collection of selected features and then you can associate those that collection of features with a modified interaction so this says I want to allow the user to click click click and and uh select a batch of features and what all those selected features to be candidates for a modification so In this editing
sample and on a zoom in here that the end of of so you select behavior I just click a single time
select a single country if I
grabbed today and Egypt the
Syria and Chad together now all 4 of those collections are in my uh all of them sorry all 4 of those features on my selected features collection and I can at edit them together so as a move around vertices and getting a shared editing of vertices coincidence between those features another nice thing is you see as I approach this line here there's a little hinted that is given to me in the problem very small for you guys vertex that shows up on that line I can even add a new point or as they get close to an existing pointed an existing vertex it's snaps that so this preference for modifying existing work overseas I can also add vertices and again this is modifying the shared boundaries between these countries if
by contrast I just selected 1 country and started editing it I would have destroyed the topology of of this region and who was murdered
the OK so that's editing with the the select and modify their
actions so while the examples that we saw so far use the Web Mercator Projection that's commonly used on web maps it's the 1 that we MEPs users it's the 1 that always implies that come in by a by default and 1 thing that's really baked into open there's 3 at the very core is support for projections the 1 thing you may notice when you create an openly as view is that you need to provide the coordinates in the map projection and what seems like uh a thing that makes things more complicated is in reality something that really opens you to working with arbitrary projections in this example that I'm going to show next we're using a sphere more light projection which displays the world in a completely different way than the Web Mercator Projection and in this case I also pulling and approach for chess lab report for chess is a library that provides transform functions between geographic coordinates and all the but projections that you can configure with this uh projection configurations in that's that's known from other frameworks that deal with 3 projecting to get such a protection in open for you really only include but approach for chess library and then use 0 approach get function to get an instance of that projection usually you will also want to set the validity the extent of that projection you can find extends on sites like the PSG I 0 and this allows openly have to decide what's another 0 means otherwise you have to deal with resolutions which is the union but more complicated and less natural than just providing extend that you copy and paste from PSG that I so let's look at this example here of
worth noting is the country's file that we load here is exactly the same that we used for the other examples and it was even track transformed on-the-fly what other examples from geographic on its because these to chase files and also in the Cayman files usually come in geographic audits and you need to transform the geometries to fit the protection of your map and in this case we just transformed into the sphere of like projection and you can see that this is
really looks completely different from from about market that you can also you see in the bottom left the mouse position here again I use the coordinates in the geographic using the latitude and and amplitude of also and looking at a map that uses a completely different projections to this all works for the transform functions that are provided by approach for as in this case if you don't want to use approach for chess or if you have a transform that's not available throughput fortunate you can provide your own transform functions as well now and to take this a step
further and what we just saw us also it looks like a globe is still just a map that it could also displayed on paper and I'm going to give you a sneak preview not null something that's going to really be released later this year it's a library that connects the 2 of us assume framework which provides a 3 D deal with so many great race to interact with 3 D scenes with open 3 and this a wrapper library where you configure your map in open free and all you you have to do to get the same map displayed in a scene in and of on a 3 D globe instead argues few lines of code in this case this is bound to a bottle that's taught us that but for detailed so you can switch between the 2 D map and the 3 D map that's sialidase looks
so this is just a 2 D map and going to by assuming a bit here to there are over we are and now I switch to the globe you won't notice much of a
difference here until you start navigating with this deal like for example you
tilted and then you see the atmosphere and I can turn them out like a flag flying up on a satellite over then you can switch back to introduce you and your
location is red of young in in this
map you can see the vector there yet but there's also something that's going to be available in this season wrapper library so it will also be possible to display a vector data and we do not have 3 D coordinates in open yes we already so when you pull in a has a see Kording then you will also be able to displayed a 3rd dimension in this uh cesium globe you all right so we've seen as some of the flexibility of the layer working with Rasta data sources that today's sources on everything we've been looking at with the exception of the cesium example has been using the canvas that render in OpenLayers we have 3 differ renders a DOM render canvas render and Web GL render and those provide different functionality in different capabilities the canvas renderer renders everything to a single canvas and and z of 1 map canvas you can have if you want air stop and taken up hundreds of vector layers all those vectors are drawn to 1 map canvas and each of the tire layers is rendered to an intermediate canvasses which is then repented on the final cantos read on the final cantos the DOM rendered lets the browser the Don decomposition so each layer gets its own element and we don't have a vector and render vector wherever render for the domina yet but I think we're interested in getting off with using Canada's and then have somebody potentially and reimplemented with that the if there is interested in old I you support but the DOM render work vector layers in give ones that different elements for each layer so using Canvas the point I want to get to was that by using him his is great because you can do things like work with the compose events that that that are fired on the layer on the map so after each Sayers composed so this would be a tile-based layer them when it is done painting drawing tiles on its fires posting compose event if you're using the canvas render you can get access to that drawing context so this event is fired in my listener says OK I wanna get the actual the can this with the context I wanna get the image data and done now I can do whatever I want with that image data so what are some things you can do this also a pre compose event which I'll show the use of but in this example 1
thing is to display 2 layers and then with every mouse move trigger re-rendering and when doing the pre compose event is drawing a circular path and setting up a clip on the canvas so the top layer is clipped to the circle around the mouse and the bottom
layer and is drawn as normal and so you get this little by glass effect you come in here and I can share my offices their Nigel spun that so that is using these pre-composed and post-compose events in
addition you can use the same events do other things like display a video on a map so I just
asking for permission I could use a the said for sure this is a skybox video that just it basically copying the people saw the not box yell blog posts using this video and so you could do the same thing upper layers so as in every those compose event I got a frame from this video and displayed on the canvas so I can pan around it's a short video it's moving here where there's that
jerking it's starting over but and you can see you could use something like video tiles display as a as a layer in
OpenLayers then and I intend to work international video source so you could point to the URL for your video sources and those people then as sort of static videos like this 1 it's a single video or get a tiled video provider those people tiled together OK so
there's all the time of functionality it's a massive library is really like of a mapping framework and from the start we chose to use the closure compiler and but we we know it took on a lot of things with this commitment basically we decided to build a very large feature filled library more than you'd ever using a single application and when you go to build a single application is sent up to you to decide what parts of that you want so uh if instead you're using a small library that had a plug-in ecosystem around it you might be pulling in those plug-ins by adding strips script tags year mark up or you might be using some dependency management system the pull those plug-ins but with OpenLayers when you when you want OpenLayers the 1 way to do it is to specify the spilled configurations so this configuration is describing what I want to be exported from library so well map stars stars card so this gives me everything that related all the MAP methods and properties what everything in the view that we've looked at I'm pulling in tire layer and xyz source in the vector where the adjacent source and then under show the overlay them I want that set position method and and I'm a compile this with advanced compilation and there's a node-based build task that drives the compiler and produces this minified up the output for you this is still way too high bar no and so what we need to do is to have a hosted build tool were things we use of to build tool that will let people go online at 1 thing that you do is check check check check check check what they do and don't use and of the major news provide little monitor script the you can run with the application of ironies tests and it will actually detect what you're using where the methods using the middle provide you link back to the build tool where you can get your build another thing you do is provide custom profiles of library so if we decide that these really common components we will publish a bill that that since a limited set of needs but this gives you all the examples I showed you at the bigger than leaflet which were a little disappointed by that there about 50 kgs it so if you're looking at loading uh you know whatever 64 tiles alone in the 1st load the library size starts to become less consequential so yeah you already
heard there was some references to future efforts openness 3 was released 2 weeks ago so we invite all of you to look up at our source code on GitHub you might even want to become a contributor in any case you're free and invited to join our discussion on the on the mailing list and with that we'll just finish this and say thank you thanks for your interest and thanks for coming here few would be the role of a couple minutes for
questions are you want the transition with 3 minutes what both must also be
around in the exhibition hall that
lapses boot there as boundless so you cannot ask questions there's well he stated
and implemented the map projection
but does that scale through to the scale bar the distance measure tool
so the eyes of the radius implied look the the so I think all developers make design decisions that they later on no they would make differently than do again but a total rebuild something a pretty drastic measure would push aggressively edge the question overlayers 2 was really showing its age it was built that ring and released before I 7 and on the same day I think is J. query 1 or something and so we had a 67 year history with the same API that trying to still work you maintain backwards can bit compatibility in work and all those old browsers and it really was is showing its age and I that it still provides uh I could functionality for people that use it but we want to build a to give edge new technologies and push things forward the the we the