Application Development With OpenLayers 3
CC Attribution - NonCommercial - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal 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
Schaub, Tim (OpenGeo)
OpenLayers 3 is a complete rewrite based on the latest in browser technology. This talk will focus on best practices for application development with OpenLayers 3. Covering simple maps in a page, integration with popular MV* frameworks, and native-wrapped mobile apps, we'll look at strategies for building mapping functionality into your applications. OpenLayers 3 aims to provide a high performance library with a wide breadth of functionality. Come learn about how it differs from OpenLayers 2, what makes it stand apart from other alternatives, and how you can best leverage its functionality.
 All right. Thanks everybody for coming. I appreciate the opportunity to talk here at the conference. I hope some people caught Eric's session earlier. We've got a bit of a triathlon or a quadrathlon of open layers talks going on. Eric spoke just before the break and give a really good introduction to open layers. I'm talking now and I'm going to basically just give you a lot of demos of what the library can do and show you what the API looks like. Following me, Tom will talk about some of the internals and give you a look under the hood of open layers and finally Cedric will follow up and discuss a little bit about how we launched this fundraising campaign and how that really helped us tackle this development effort. I previously had titled my talk, application development with open layers. It's now called working with open layers. We've reshuffled to accommodate having these four talks in a row. There's going to be some redundant material for those that were here at Eric's talk, but I hope it's not too much overlap. I work for Boundless Geo. This is formerly Open Geo and I just wanted to thank my employer for allowing me to participate in open layers development for the past six years. The open layers three development effort has really been a collaborative effort and I'll leave you to come to Cedric's talk to hear a little bit more about that. But it's mainly an effort that we fundraise for and we have developers participating from a number of companies, primarily camp to camp and Boundless, also terrestrious and we encourage developers from all different places. So I typically start open layers talks with a bit on the history of open layers and I find myself actually going pretty long and talking about how we've been around for seven years and I show graphs of how the project has grown and how we've brought on new contributors and added new features and I always find myself too short at the end on time for showing demos. So I wanted to sort of flip that around and say, okay, forget the history, let's dispense with that and go straight to the demos. And I don't mean that we're forgetting about our history or I don't think that's important. It actually is very significant that we have taken seven years of experience with working with open layers too and though we have thrown away all the code and started over, we've really learned a lot from that experience and embedded that knowledge in the development of this new library. So it's a bit of a risk, I think, to have an entirely demo driven talk but it seems like the connection is working out and kudos to the conference organizers for making that possible. The way I'll drive this is just by setting up a simple goal. So we'll look at an objective pretending you're sitting down to develop an application. This is something you might want to do, just put a simple map on a page. Then I'm going to show you what it looks like in open layers code. So this is your first introduction to the open layers 3 API. One thing to notice is we have this separation of a map and a view. A map is the primary object that you interact with when working with an open layers application. But it's very important to know about the view. This example shows the construction of a 2D view. And all the examples I'll show you use that same view. We've designed open layers to be able to, open layers 3, to be able to accommodate different views. So we will have a 3D view eventually. And a lot of the initial impetus for developing open layers 3 was to be able to provide 3D views, to be able to provide kind of limited 2 and a half D views, oblique views with extruded buildings or extruded terrain. But also potentially to deal with more complex 3D views. So in this example, I've given a view center. It's just an array of values, two values in this case, and a zoom. A view in general takes resolution and rotation values as well. And zoom is sort of a shorthand convenience for indicating which resolution, assuming the defaults of the default tile levels for a spherical indicator tile set. Then I construct a map and I point it to some viewport in the DOM. This map string is the identifier of a div element, let's say, in the DOM. And I give it a list of layers and I give it that view. And let's see what that looks like. So there we have your basic hello world from open layers. I can double click to zoom in here, drag to pan. I've got the expected sort of default controls, a zoom button here to do the same thing. So pretty basic, something you'd expect to accomplish with any mapping library. And that's how we do it in open layers 3. So moving on from there, the next thing you want is to use different sources. That example I showed you used an OSM data source. And that, I didn't show how it was created in that previous example, but this is how you would do that. You'd use a tile layer. And then you give that layer a source. So again, this is an example of the separation of concerns. Eric mentioned in the previous talk, and I think Tom will be giving a little bit more justification for in his talk. But my quick explanation of it is that a layer represents the view, how you want the data source to be rendered in the map. And the source represents how to fetch that data. So for, I'll be talking in a few examples about vector data. In these examples, it's using tiled raster data. So this source knows about the URL for those tiles, the URL scheme, and knows how to get them. And those tiles might come from different tile providers. It could come from local storage, or you could be using an entirely different protocol, not HTTP, to gather those tiles. But that's what the source does. You can use that same layer. So this is again using the tile layer, but in this case it's using a Bing Maps source. So the OSM source doesn't take any special configuration. This Bing Maps source requires that you provide a key. You go register for an API key for Bing Maps, and then you have to choose which style. And here's the aerial imagery layer with labels. So I'll show an example demonstrating a couple of different tile sources. In the first example, we saw OSM. Here's MapQuests rendering of OSM, Bings, Arials. You can use tiles from other providers. Stamen is a nice design company that provides nice tiles available for use. People probably know of MapBox. This is their geography class layer. This is a tiled JSON layer. So it uses this tile JSON protocol, kind of community protocol, to go out and fetch information about the metadata, the origin of the tiles and what the tile lattice is. And then it configures the source for you. So this is an interesting example. It's actually something that was a bit awkward in OpenLayers 2 to do. But these sources can be asynchronously configured. So in this case, the application developer doesn't know everything about the configuration of this tile grid or the tile matrix set. But you just specify how you can get that information. This source goes out, fetches the capabilities, and then it configures that source. And when it's available, it will be rendered in your map. So a lot going on behind the scenes there. But the important part for you is it's just easy to use. And of course, you can just use any general XYZ layers. So I want to play around with the map and show off a couple other features here. I already showed you this animated zooming when I click. I shouldn't be centering on my home over here. You guys help me find where we are now. One thing that you should be able to see as I zoom in, we have, pardon? Oh. OK. No, no. You want to do something. I'd rather just fly around the map and not really care where I end up, I guess. So I'm going to zoom in here, and because of the latency here, you can watch the tiles load. I've given talks and tried to demonstrate this before, and you have a very fast connection. Of course, you can't see that it's not as pronounced. But it does demonstrate something that I want to show you. So I've zoomed in here over Birmingham. And now I'm going to pan over to the side. And you can see, instead of going off the map and seeing what's beyond the edge of the world, you see these lower resolution tiles. And then, as I said, and wait, the tiles at my target resolution are loaded. So this provides a really nice effect, particularly with imagery. So I will push this map out a little bit and look at tiles that are already got loaded. But you can see as I pan over here, I get these lower resolution tiles that are shown sort of as a placeholder, and then the tiles at the appropriate resolution come in. And there's some really sophisticated tile handling going on behind the scenes here as well. There's a tile queue that determines the priority of the tiles that are fetched. And it is prioritized around the focus of my mouse. So as I zoom in to this location, tiles where my mouse is over on that side will be prioritized. So those will be loaded first, and then these other tiles come in after that. So some really nice tile handling. I hope I haven't stolen too much of Tom's thunder. It's largely kudos to him, but I think that's really great. And it provides a really nice experience for the user. I also am not going to demonstrate it in this example, but it's important to note as well that we're using these standard resolutions, standard zoom levels, for these XYZ tiles that are available here. OpenLayers 3 has a capability to fetch tiles at a resolution that is available on the server, and then display them at any resolution on the client. And that's sort of what you're seeing when you're seeing these lower resolution tiles displayed in the background. But you don't have to just restrict your map to the standard zoom levels that are available on your server. You can zoom to any resolution, and we will scale those raster data sources at the display that you've chosen on the client. So that's a little bit about layers and sources working with raster sources in particular. In the previous examples, I've talked about some of the interaction that you want to do and shown the controls that are on the map. You might want to provide more control to your user than we provide by default. So it's important to know about these two concepts, the interaction and control. In OpenLayers 3, interactions are things that have no visible representation or no representation in the DOM, and they literally just take browser events and compose them into higher level events or take some action and, let's say, move your map. So the drag interaction is just a very basic thing that takes browser events and composes them into a drag sequence, drag start, drag, drag end. And that can be used to do things like drag rotate the map. I'll show you that in a second. You've seen drag panning as I go through. There are also touch-related interactions. So touch zoom works on mobile devices, and then keyboard interactions that can make your map accessible. So you can allow the user to focus your map with a tab key or something and then use the keyboard to interact with the map. Controls, by contrast, are things that do have a representation in the DOM. So the zoom control provides those buttons where I was zooming in and out on the map. The scale line control, I'll show you in just a second, displays a scale line on your map, et cetera. So we're trying to maintain that distinction, and we're sort of testing this division in the architecture as we go. Maybe that we have, and our idea is to have interactions that are reusable so you can have a control that orchestrates a number of different interactions and turns them on and off and takes advantage, reuses these interactions in multiple controls. So this example has a couple non-default controls built in. The first example I showed you, I didn't touch controls when I created a map. In this example, I have extended the default controls with custom ones. So the one up here in the top is this scale line control. If you've got really good eyes and watch that, you should see as I zoom in and out, that scale line is animated with the resolution on the map. So it's showing the resolution at the center of the map at all times. If I zoom way out here, you should see that even as I change the center, the scale line changes because we're changing resolution as we go further north in that case. So that's the scale line control. I mentioned the zoom controls, those let you zoom in and out. Another control that we have included but that is not enabled by default is this geolocation control. So I'm going to see if I can locate ourselves here. And that gets our location and bounces in. I'm going to zoom in a bit further here, see if it was close. At least I saw Nottingham there. Anybody start recognizing campus? All right, so I can explore around here, hit locate again and see if it takes us down. It seems like it did find us accurately. So one thing I mentioned but haven't shown yet is this rotation, drag rotation interaction. So I'm going to Alt, Shift, Drag and I can rotate the map around the center. If you're looking carefully up at the far top right, you can see a little slider there that changes as I rotate the map around. And this is an HTML5 has added the range type input. So this is just an input that takes a value, a rotation value. And if you provide this range type, supported browsers will actually show you a little slider like this. And what I'm showing you here is this two-way binding between that input element and the map's map view rotation. So as I move this slider, the map rotates. As I rotate the map with the drag rotation interaction, the slider moves. And the library allows you to do that sort of two-way binding with things like input elements or other elements in your application. I'm already in full screen, but if you weren't in full screen, we provide a full screen control that expands your map to full screen. It gives a really nice immersive experience. And so those are some custom controls that you can add to and extend the defaults with. OK, next goal might be to work with vector data. All I've shown you so far is working with raster data with raster tiles. But big focus in OpenLayers 3 is working efficiently with vector layers. So previously, I was showing you tile layers and tile sources. In this example, it's a vector layer. We're using the base vector source. And here, I've just given it the URL path to my data. I told it this is going to be GeoJSON. We currently have support for GeoJSON, TopoJSON, GML, KML, GPX, vector data sources. Did I miss any? And we're expanding that list. So we plan to have feature parity with OpenLayers 2 in terms of the wide variety of formats supported there. And again, this source describes where the data is coming from. And then I tell it what format it's in, and the library will parse it for you, transform coordinates on the fly, and then render those. So looking at the vector layer example, here is just a countries data set. Is it a zoom in here? You can see labels coming in. One thing I want to mention about the vector rendering, this isn't, you can see it's pretty low quality data here. But one of the things that's worked into the vector render right now is this internal tiled rendering. So while you're animating, while I'm zooming in and out or doing this animated pan, I'm not actually going back to the data and re-rendering with every move. I'm using cached vector tiles from the previous render and using those to display while we're in this animated transition between resolutions. Maybe that we changed the strategy for this, we're experimenting with strategies that are going to be the most efficient for rendering large amounts of data and still providing really nice interactivity. So that was a pretty boring example. It didn't have much style, just white polygons with blue outlines. The next thing you might want to do is give your layers some style. So the style handling in OpenLayers 3 is pretty sophisticated. We intend on making it as convenient as possible. This example shows creating a style with two symbolizers. So this is a fill symbolizer and a stroke symbolizer. And if you give it polygon data, that will render your polygons with a fill and stroke. If you were to give that line data, it would just stroke them. And if you were to give it point data, that wouldn't render them at this point. I can talk to people afterwards about how to render point data. I don't have an example of that. So that was just saying render all my data in the same way. Maybe what you want to do is provide some sort of selector or some filter. I want to render this portion of my data in one way and the rest of my data in another way. So in CSS, these are selectors and then your style declaration. In OpenLayers, we have rules. So rules have a filter which represents your selector. In this case, I'm saying I just want the highways to be rendered with this symbolizer. So a three-pixel stroke for the highways. And then I could provide another set of symbolizers, I would say, and the rest of my data rendered them with a different set of symbolizers. So you can stack these rules in here and use these filter expressions to determine which features are selected in rendering your data. So I grabbed a simple, this is a New York streets data set and rendered these. I couldn't differentiate that. The data didn't have much variety in terms of attribute values, but there's a highway here running through Manhattan. And then these surface roads are shown in yellow. If you're looking closely, you can see that these roads are cased. So there are two symbolizers. There's like an eight-pixel wide stroke and then a six-pixel wide stroke over it. We intend to provide really robust control for Z-index support. Right now you can see I have this one example of a road going under, another example of a road going over. In some cases, the line cases don't overlay properly, but we want to give you that control so that you can say, I want the wider stroke to be underneath all. Let's say I have a lower Z-index value and the narrower stroke to have a higher Z-index value. So next goal would be to let users interact with data. This is an example of just using an overlay. There's not going to be any real data here. I've got to really speed up because I'm out of time. This is just an example showing Bootstrap popovers to add to your map. So I'm clicking on the map and I'm showing the location where I clicked in this popover. OpenLayers doesn't provide a pop-up class itself, but if you're using something like Bootstrap that does provide this jQuery plugin for popovers, you can use that. And what we do for you is anchor that at the location that you set. So as I rotate around here, I can see that pop-up stays in position. As I zoom in and animate, it moves smoothly with the map. That was just really interaction with my location. Really you want to typically interact with the data. In this case, I'm interacting with vector data that I have rendered on the client. This is sort of a nauseating example to look at, but that's intentional. The idea is to show you that our goal is to efficiently render far more features than you actually want to show people. So here are 20,000 points and they rendered quickly as you saw. And as I'm mousing over, I'm showing you the feature identifiers for those points. So you should get the impression that this is very responsive, one nice bit of functionality here too. My mouse is hovering over one, two, three, four, five, six, seven, eight features and then you get the feature identifiers for all of those back. So it's not just about the features on the top there. As I zoom in, you can see that I get nice animated zooming still with those 20,000 points and they're rendered efficiently. Final goal I'd like to show is just to allow editing. And this is very experimental work at this point or unstable work, I should say. Not necessarily unstable or experimental. But we have these two interactions that are in a branch right now being worked on, the select interaction and the modify interaction. And these interactions will be composed in an editing control. And I'll just show you some of the behavior that those might have. So I'm looking at a states layer rendered on the client here and I'm going to zoom in and show you what the select interaction looks like. So I'm clicking, I'm going to double click there, clicking to select the layer that's shown in a different style. As I hover close to the layer, you can see this point that should show up as I get close to vertices in this vector data. And then I can just drag those. So this is pretty basic vector editing functionality. You can see that I'm destroying the topology in my data when I'm doing this sort of editing. So what we want to be able to provide is the ability to maintain this topology without without you having loaded a topological data structure or providing a bunch of rules, but just by interpreting the user's interactions. So if I get rid of those edits, select a different feature, I'm going to shift click to select a number of other features. Now I have shared vertex editing going on. So as I drag around these points, I'm changing the vertices of the adjacent polygons and maintaining the topology of my data there. So I decide I want to reshape Colorado here. It shouldn't be as big as it is. I like these mountains down here. And I can efficiently have this sort of shared vertex editing with just some simple user interactions. I didn't have to specify my topology rules. I just let the user select a number of features and move the vertices together. So the final goal I hope that I've motivated you to engage in is to get involved in the library. We encourage people to become contributors. Please find the code on GitHub. I saw some people make a mistake in a sprint earlier. We're working in the OL3 repository under the Open Layers organization. And then there's a mailing list. And soon we will have an updated website at this ol3js.org location. And if you're interested in playing around with these examples, you can see this whole slide. The slide's up at this URL at tshub.net working with OL3. And thanks, sorry for going a little bit over. I hope I've got time for a few questions.
 All right. Thanks everybody for coming.  I appreciate the opportunity to talk here at the conference.  I hope some people caught Eric's session earlier.  We've got a bit of a triathlon or a quadrathlon of open layers talks going on.  Eric spoke just before the break and give a really good introduction to open layers.  I'm talking now and I'm going to basically just give you  a lot of demos of what the library can do and show you what the API looks like.  Following me, Tom will talk about some of the internals and give you  a look under the hood of open layers and finally Cedric will follow up and discuss  a little bit about how we launched this fundraising campaign and how that really  helped us tackle this development effort.  I previously had titled my talk,  application development with open layers.  It's now called working with open layers.  We've reshuffled to accommodate having these four talks in a row.  There's going to be some redundant material for those that were here at Eric's talk,  but I hope it's not too much overlap.  I work for Boundless Geo.  This is formerly Open Geo and I just wanted to thank my employer for  allowing me to participate in open layers development for the past six years.  The open layers three development effort has really been a collaborative effort and I'll  leave you to come to Cedric's talk to hear a little bit more about that.  But it's mainly an effort that we fundraise for and we have developers participating from  a number of companies, primarily camp to camp and Boundless,  also terrestrious and we encourage developers from all different places.  So I typically start open layers talks with a bit on the history of open layers and I find  myself actually going pretty long and talking about how we've been around for seven years  and I show graphs of how the project has grown and how we've brought on new contributors  and added new features and I always find myself too short at the end on time for showing demos.  So I wanted to sort of flip that around and say, okay, forget the history,  let's dispense with that and go straight to the demos.  And I don't mean that we're forgetting about our history or I don't think that's important.  It actually is very significant that we have taken seven years of experience with working  with open layers too and though we have thrown away all the code and started over,  we've really learned a lot from that experience and embedded that knowledge  in the development of this new library.  So it's a bit of a risk, I think, to have an entirely demo driven talk but it seems  like the connection is working out and kudos to the conference organizers for making that possible.  The way I'll drive this is just by setting up a simple goal.  So we'll look at an objective pretending you're sitting down to develop an application.  This is something you might want to do, just put a simple map on a page.  Then I'm going to show you what it looks like in open layers code.  So this is your first introduction to the open layers 3 API.  One thing to notice is we have this separation of a map and a view.  A map is the primary object that you interact with when working with an open layers application.  But it's very important to know about the view.  This example shows the construction of a 2D view.  And all the examples I'll show you use that same view.  We've designed open layers to be able to, open layers 3,  to be able to accommodate different views.  So we will have a 3D view eventually.  And a lot of the initial impetus for developing open layers 3 was to be able to provide 3D views,  to be able to provide kind of limited 2 and a half D views,  oblique views with extruded buildings or extruded terrain.  But also potentially to deal with more complex 3D views.  So in this example, I've given a view center.  It's just an array of values, two values in this case, and a zoom.  A view in general takes resolution and rotation values as well.  And zoom is sort of a shorthand convenience for indicating which resolution,  assuming the defaults of the default tile levels for a spherical indicator tile set.  Then I construct a map and I point it to some viewport in the DOM.  This map string is the identifier of a div element, let's say, in the DOM.  And I give it a list of layers and I give it that view.  And let's see what that looks like.  So there we have your basic hello world from open layers.  I can double click to zoom in here, drag to pan.  I've got the expected sort of default controls, a zoom button here to do the same thing.  So pretty basic, something you'd expect to accomplish with any mapping library.  And that's how we do it in open layers 3.  So moving on from there, the next thing you want is to use different sources.  That example I showed you used an OSM data source.  And that, I didn't show how it was created in that previous example, but this is how you would do that.  You'd use a tile layer.  And then you give that layer a source.  So again, this is an example of the separation of concerns.  Eric mentioned in the previous talk, and I think Tom will be giving a little bit more justification for in his talk.  But my quick explanation of it is that a layer represents the view, how you want the data source to be rendered in the map.  And the source represents how to fetch that data.  So for, I'll be talking in a few examples about vector data.  In these examples, it's using tiled raster data.  So this source knows about the URL for those tiles, the URL scheme, and knows how to get them.  And those tiles might come from different tile providers.  It could come from local storage, or you could be using an entirely different protocol, not HTTP, to gather those tiles.  But that's what the source does.  You can use that same layer.  So this is again using the tile layer, but in this case it's using a Bing Maps source.  So the OSM source doesn't take any special configuration.  This Bing Maps source requires that you provide a key.  You go register for an API key for Bing Maps, and then you have to choose which style.  And here's the aerial imagery layer with labels.  So I'll show an example demonstrating a couple of different tile sources.  In the first example, we saw OSM.  Here's MapQuests rendering of OSM, Bings, Arials.  You can use tiles from other providers.  Stamen is a nice design company that provides nice tiles available for use.  People probably know of MapBox.  This is their geography class layer.  This is a tiled JSON layer.  So it uses this tile JSON protocol, kind of community protocol, to go out and fetch information  about the metadata, the origin of the tiles and what the tile lattice is.  And then it configures the source for you.  So this is an interesting example.  It's actually something that was a bit awkward in OpenLayers 2 to do.  But these sources can be asynchronously configured.  So in this case, the application developer doesn't know everything about the configuration  of this tile grid or the tile matrix set.  But you just specify how you can get that information.  This source goes out, fetches the capabilities, and then it configures that source.  And when it's available, it will be rendered in your map.  So a lot going on behind the scenes there.  But the important part for you is it's just easy to use.  And of course, you can just use any general XYZ layers.  So I want to play around with the map and show off a couple other features here.  I already showed you this animated zooming when I click.  I shouldn't be centering on my home over here.  You guys help me find where we are now.  One thing that you should be able to see as I zoom in, we have, pardon?  Oh.  OK.  No, no.  You want to do something.  I'd rather just fly around the map and not really care where I end up, I guess.  So I'm going to zoom in here, and because of the latency here, you can watch the tiles  load.  I've given talks and tried to demonstrate this before, and you have a very fast connection.  Of course, you can't see that it's not as pronounced.  But it does demonstrate something that I want to show you.  So I've zoomed in here over Birmingham.  And now I'm going to pan over to the side.  And you can see, instead of going off the map and seeing what's beyond the edge of the  world, you see these lower resolution tiles.  And then, as I said, and wait, the tiles at my target resolution are loaded.  So this provides a really nice effect, particularly with imagery.  So I will push this map out a little bit and look at tiles that are already got loaded.  But you can see as I pan over here, I get these lower resolution tiles that are shown  sort of as a placeholder, and then the tiles at the appropriate resolution come in.  And there's some really sophisticated tile handling going on behind the scenes here  as well.  There's a tile queue that determines the priority of the tiles that are fetched.  And it is prioritized around the focus of my mouse.  So as I zoom in to this location, tiles where my mouse is over on that side will be prioritized.  So those will be loaded first, and then these other tiles come in after that.  So some really nice tile handling.  I hope I haven't stolen too much of Tom's thunder.  It's largely kudos to him, but I think that's really great.  And it provides a really nice experience for the user.  I also am not going to demonstrate it in this example, but it's important to note as well  that we're using these standard resolutions, standard zoom levels, for these XYZ tiles  that are available here.  OpenLayers 3 has a capability to fetch tiles at a resolution that is available on the server,  and then display them at any resolution on the client.  And that's sort of what you're seeing when you're seeing these lower resolution tiles  displayed in the background.  But you don't have to just restrict your map to the standard zoom levels that are available  on your server.  You can zoom to any resolution, and we will scale those raster data sources at the display  that you've chosen on the client.  So that's a little bit about layers and sources working with raster sources in particular.  In the previous examples, I've talked about some of the interaction that you want to do  and shown the controls that are on the map.  You might want to provide more control to your user than we provide by default.  So it's important to know about these two concepts, the interaction and control.  In OpenLayers 3, interactions are things that have no visible representation or no representation  in the DOM, and they literally just take browser events and compose them into higher level events  or take some action and, let's say, move your map.  So the drag interaction is just a very basic thing that takes browser events and composes  them into a drag sequence, drag start, drag, drag end.  And that can be used to do things like drag rotate the map.  I'll show you that in a second.  You've seen drag panning as I go through.  There are also touch-related interactions.  So touch zoom works on mobile devices, and then keyboard interactions that can make your  map accessible.  So you can allow the user to focus your map with a tab key or something and then use the  keyboard to interact with the map.  Controls, by contrast, are things that do have a representation in the DOM.  So the zoom control provides those buttons where I was zooming in and out on the map.  The scale line control, I'll show you in just a second, displays a scale line on your map,  et cetera.  So we're trying to maintain that distinction, and we're sort of testing this division in  the architecture as we go.  Maybe that we have, and our idea is to have interactions that are reusable so you can  have a control that orchestrates a number of different interactions and turns them on  and off and takes advantage, reuses these interactions in multiple controls.  So this example has a couple non-default controls built in.  The first example I showed you, I didn't touch controls when I created a map.  In this example, I have extended the default controls with custom ones.  So the one up here in the top is this scale line control.  If you've got really good eyes and watch that, you should see as I zoom in and out, that  scale line is animated with the resolution on the map.  So it's showing the resolution at the center of the map at all times.  If I zoom way out here, you should see that even as I change the center, the scale line  changes because we're changing resolution as we go further north in that case.  So that's the scale line control.  I mentioned the zoom controls, those let you zoom in and out.  Another control that we have included but that is not enabled by default is this geolocation  control.  So I'm going to see if I can locate ourselves here.  And that gets our location and bounces in.  I'm going to zoom in a bit further here, see if it was close.  At least I saw Nottingham there.  Anybody start recognizing campus?  All right, so I can explore around here, hit locate again and see if it takes us down.  It seems like it did find us accurately.  So one thing I mentioned but haven't shown yet is this rotation, drag rotation interaction.  So I'm going to Alt, Shift, Drag and I can rotate the map around the center.  If you're looking carefully up at the far top right, you can see a little slider there  that changes as I rotate the map around.  And this is an HTML5 has added the range type input.  So this is just an input that takes a value, a rotation value.  And if you provide this range type, supported browsers will actually show you a little slider  like this.  And what I'm showing you here is this two-way binding between that input element and the  map's map view rotation.  So as I move this slider, the map rotates.  As I rotate the map with the drag rotation interaction, the slider moves.  And the library allows you to do that sort of two-way binding with things like input  elements or other elements in your application.  I'm already in full screen, but if you weren't in full screen, we provide a full screen control  that expands your map to full screen.  It gives a really nice immersive experience.  And so those are some custom controls that you can add to and extend the defaults with.  OK, next goal might be to work with vector data.  All I've shown you so far is working with raster data with raster tiles.  But big focus in OpenLayers 3 is working efficiently with vector layers.  So previously, I was showing you tile layers and tile sources.  In this example, it's a vector layer.  We're using the base vector source.  And here, I've just given it the URL path to my data.  I told it this is going to be GeoJSON.  We currently have support for GeoJSON, TopoJSON, GML, KML, GPX, vector data sources.  Did I miss any?  And we're expanding that list.  So we plan to have feature parity with OpenLayers 2 in terms of the wide variety of formats  supported there.  And again, this source describes where the data is coming from.  And then I tell it what format it's in, and the library will parse it for you, transform  coordinates on the fly, and then render those.  So looking at the vector layer example, here is just a countries data set.  Is it a zoom in here?  You can see labels coming in.  One thing I want to mention about the vector rendering, this isn't, you can see it's pretty  low quality data here.  But one of the things that's worked into the vector render right now is this internal  tiled rendering.  So while you're animating, while I'm zooming in and out or doing this animated pan, I'm  not actually going back to the data and re-rendering with every move.  I'm using cached vector tiles from the previous render and using those to display while we're  in this animated transition between resolutions.  Maybe that we changed the strategy for this, we're experimenting with strategies that are  going to be the most efficient for rendering large amounts of data and still providing  really nice interactivity.  So that was a pretty boring example.  It didn't have much style, just white polygons with blue outlines.  The next thing you might want to do is give your layers some style.  So the style handling in OpenLayers 3 is pretty sophisticated.  We intend on making it as convenient as possible.  This example shows creating a style with two symbolizers.  So this is a fill symbolizer and a stroke symbolizer.  And if you give it polygon data, that will render your polygons with a fill and stroke.  If you were to give that line data, it would just stroke them.  And if you were to give it point data, that wouldn't render them at this point.  I can talk to people afterwards about how to render point data.  I don't have an example of that.  So that was just saying render all my data in the same way.  Maybe what you want to do is provide some sort of selector or some filter.  I want to render this portion of my data in one way and the rest of my data in another  way.  So in CSS, these are selectors and then your style declaration.  In OpenLayers, we have rules.  So rules have a filter which represents your selector.  In this case, I'm saying I just want the highways to be rendered with this symbolizer.  So a three-pixel stroke for the highways.  And then I could provide another set of symbolizers, I would say, and the rest of my data rendered  them with a different set of symbolizers.  So you can stack these rules in here and use these filter expressions to determine which  features are selected in rendering your data.  So I grabbed a simple, this is a New York streets data set and rendered these.  I couldn't differentiate that.  The data didn't have much variety in terms of attribute values, but there's a highway  here running through Manhattan.  And then these surface roads are shown in yellow.  If you're looking closely, you can see that these roads are cased.  So there are two symbolizers.  There's like an eight-pixel wide stroke and then a six-pixel wide stroke over it.  We intend to provide really robust control for Z-index support.  Right now you can see I have this one example of a road going under, another example of  a road going over.  In some cases, the line cases don't overlay properly, but we want to give you that control  so that you can say, I want the wider stroke to be underneath all.  Let's say I have a lower Z-index value and the narrower stroke to have a higher Z-index  value.  So next goal would be to let users interact with data.  This is an example of just using an overlay.  There's not going to be any real data here.  I've got to really speed up because I'm out of time.  This is just an example showing Bootstrap popovers to add to your map.  So I'm clicking on the map and I'm showing the location where I clicked in this popover.  OpenLayers doesn't provide a pop-up class itself, but if you're using something like  Bootstrap that does provide this jQuery plugin for popovers, you can use that.  And what we do for you is anchor that at the location that you set.  So as I rotate around here, I can see that pop-up stays in position.  As I zoom in and animate, it moves smoothly with the map.  That was just really interaction with my location.  Really you want to typically interact with the data.  In this case, I'm interacting with vector data that I have rendered on the client.  This is sort of a nauseating example to look at, but that's intentional.  The idea is to show you that our goal is to efficiently render far more features than  you actually want to show people.  So here are 20,000 points and they rendered quickly as you saw.  And as I'm mousing over, I'm showing you the feature identifiers for those points.  So you should get the impression that this is very responsive, one nice bit of functionality  here too.  My mouse is hovering over one, two, three, four, five, six, seven, eight features and  then you get the feature identifiers for all of those back.  So it's not just about the features on the top there.  As I zoom in, you can see that I get nice animated zooming still with those 20,000 points  and they're rendered efficiently.  Final goal I'd like to show is just to allow editing.  And this is very experimental work at this point or unstable work, I should say.  Not necessarily unstable or experimental.  But we have these two interactions that are in a branch right now being worked on, the  select interaction and the modify interaction.  And these interactions will be composed in an editing control.  And I'll just show you some of the behavior that those might have.  So I'm looking at a states layer rendered on the client here and I'm going to zoom in  and show you what the select interaction looks like.  So I'm clicking, I'm going to double click there, clicking to select the layer that's  shown in a different style.  As I hover close to the layer, you can see this point that should show up as I get close  to vertices in this vector data.  And then I can just drag those.  So this is pretty basic vector editing functionality.  You can see that I'm destroying the topology in my data when I'm doing this sort of editing.  So what we want to be able to provide is the ability to maintain this topology without  without you having loaded a topological data structure or providing a bunch of rules, but  just by interpreting the user's interactions.  So if I get rid of those edits, select a different feature, I'm going to shift click to select  a number of other features.  Now I have shared vertex editing going on.  So as I drag around these points, I'm changing the vertices of the adjacent polygons and  maintaining the topology of my data there.  So I decide I want to reshape Colorado here.  It shouldn't be as big as it is.  I like these mountains down here.  And I can efficiently have this sort of shared vertex editing with just some simple user  interactions.  I didn't have to specify my topology rules.  I just let the user select a number of features and move the vertices together.  So the final goal I hope that I've motivated you to engage in is to get involved in the  library.  We encourage people to become contributors.  Please find the code on GitHub.  I saw some people make a mistake in a sprint earlier.  We're working in the OL3 repository under the Open Layers organization.  And then there's a mailing list.  And soon we will have an updated website at this ol3js.org location.  And if you're interested in playing around with these examples, you can see this whole  slide.  The slide's up at this URL at tshub.net working with OL3.  And thanks, sorry for going a little bit over.  I hope I've got time for a few questions.
Application_Development_With_OpenLayers_3__1080p__0_491.png Application_Development_With_OpenLayers_3__1080p__492_599.png Application_Development_With_OpenLayers_3__1080p__600_707.png Application_Development_With_OpenLayers_3__1080p__708_815.png Application_Development_With_OpenLayers_3__1080p__816_947.png Application_Development_With_OpenLayers_3__1080p__948_1079.png Application_Development_With_OpenLayers_3__1080p__1080_1235.png Application_Development_With_OpenLayers_3__1080p__1236_1451.png Application_Development_With_OpenLayers_3__1080p__1452_1511.png Application_Development_With_OpenLayers_3__1080p__1512_3215.png Application_Development_With_OpenLayers_3__1080p__3216_6743.png Application_Development_With_OpenLayers_3__1080p__6744_9935.png Application_Development_With_OpenLayers_3__1080p__9936_9983.png Application_Development_With_OpenLayers_3__1080p__9984_10055.png Application_Development_With_OpenLayers_3__1080p__10056_10331.png Application_Development_With_OpenLayers_3__1080p__10332_11675.png Application_Development_With_OpenLayers_3__1080p__11676_11879.png Application_Development_With_OpenLayers_3__1080p__11880_13535.png Application_Development_With_OpenLayers_3__1080p__13536_14411.png Application_Development_With_OpenLayers_3__1080p__14412_18791.png Application_Development_With_OpenLayers_3__1080p__18792_19835.png Application_Development_With_OpenLayers_3__1080p__19836_19883.png Application_Development_With_OpenLayers_3__1080p__19884_20747.png Application_Development_With_OpenLayers_3__1080p__20748_21155.png Application_Development_With_OpenLayers_3__1080p__21156_21251.png Application_Development_With_OpenLayers_3__1080p__21252_22583.png Application_Development_With_OpenLayers_3__1080p__22584_22667.png Application_Development_With_OpenLayers_3__1080p__22668_25799.png Application_Development_With_OpenLayers_3__1080p__25800_26735.png Application_Development_With_OpenLayers_3__1080p__26736_28103.png Application_Development_With_OpenLayers_3__1080p__28104_28859.png Application_Development_With_OpenLayers_3__1080p__28860_31871.png Application_Development_With_OpenLayers_3__1080p__31872_36527.png Application_Development_With_OpenLayers_3__1080p__36528_37307.png Application_Development_With_OpenLayers_3__1080p__37308_37655.png Application_Development_With_OpenLayers_3__1080p__37656_37833.png