Getting Started with OpenLayers 3
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.
Schaub, Tim
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.
 Just so everybody's clear, this is the OpenLayers 3 talk. They switched rooms. If you're here for the previously scheduled talk, it's over on the D side. Oh, do you see standard that's really 135 and 35? How's that mic? Is that loud enough? Do we have to talk down here? Louder. OK. All right, so Andreas was not mentioned on the schedule, but this is a dual presentation. Andreas Hochevar is my co-conspirator here, and we're going to both be tag teaming for this presentation. We're here to talk about the recently released OpenLayers 3 library. I'll give a little bit more introduction to that in a second, but I'm Tim Schaub, and I work at Planet Labs. And I'm Andreas Hochevar, and I work with, as a consultant, for boundless. So just two weeks ago, we finally released OpenLayers 3.0. It's been about two years in the making. It's a complete rewrite. Shares no code with the original two versions of the library. And it was a pretty massive undertaking. It was a community, a consortium of companies funded it, raised funds for the development of it, and we raised some community funds for it. And we really had ambitious goals, and it was sort of a herculean effort to get it to a stable point. We finally, just two weeks ago, marked a usable section of the API as stable and released 3.0. So the way this talk is going to work is I'll just put a goal up here, something you might want to do as an application developer with OpenLayers 3.0. And then I'll show a code example, how the API is used, in this case. And then we'll move into a real example of what it looks like in a browser. So the first thing you'll notice is that OpenLayers 3 has split apart concepts of a map and a view. The map is a collection of layers. It has things like controls or interactions that we'll talk about coming up associated with the map. And the view is the actual view state. So it has things like center, rotation, resolution, or zoom as a shorthand for that. But where do you get that layer from? There was a layer collection in there. So your goal might be to use layers, tile layers from a number of different providers. So you could use a tile layer with an OSM source. These are two more new concepts here. A layer is about the rendering in the view of the data. And the source describes how to fetch the data. So in this case, the data comes from this OSM community OpenStreetMap tile provider. And it's rendered as a tile layer. You could use that same tile layer with a proprietary tile source. So in this case, it's Bing Maps. And you put in your key and the style that you want and use the same layer for that. So here's an example of a number of different layers. There's an aerial from Bing. A couple of things I wanted to emphasize with this example are the tile cache. Each of those sources I mentioned maintains its own tile cache. So as I zoom in here and I pan to a new area that I haven't seen yet at this resolution, we've got good internet here. But you'll see that these lower resolution tiles from a lower zoom level are being used as intermediate tiles while the target zoom level tiles load. So the idea is that you never pan off the edge of the map, given that if you load your map at a low zoom level and then zoom in, you should never pan off the edge of the map and see any white. Another thing I wanted to emphasize is this, or point out, is a tile queue. Again, it's pretty subtle here with a fast internet connection, but there's a prioritized tile queue. So if you look at my mouse down here in the lower right corner of the screen, as I zoom in, you should see, you're not going to be able to see with this connection, that the tiles around my mouse are loaded first. So if you have tiles that were requested at a previous resolution, when you get to a new resolution, that triggers a rendering, and then the tile queue is sort of restructured with newer, higher priority tiles, and those are loaded. So. Now you saw Tim zoom in and pan around on the map. This was the default behavior for users to interact with the map. Now the goal is to give the user control and modify the ways how you give users control. For this, we have two packages in OpenLayers 3. One is interactions. Interactions are usually about pointer gestures that allow you to interact with the map, like when you drag the map pants, when you pinch zoom on a mobile device, you can zoom, and so on. For things like the plus and minus buttons you saw on the top left of the screen, that's controls. Controls have buttons or any visual representation on top of the map. A scale line, for example, has also an overlay on top of the map. Let's look at this, how it looks in a real example. So here, we have another map using the Bing layer. The plus and minus buttons here are for zooming in and out. So let's zoom out a bit here to see more context. While I did that, you saw the scale line here, which changes also as you change the resolution and also as you change the center of the map. Worth noting maybe that the scale is calculated for the center of the map. And then we have a tool here also. Let's zoom in again to where I come from, somewhere in the Alps. And then I want to know where I am. This is a custom control, which provides the simple locate button here. Takes a while for the browser to figure out my location. And as soon as I'm there, I'll be pinned to my location. Then another nice thing about controls and about controlling the view is to use two way bindings. One thing we can do in OpenLens3 is rotate the map view. And as you can see here, as I rotate using one of the mouse interactions, also this slider here updates. There's a two way binding between this HTML5 slider control and the rotation property on the map view. And there's also this additional control that allows me to reset the rotation to north up. All right, so everything we've been looking at so far, our raster tiles, and we brought those in with tile data sources and displayed them in image based layers. Now we want to look at working with vector data. So again, there's a split. You have a vector layer. And then any number of sources that describe how you're going to go fetch that data. So in this case that we bundled together the format of the data and how it is retrieved. It's addressed by this URL. And then I say it's a GeoJSON source. So that gives me a GeoJSON format to parse it. And I want to read it into EPSG3857, so Web Mercator. That will display these GeoJSON countries on the map rendered in the browser. Obviously you want to style it. We have a default style that you get, but you might want to style it to your own liking so it fits your application. So on a vector layer, you can set the style. Here I'm giving it a single style instance with a fill and a stroke. I've only specified the color here for both. You can specify the width, the opacity is specified in the color of the fill. In addition, you can call that setStyle method with a function. And that function will be called for every feature at every resolution that your map is rendered. It's not called during animated transitions between resolutions, but anytime you stop and you're not animating, this function is called with every feature. So you can decide how you want to style your features based on their attributes or the view resolution. So there's not enough room here for the code. But if the resolution was less than some value, I might construct a few symbolizers. Otherwise, I might construct different symbolizers. In this example, I've used that style function. And each time it's called, I get the area, the projected area of the geometries, and then the geodesic area of the geometries, and divide the geodesic area by the projected area. And then it's scaled. There's a linear scaling. Mike inspired me to use his HCL interpolate functionality between a brownish color to a steel blue color, based on essentially the distortion, how much bigger a country is, how much bigger the projected representation is relative to its geographic area. So as I zoom in, you can see there's also labeling going on here. So that's a scale or resolution conditionally labeling the features there. I've got a little stroke on the text as well. A nice thing is you rotate around. If you went to Eric's talk, you heard him talk about how we batch these rendering instructions. And this is all rendered in Canvas, where typically, if you just rotated the Canvas, you would get a rotation of labels. This is re-rendering with every rotation. As I zoom in as well, you can see that the font size stays consistent during that animated transition, as does the stroke width. So we're not scaling the Canvas. We're literally redrawing using the same batch of rendering instructions at every frame in this animation. So now we saw vector data rendered. But the real advantage of vector data is that you can let the user interact with the data, which means you don't just look at a dump map image, but you can really get instant information about what you're looking at without having to do another round trip to the server. Let me explain these two things that we're going to see in the next example. We're going to create 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. Pop-up can easily be implemented using any JavaScript framework of your liking. And to bind it to a geographic location on your map, we have a component in OpenLayer 3 called the OL overlay. You configure it with an HTML element that you have in your markup. And then you just add this overlay to the map. And as you can see here, we register a click handler on the map. And the map provides us a function that's called for each feature at Pixel. What this function does is it uses the hit detection that Eric has explained in his talk and gives me back all the features that are at the current pixel location that are passed here as a first argument. And then this function is called with all of these features. And in this case, since I'm looking at a polygon layer, I usually only expect one polygon at a location because these are countries and have boundaries and don't overlap. So I'm going to create a pop-up with the name of the feature in this case. And the most important thing here is to put the pop-up at the exact position that I clicked, I call the set position method here. In this feature interaction example that I'm going to show here, I do a bit more than just this. If you notice my mouse cursor here at the ocean where there are no countries, it's just a pointer. And as soon as I move here to a country, it changes its shape, notifying me that I can click here. So there's two handlers involved here, obviously one for pointer move and another for click. Now if I click here, I create this pop-up. As I said, it sticks to the location of the map. I can also rotate the map and will still maintain my pop-up here. And in this case, the information I display is also the calculated geodesic area of the country that I clicked on. All right, so we saw basic interaction with features. One of the other things that's worth mentioning in that last example that Andreas showed is we've sort of written a shim for the pointer event specification. If people know about this, it tries to generalize the different type of events that get fired on different devices. So you register for a pointer move event, for example. And that works on touch devices, works on devices with mouse, works if you have multi-touches, it works on different devices. So it's another nice feature of the library. OK, so the goal here is to allow editing. We've interacted with features, displayed some basic information. Now I want to modify the geometries associated with features. So that's handled in library with a combination of two different interactions. These could be wrapped together in an editing control. If you wanted to have buttons on your map or something, you develop a control for toggling the activity of these interactions. The select interaction, we'll see in just a second, maintains a collection of selected features. And then you can associate that collection of features with a modify interaction. So this says, I want to allow the user to click, click, click, and select a batch of features. And then I want all those selected features to be candidates for modification. So in this editing example, I'm going to zoom in here and show you the select behavior. So I just click a single time, select a single country. If I grab Sudan, Egypt, Syria, and Chad together, now all four of those features are in my selected feature collection. And now I can edit them together. So as I move around vertices, I'm getting the shared editing of vertices that are coincident between those features. Another nice thing, you see, as I approach this line here, there's a little hint that is given to me in the probably very small for you guys, vertex that shows up on that line. I can either add a new point, or as I get close to an existing point or an existing vertex, it snaps to that. So there's preference for modifying existing vertices. I can also add vertices. And again, this is modifying these shared boundaries between these countries. If, by contrast, I just selected one country and started editing it, I would have destroyed the topology of this region. And we wouldn't want to do that. OK, so that's editing with the select and modify interactions. So all the examples that we saw so far use the web Mercator projection that's commonly used on web maps. It's the one that Google Maps uses. It's the one that OSM tiles come in by default. And one thing that's really baked into OpenLayers 3 at the very core is support for projections. The one thing you may notice when you create an OpenLayers view is that you need to provide the coordinates in the map projection. And what seems like 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 sphere-mall-wide projection, which displays the world in a completely different way than the web Mercator projection. And in this case, I also pull in the Proj4.js library. Proj4.js is a library that provides transform functions between geographic coordinates and all projections that you can configure with this projection configuration syntax that's known from other frameworks that deal with reprojecting. To get such a projection in OpenLayers 3, you really only include the Proj4.js library. And then you use the olproj get function to get an instance of that projection. Usually, you will also want to set the validity extent of that projection. You can find these extents on websites like epsg.io. And this allows OpenLayers to decide what sum level zero means. Otherwise, you have to deal with resolutions, which is, believe me, more complicated and less natural than just providing this extent that you copy and paste from epsg.io. So let's look at this example here. Worth noting is the countries file that we load here is exactly the same that we used for the other examples. And it was even transformed on the fly for the other examples from geographic coordinates because these geochasen files and also KML files usually come in geographic coordinates. And you need to transform the geometries to fit the projection of your map. And in this case, we just transformed it to the sphere mole-wide projection. And you can see that this really looks completely different from a web marketer map. You can also see in the bottom left the mouse position. Here again, I used the coordinates in geographic using latitude and longitude. Although I'm looking at a map that uses a completely different projection. So this all works through the transform functions that are provided by Proj4js. In this case, if you don't want to use Proj4js or if you have a transform that's not available through Proj4js, you can provide your own transform functions as well. Now, to take this a step further, what we just saw is although it looks like a globe, it's still just a map that you could also display on paper. And I'm going to give you a sneak preview now of something that's going to be released later this year. It's a library that connects the cesium framework, which provides a 3D globe with many great ways to interact with 3D scenes with OpenLear3. And this is a wrapper library where you configure your map in OpenLear3. And all you have to do to get the same map displayed in a scene on a 3D globe instead are these few lines of code. In this case, this is bound to a button that targets the 3D globe. So you can switch between a 2D map and a 3D map. Let's see how this looks. So this is just a 2D map. I'm going to zoom in a bit here to the area where we are. And now I switch to the globe. You won't notice much of a difference here until you start navigating with this globe. Like for example, here I tilt it, and then you see the atmosphere, and I can turn the map like flying on a satellite over the Earth. And then you can switch back to the 2D view, and your location is maintained. Yeah, in this map, you didn't see vector data yet, but that's also something that's going to be available in this Season Wrap Library. So it will also be possible to display vector data. And we do have 3D coordinates in OpenLiAS 3 already. So when you pull in a file that has C coordinate, then you will also be able to display the third dimension in this Season Globe viewer. All right, so we've seen some of the flexibility of the layer working with raster data sources, vector data sources. Everything we've been looking at, with the exception of the cesium example, has been using the Canvas renderer in OpenLiAS. We have three different renders, a DOM renderer, Canvas renderer, and WebGL renderer. And those provide different functionality and different capabilities. The Canvas renderer renders everything to a single Canvas in the end. So you have one map Canvas. If people went to Eric's talk, they heard him say you can have hundreds of vector layers. All those vectors are drawn to one map Canvas. Each of the tile layers is rendered to an intermediate Canvas, which is then repainted onto the final Canvas, or redrawn onto the final Canvas. The DOM renderer lets the browser, the DOM, do composition. So each layer gets its own element. And we don't have a vector renderer, vector layer renderer for the DOM renderer yet. But I think we're just going to go forward with using Canvas and then have somebody potentially re-implement it with VML if there is interested in old IE support. But the DOM renderer would work with vector layers, and it would give you one different element for each layer. So using Canvas, the point I wanted to get to, was using Canvas is great because you can do things like work with the compose events that are fired on the layer or on the map. So after each layer is composed, so this would be a tile based layer, when it is done drawing tiles on its Canvas, it fires a compose event. If you're using the Canvas renderer, you can get access to that drawing context. So this event is fired, and my listener says, OK, I want to get the actual Canvas. With the context, I want to get the image data, and now I can do whatever I want with that image data. So what are some things that you can do? There's also a pre-compose event, which I'll show the use of in this example. One thing is to display two layers, and then with every mouse move, trigger a re-rendering. And what I'm doing in the pre-compose event is drawing a circular path and setting a clip on the Canvas. So the top layer is clipped to the circle around my mouse, and the bottom layer is drawn as normal. And so you get this little spyglass effect. You can come in here, and I can show you where my office is. There. Now you can all spy on me. So that is using these pre-compose and post-compose events. In addition, you can use these same events to do other things, like display a video on a map. So I just asked Dayan for permission. I could use this, and he said for sure. This is a Skybox video that I just basically copied. People saw the MapboxGL blog post using this video. I wanted to show how you could do the same thing in open layers. So in every post-compose event, I grab a frame from this video and display it on the Canvas. So I can pan around. It's a short video. It's looping here when it does that jerking. It's starting over. But you could see that you could use something like video tiles to display as a layer in open layers. And I intend to work this into an actual video source. So you could point to the URL for your video sources, and those could be pulled in as static videos, just like this one that's a single video. Or if you had a tiled video provider, those could be pulled in and tiled together on the map. OK. So there's a ton of functionality. It's a massive library. It's really like a mapping framework. And from the start, we chose to use the Closure Compiler. And we 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 use in a single application. And when you go to build a single application, it's then up to you to decide what parts of that you want. So if instead you're using a small library that, let's say, had a plug-in ecosystem around it, you might be pulling in those plug-ins by adding script tags to your markup, or you might be using some dependency management system to pull in those plug-ins. With open layers, when you want to pull in open layers, one way to do it is to specify this build configuration. So this configuration is describing what I want to be exported from the library. So OL map star, star is a wild card. So this gives me everything map related, all the map methods and properties. I want everything on the view that we've looked at. I'm pulling in a tile layer and an XYZ source, and then the vector layer and the geojason source. And then Andreas showed the overlay, and I might want that set position method. And then I'm going to compile this with advanced compilation, and there's a node-based build task that drives the compiler and produces this minified output for you. This is still way too high a bar, I know. And so what we need to do is to have a hosted build tool. One of the things we need to do is have a hosted build tool that will let people go online. One thing they could do is check, check, check, check, check, check what they do and don't use. Another thing we can do is provide a little monitor script that you can run with your application or while you're running tests, and it will actually detect what you're using, what are the methods you're using, and then it will provide you a link back to the build tool where you can get your build. Another thing we will do is provide custom profiles of the library. So if we decide that these are really common components, we will publish a build that suits a limited set of needs. But this gives you all the examples I showed you. They're bigger than leaflet, which we're a little disappointed by, but they're about 50K AG zip. So if you're looking at loading whatever 64 tiles that load in the first load, the library size starts to become less consequential. So. Yeah, you already heard. There were some references to future efforts. OpenL3 was released two weeks ago. So we invite all of you to look 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 mailing list. And with that, we'll just finish this and say thank you. Thanks for your interest, and thanks for coming here. There might be, did we run all the way out a couple minutes for questions, or if people want to do the transition? OK, three minutes. Clock's ticking. Both of us will also be around in the exhibition hall. Planet Labs has a booth there, as does Boundless. So you can come up and ask questions there as well. You stated you implemented the map projection. Does that scale through to the scale bar, the distance, the measure tool? So it uses the radius implied? OK. Yeah. So I think all developers make design decisions that they later on know they would have made differently if they had to do again. But a total rebuild sounds like a pretty drastic measure. What pushed you guys over the edge? Good question. OpenLayers 2 was really showing its age. It was built and released before IE7. And on the same day, I think, is JQuery 1 or something. And so it had a six or seven-year history with the same API, trying to still work, you know, maintain backwards compatibility and work on all those old browsers. And it really was just showing its age. And it still provides good functionality for people that use it, but we wanted to be able to take advantage of new technologies and push things forward.
 Just so everybody's clear, this is the OpenLayers 3 talk.  They switched rooms.  If you're here for the previously scheduled talk,  it's over on the D side.  Oh, do you see standard that's really 135 and 35?  How's that mic?  Is that loud enough?  Do we have to talk down here?  Louder.  OK.  All right, so Andreas was not mentioned on the schedule,  but this is a dual presentation.  Andreas Hochevar is my co-conspirator here,  and we're going to both be tag teaming for this presentation.  We're here to talk about the recently released OpenLayers  3 library.  I'll give a little bit more introduction to that  in a second, but I'm Tim Schaub, and I work at Planet Labs.  And I'm Andreas Hochevar, and I work with, as a consultant,  for boundless.  So just two weeks ago, we finally released OpenLayers 3.0.  It's been about two years in the making.  It's a complete rewrite.  Shares no code with the original two versions of the library.  And it was a pretty massive undertaking.  It was a community, a consortium of companies  funded it, raised funds for the development of it,  and we raised some community funds for it.  And we really had ambitious goals,  and it was sort of a herculean effort  to get it to a stable point.  We finally, just two weeks ago, marked a usable section  of the API as stable and released 3.0.  So the way this talk is going to work  is I'll just put a goal up here, something you might want  to do as an application developer with OpenLayers 3.0.  And then I'll show a code example, how the API is used,  in this case.  And then we'll move into a real example of what  it looks like in a browser.  So the first thing you'll notice is that OpenLayers 3 has  split apart concepts of a map and a view.  The map is a collection of layers.  It has things like controls or interactions  that we'll talk about coming up associated with the map.  And the view is the actual view state.  So it has things like center, rotation, resolution,  or zoom as a shorthand for that.  But where do you get that layer from?  There was a layer collection in there.  So your goal might be to use layers,  tile layers from a number of different providers.  So you could use a tile layer with an OSM source.  These are two more new concepts here.  A layer is about the rendering in the view of the data.  And the source describes how to fetch the data.  So in this case, the data comes from this OSM community  OpenStreetMap tile provider.  And it's rendered as a tile layer.  You could use that same tile layer with a proprietary tile  source.  So in this case, it's Bing Maps.  And you put in your key and the style that you want  and use the same layer for that.  So here's an example of a number of different layers.  There's an aerial from Bing.  A couple of things I wanted to emphasize with this example  are the tile cache.  Each of those sources I mentioned  maintains its own tile cache.  So as I zoom in here and I pan to a new area that I haven't  seen yet at this resolution, we've got good internet here.  But you'll see that these lower resolution tiles from a lower  zoom level are being used as intermediate tiles while the  target zoom level tiles load.  So the idea is that you never pan off the edge of the map,  given that if you load your map at a low zoom level and then  zoom in, you should never pan off the edge of the map and  see any white.  Another thing I wanted to emphasize is this, or point  out, is a tile queue.  Again, it's pretty subtle here with a fast internet  connection, but there's a prioritized tile queue.  So if you look at my mouse down here in the lower right  corner of the screen, as I zoom in, you should see, you're  not going to be able to see with this connection, that the  tiles around my mouse are loaded first.  So if you have tiles that were requested at a previous  resolution, when you get to a new resolution, that triggers  a rendering, and then the tile queue is sort of  restructured with newer, higher priority tiles, and  those are loaded.  So.  Now you saw Tim zoom in and pan around on the map.  This was the default behavior for users to interact with  the map.  Now the goal is to give the user control and modify the  ways how you give users control.  For this, we have two packages in OpenLayers 3.  One is interactions.  Interactions are usually about pointer gestures that allow  you to interact with the map, like when you drag the map  pants, when you pinch zoom on a mobile device, you can zoom,  and so on.  For things like the plus and minus buttons you saw on the  top left of the screen, that's controls.  Controls have buttons or any visual representation on top  of the map.  A scale line, for example, has also an overlay on top of  the map.  Let's look at this, how it looks in a real example.  So here, we have another map using the Bing layer.  The plus and minus buttons here are for  zooming in and out.  So let's zoom out a bit here to see more context.  While I did that, you saw the scale line here, which  changes also as you change the resolution and also as you  change the center of the map.  Worth noting maybe that the scale is calculated for the  center of the map.  And then we have a tool here also.  Let's zoom in again to where I come from,  somewhere in the Alps.  And then I want to know where I am.  This is a custom control, which provides the simple locate  button here.  Takes a while for the browser to figure out my location.  And as soon as I'm there, I'll be  pinned to my location.  Then another nice thing about controls and about  controlling the view is to use two way bindings.  One thing we can do in OpenLens3 is rotate the map view.  And as you can see here, as I rotate using one of the mouse  interactions, also this slider here updates.  There's a two way binding between this HTML5 slider  control and the rotation property on the map view.  And there's also this additional control that  allows me to reset the rotation to north up.  All right, so everything we've been looking at so far,  our raster tiles, and we brought those in with tile data  sources and displayed them in image based layers.  Now we want to look at working with vector data.  So again, there's a split.  You have a vector layer.  And then any number of sources that describe how you're  going to go fetch that data.  So in this case that we bundled together the format of the  data and how it is retrieved.  It's addressed by this URL.  And then I say it's a GeoJSON source.  So that gives me a GeoJSON format to parse it.  And I want to read it into EPSG3857, so Web Mercator.  That will display these GeoJSON countries on the map  rendered in the browser.  Obviously you want to style it.  We have a default style that you get, but you might want to  style it to your own liking so it fits your application.  So on a vector layer, you can set the style.  Here I'm giving it a single style instance with a fill and  a stroke.  I've only specified the color here for both.  You can specify the width, the opacity is specified in the  color of the fill.  In addition, you can call that setStyle method with a  function.  And that function will be called for every feature at  every resolution that your map is rendered.  It's not called during animated transitions between  resolutions, but anytime you stop and you're not  animating, this function is called with every feature.  So you can decide how you want to style your features  based on their attributes or the view resolution.  So there's not enough room here for the code.  But if the resolution was less than some value, I might  construct a few symbolizers.  Otherwise, I might construct different symbolizers.  In this example, I've used that style function.  And each time it's called, I get the area, the projected  area of the geometries, and then the geodesic area of the  geometries, and divide the geodesic area by the projected  area.  And then it's scaled.  There's a linear scaling.  Mike inspired me to use his HCL interpolate functionality  between a brownish color to a steel blue color, based on  essentially the distortion, how much bigger a country is,  how much bigger the projected representation is relative to  its geographic area.  So as I zoom in, you can see there's also labeling going  on here.  So that's a scale or resolution conditionally  labeling the features there.  I've got a little stroke on the text as well.  A nice thing is you rotate around.  If you went to Eric's talk, you heard him talk about how we  batch these rendering instructions.  And this is all rendered in Canvas, where typically, if  you just rotated the Canvas, you would get a rotation of  labels.  This is re-rendering with every rotation.  As I zoom in as well, you can see that the font size stays  consistent during that animated transition, as does the  stroke width.  So we're not scaling the Canvas.  We're literally redrawing using the same batch of  rendering instructions at every frame in this animation.  So now we saw vector data rendered.  But the real advantage of vector data is that you can let  the user interact with the data, which means you don't  just look at a dump map image, but you can really get  instant information about what you're looking at without  having to do another round trip to the server.  Let me explain these two things that we're going to see in  the next example.  We're going to create 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.  Pop-up can easily be implemented using any  JavaScript framework of your liking.  And to bind it to a geographic location on your map, we  have a component in OpenLayer 3 called the OL overlay.  You configure it with an HTML element that you have in  your markup.  And then you just add this overlay to the map.  And as you can see here, we register a click handler on  the map.  And the map provides us a function that's called for  each feature at Pixel.  What this function does is it uses the hit detection that  Eric has explained in his talk and gives me back all the  features that are at the current pixel location that are  passed here as a first argument.  And then this function is called with all of these  features.  And in this case, since I'm looking at a polygon layer, I  usually only expect one polygon at a location because  these are countries and have boundaries and don't overlap.  So I'm going to create a pop-up with the name of the  feature in this case.  And the most important thing here is to put the pop-up at  the exact position that I clicked, I call the set  position method here.  In this feature interaction example that I'm going to  show here, I do a bit more than just this.  If you notice my mouse cursor here at the ocean where  there are no countries, it's just a pointer.  And as soon as I move here to a country, it changes its  shape, notifying me that I can click here.  So there's two handlers involved here, obviously one for  pointer move and another for click.  Now if I click here, I create this pop-up.  As I said, it sticks to the location of the map.  I can also rotate the map and will still maintain my pop-up  here.  And in this case, the information I display is also  the calculated geodesic area of the country that I clicked on.  All right, so we saw basic interaction with features.  One of the other things that's worth mentioning in that last  example that Andreas showed is we've sort of written a shim  for the pointer event specification.  If people know about this, it tries to generalize the  different type of events that get fired on different  devices.  So you register for a pointer move event, for example.  And that works on touch devices, works on devices with  mouse, works if you have multi-touches, it works on  different devices.  So it's another nice feature of the library.  OK, so the goal here is to allow editing.  We've interacted with features, displayed some basic  information.  Now I want to modify the geometries  associated with features.  So that's handled in library with a combination of two  different interactions.  These could be wrapped together in an editing control.  If you wanted to have buttons on your map or something, you  develop a control for toggling the activity of these  interactions.  The select interaction, we'll see in just a second,  maintains a collection of selected features.  And then you can associate that collection of features with  a modify interaction.  So this says, I want to allow the user to click, click,  click, and select a batch of features.  And then I want all those selected features to be  candidates for modification.  So in this editing example, I'm going to zoom in here and  show you the select behavior.  So I just click a single time, select a single country.  If I grab Sudan, Egypt, Syria, and Chad together, now all  four of those features are in my selected feature  collection.  And now I can edit them together.  So as I move around vertices, I'm getting the shared  editing of vertices that are coincident  between those features.  Another nice thing, you see, as I approach this line here,  there's a little hint that is given to me in the probably  very small for you guys, vertex that shows up on that line.  I can either add a new point, or as I get close to an  existing point or an existing vertex, it snaps to that.  So there's preference for modifying  existing vertices.  I can also add vertices.  And again, this is modifying these shared boundaries  between these countries.  If, by contrast, I just selected one country and  started editing it, I would have destroyed the topology of  this region.  And we wouldn't want to do that.  OK, so that's editing with the select and modify  interactions.  So all the examples that we saw so far use the web  Mercator projection that's commonly used on web maps.  It's the one that Google Maps uses.  It's the one that OSM tiles come in by default.  And one thing that's really baked into OpenLayers 3 at the  very core is support for projections.  The one thing you may notice when you create an OpenLayers  view is that you need to provide the coordinates in the  map projection.  And what seems like 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  sphere-mall-wide projection, which displays the world in  a completely different way than the web  Mercator projection.  And in this case, I also pull in the Proj4.js library.  Proj4.js is a library that provides transform functions  between geographic coordinates and all projections that you  can configure with this projection configuration  syntax that's known from other frameworks that deal with  reprojecting.  To get such a projection in OpenLayers 3, you really only  include the Proj4.js library.  And then you use the olproj get function to get an instance  of that projection.  Usually, you will also want to set the validity extent of  that projection.  You can find these extents on websites like epsg.io.  And this allows OpenLayers to decide what sum level zero  means.  Otherwise, you have to deal with resolutions, which is,  believe me, more complicated and less natural than just  providing this extent that you copy and paste from epsg.io.  So let's look at this example here.  Worth noting is the countries file that we load here is  exactly the same that we used for the other examples.  And it was even transformed on the fly for the other  examples from geographic coordinates because these  geochasen files and also KML files usually come in  geographic coordinates.  And you need to transform the geometries to fit the  projection of your map.  And in this case, we just transformed it to the sphere  mole-wide projection.  And you can see that this really looks completely  different from a web marketer map.  You can also see in the bottom left the mouse position.  Here again, I used the coordinates in geographic  using latitude and longitude.  Although I'm looking at a map that uses a completely  different projection.  So this all works through the transform functions that are  provided by Proj4js.  In this case, if you don't want to use Proj4js or if you  have a transform that's not available through Proj4js, you  can provide your own transform functions as well.  Now, to take this a step further, what we just saw is  although it looks like a globe, it's still just a map that  you could also display on paper.  And I'm going to give you a sneak preview now of something  that's going to be released later this year.  It's a library that connects the cesium framework, which  provides a 3D globe with many great ways to interact with  3D scenes with OpenLear3.  And this is a wrapper library where you configure your map  in OpenLear3.  And all you have to do to get the same map displayed in a  scene on a 3D globe instead are these few lines of code.  In this case, this is bound to a button that targets the  3D globe.  So you can switch between a 2D map and a 3D map.  Let's see how this looks.  So this is just a 2D map.  I'm going to zoom in a bit here to the area where we are.  And now I switch to the globe.  You won't notice much of a difference here until you start  navigating with this globe.  Like for example, here I tilt it, and then you see the  atmosphere, and I can turn the map like flying on a  satellite over the Earth.  And then you can switch back to the 2D view, and your  location is maintained.  Yeah, in this map, you didn't see vector data yet, but  that's also something that's going to be available in this  Season Wrap Library.  So it will also be possible to display vector data.  And we do have 3D coordinates in OpenLiAS 3 already.  So when you pull in a file that has C coordinate, then you  will also be able to display the third dimension in this  Season Globe viewer.  All right, so we've seen some of the flexibility of the  layer working with raster data sources, vector data sources.  Everything we've been looking at, with the exception of the  cesium example, has been using the Canvas renderer in  OpenLiAS.  We have three different renders, a DOM renderer, Canvas  renderer, and WebGL renderer.  And those provide different functionality and different  capabilities.  The Canvas renderer renders everything to a single  Canvas in the end.  So you have one map Canvas.  If people went to Eric's talk, they heard him say you can  have hundreds of vector layers.  All those vectors are drawn to one map Canvas.  Each of the tile layers is rendered to an intermediate  Canvas, which is then repainted onto the final Canvas, or  redrawn onto the final Canvas.  The DOM renderer lets the browser, the DOM, do  composition.  So each layer gets its own element.  And we don't have a vector renderer, vector layer  renderer for the DOM renderer yet.  But I think we're just going to go forward with using Canvas  and then have somebody potentially re-implement it  with VML if there is interested in old IE support.  But the DOM renderer would work with vector layers, and it  would give you one different element for each layer.  So using Canvas, the point I wanted to get to, was using  Canvas is great because you can do things like work with the  compose events that are fired on the layer or on the map.  So after each layer is composed, so this would be a tile  based layer, when it is done drawing tiles on its Canvas,  it fires a compose event.  If you're using the Canvas renderer, you can get access  to that drawing context.  So this event is fired, and my listener says, OK, I want to  get the actual Canvas.  With the context, I want to get the image data, and now I  can do whatever I want with that image data.  So what are some things that you can do?  There's also a pre-compose event, which I'll show the  use of in this example.  One thing is to display two layers, and then with every  mouse move, trigger a re-rendering.  And what I'm doing in the pre-compose event is  drawing a circular path and setting a clip on the Canvas.  So the top layer is clipped to the circle around my mouse,  and the bottom layer is drawn as normal.  And so you get this little spyglass effect.  You can come in here, and I can show you where my office is.  There.  Now you can all spy on me.  So that is using these pre-compose and post-compose  events.  In addition, you can use these same events to do other  things, like display a video on a map.  So I just asked Dayan for permission.  I could use this, and he said for sure.  This is a Skybox video that I just basically copied.  People saw the MapboxGL blog post using this video.  I wanted to show how you could do the same thing in open  layers.  So in every post-compose event, I grab a frame from this  video and display it on the Canvas.  So I can pan around.  It's a short video.  It's looping here when it does that jerking.  It's starting over.  But you could see that you could use something like video  tiles to display as a layer in open layers.  And I intend to work this into an actual video source.  So you could point to the URL for your video sources, and  those could be pulled in as static videos, just like this  one that's a single video.  Or if you had a tiled video provider, those could be  pulled in and tiled together on the map.  OK.  So there's a ton of functionality.  It's a massive library.  It's really like a mapping framework.  And from the start, we chose to use the Closure Compiler.  And we 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 use in a single application.  And when you go to build a single application, it's then  up to you to decide what parts of that you want.  So if instead you're using a small library that, let's say,  had a plug-in ecosystem around it, you might be pulling in  those plug-ins by adding script tags to your markup, or  you might be using some dependency management system  to pull in those plug-ins.  With open layers, when you want to pull in open layers, one  way to do it is to specify this build configuration.  So this configuration is describing what I want to be  exported from the library.  So OL map star, star is a wild card.  So this gives me everything map related, all the map  methods and properties.  I want everything on the view that we've looked at.  I'm pulling in a tile layer and an XYZ source, and then the  vector layer and the geojason source.  And then Andreas showed the overlay, and I might want that  set position method.  And then I'm going to compile this with advanced  compilation, and there's a node-based build task that  drives the compiler and produces this minified  output for you.  This is still way too high a bar, I know.  And so what we need to do is to have a hosted build tool.  One of the things we need to do is have a hosted build tool  that will let people go online.  One thing they could do is check, check, check, check,  check, check what they do and don't use.  Another thing we can do is provide a little monitor  script that you can run with your application or while  you're running tests, and it will actually detect what  you're using, what are the methods you're using, and then  it will provide you a link back to the build tool where you  can get your build.  Another thing we will do is provide custom profiles of  the library.  So if we decide that these are really common components, we  will publish a build that suits a limited set of needs.  But this gives you all the examples I showed you.  They're bigger than leaflet, which we're a little  disappointed by, but they're about 50K AG zip.  So if you're looking at loading whatever 64 tiles that  load in the first load, the library size starts to become  less consequential.  So.  Yeah, you already heard.  There were some references to future efforts.  OpenL3 was released two weeks ago.  So we invite all of you to look 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 mailing list.  And with that, we'll just finish this and say thank you.  Thanks for your interest, and thanks for coming here.  There might be, did we run all the way out a couple minutes for questions, or if people want to do the transition?  OK, three minutes.  Clock's ticking.  Both of us will also be around in the exhibition hall.  Planet Labs has a booth there, as does Boundless.  So you can come up and ask questions there as well.  You stated you implemented the map projection.  Does that scale through to the scale bar, the distance, the measure tool?  So it uses the radius implied?  OK.  Yeah.  So I think all developers make design decisions that they later on know they would have made differently if they had to do again.  But a total rebuild sounds like a pretty drastic measure.  What pushed you guys over the edge?  Good question.  OpenLayers 2 was really showing its age.  It was built and released before IE7.  And on the same day, I think, is JQuery 1 or something.  And so it had a six or seven-year history with the same API, trying to still work, you know,  maintain backwards compatibility and work on all those old browsers.  And it really was just showing its age.  And it still provides good functionality for people that use it, but we wanted to be able to take advantage of new technologies and push things forward.
07_Tim_Schaub_720p_0_3515.png 07_Tim_Schaub_720p_3516_4871.png 07_Tim_Schaub_720p_4872_4955.png 07_Tim_Schaub_720p_4956_5135.png 07_Tim_Schaub_720p_5136_5267.png 07_Tim_Schaub_720p_5268_5891.png 07_Tim_Schaub_720p_5892_7907.png 07_Tim_Schaub_720p_7908_8099.png 07_Tim_Schaub_720p_8100_8447.png 07_Tim_Schaub_720p_8448_9095.png 07_Tim_Schaub_720p_9096_9743.png 07_Tim_Schaub_720p_9744_9815.png 07_Tim_Schaub_720p_9816_10079.png 07_Tim_Schaub_720p_10080_13823.png 07_Tim_Schaub_720p_13824_14255.png 07_Tim_Schaub_720p_14256_14663.png 07_Tim_Schaub_720p_14664_14975.png 07_Tim_Schaub_720p_14976_15683.png 07_Tim_Schaub_720p_15684_18023.png 07_Tim_Schaub_720p_18024_18791.png 07_Tim_Schaub_720p_18792_21203.png 07_Tim_Schaub_720p_21204_21311.png 07_Tim_Schaub_720p_21312_26843.png 07_Tim_Schaub_720p_26844_27779.png 07_Tim_Schaub_720p_27780_29171.png 07_Tim_Schaub_720p_29172_29291.png 07_Tim_Schaub_720p_29292_29579.png 07_Tim_Schaub_720p_29580_29987.png 07_Tim_Schaub_720p_29988_34079.png 07_Tim_Schaub_720p_34080_34451.png 07_Tim_Schaub_720p_34452_34679.png 07_Tim_Schaub_720p_34680_35267.png 07_Tim_Schaub_720p_35268_35615.png 07_Tim_Schaub_720p_35616_36047.png 07_Tim_Schaub_720p_36048_36695.png 07_Tim_Schaub_720p_36696_40751.png 07_Tim_Schaub_720p_40752_40919.png 07_Tim_Schaub_720p_40920_41135.png 07_Tim_Schaub_720p_41136_43343.png 07_Tim_Schaub_720p_43344_43414.png