Application Development With OpenLayers 3

Video thumbnail (Frame 0) Video thumbnail (Frame 1504) Video thumbnail (Frame 2574) Video thumbnail (Frame 3124) Video thumbnail (Frame 4104) Video thumbnail (Frame 6721) Video thumbnail (Frame 7319) Video thumbnail (Frame 9124) Video thumbnail (Frame 9779) Video thumbnail (Frame 10321) Video thumbnail (Frame 11674) Video thumbnail (Frame 13066) Video thumbnail (Frame 13629) Video thumbnail (Frame 14136) Video thumbnail (Frame 15006) Video thumbnail (Frame 15991) Video thumbnail (Frame 18990) Video thumbnail (Frame 19554) Video thumbnail (Frame 20269) Video thumbnail (Frame 20821) Video thumbnail (Frame 21599) Video thumbnail (Frame 22164) Video thumbnail (Frame 22659) Video thumbnail (Frame 23174) Video thumbnail (Frame 23831) Video thumbnail (Frame 25214) Video thumbnail (Frame 25776) Video thumbnail (Frame 26534) Video thumbnail (Frame 27716) Video thumbnail (Frame 28859) Video thumbnail (Frame 30394) Video thumbnail (Frame 31369) Video thumbnail (Frame 31974) Video thumbnail (Frame 32821) Video thumbnail (Frame 33739) Video thumbnail (Frame 34281) Video thumbnail (Frame 36491) Video thumbnail (Frame 37136)
Video in TIB AV-Portal: Application Development With OpenLayers 3

Formal Metadata

Application Development With OpenLayers 3
Title of Series
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 license.
Release Date
Production Place

Content Metadata

Subject Area
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.
Collaborationism Lecture/Conference Software developer Website Control flow Bit Open set Cartesian coordinate system Turtle graphics
Computer animation Chemical equation Software developer Coma Berenices Open set Geometry Number
Computer animation Demo (music) Multiplication sign Bit Quicksort Product (business)
Web page Mapping Computer animation Software developer Web page Self-organization Bit Whiteboard Cartesian coordinate system
Point (geometry) Building Mapping View (database) Image resolution Open set Code Variance Energy level Rotation Default (computer science) Zoom lens Matching (graph theory) Mapping View (database) Tesselation Constructor (object-oriented programming) Electronic mailing list Limit (category theory) Cartesian coordinate system Flow separation Computer animation Doubling the cube Personal digital assistant Whiteboard Quicksort Object (grammar)
Default (computer science) Zoom lens Game controller Mapping Computer animation Drag (physics) Mapping View (database) Maxima and minima Convex hull Variance Library (computing)
Source code Tesselation Multiplication sign View (database) Data storage device Numbering scheme Flow separation Type theory Computer animation Different (Kate Ryan album) Internet service provider Order (biology) Different (Kate Ryan album) Communications protocol
Source code Key (cryptography) Mapping Tesselation Discrete element method Special unitary group Arm Variance Computer animation Personal digital assistant Different (Kate Ryan album) Configuration space Summierbarkeit
Metropolitan area network Information Tesselation Cartesian coordinate system Metadata Demoscene Process (computing) Computer animation Lattice (group) Personal digital assistant Internet service provider Statement (computer science) Configuration space Cuboid Whiteboard Communications protocol Social class Scalable Coherent Interface
Execution unit Mapping Tesselation Structural load Image resolution Zoom lens Maxima and minima Field (computer science) Discrete element method Mach's principle Computer animation Energy level Addressing mode Simulation
Service (economics) Tesselation Structural load Image resolution Free variables and bound variables Special unitary group Computer icon Demoscene
Focus (optics) Roundness (object) Computer animation Tesselation Zoom lens Summierbarkeit Physical system
Source code Server (computing) Standard deviation Mapping Tesselation Image resolution Zoom lens Physical law Client (computing) Variance Computer animation Ring (mathematics) Electronic visual display Energy level
Keyboard shortcut Game controller Group action Drag (physics) Direction (geometry) Zoom lens Event horizon Rotation Number Force Meeting/Interview Different (Kate Ryan album) Touch typing Energy level Representation (politics) Electronic visual display Software testing Contrast (vision) HTTP cookie Default (computer science) Zoom lens Multiplication Focus (optics) Drag (physics) Scaling (geometry) Mapping Keyboard shortcut Interactive television Division (mathematics) Control flow Sequence Position operator Computer animation Touch typing Personal area network
Email Metropolitan area network Game controller Scaling (geometry) Matching (graph theory) Image resolution Multiplication sign Zoom lens Mathematics Arithmetic mean Lecture/Conference Personal digital assistant Physical law Summierbarkeit
Game controller Multiplication sign Artificial neural network Quantum Arm Variance Number
Rotation Force Computer animation Drag (physics) Maxima and minima Summierbarkeit Conditional-access module Emulation Physical system Hypothesis
Rotation Metropolitan area network Mathematics Mapping Meeting/Interview Uniform resource name Range (statistics) output Right angle Summierbarkeit Emulation
Matching (graph theory) Mapping Drag (physics) Range (statistics) Maxima and minima output Selectivity (electronic) Web browser Emulation Element (mathematics) Row (database)
Group action Touchscreen Multiplication sign Maxima and minima Coma Berenices Cartesian coordinate system Rothe-Verfahren Element (mathematics) Cache (computing) output E-learning Quicksort Library (computing) Wide area network
Metropolitan area network Position operator Zoom lens Touchscreen Computer animation Vector space E-learning Personal area network Control flow Extension (kinesiology) Window
Source code Computer file Parity (mathematics) Variety (linguistics) Multiplication sign Parsing Variance Uniform resource locator Computer animation Vector space Term (mathematics) Vector space Position operator
CAN bus Execution unit Information management Uniform resource name RAID Reading (process)
Pointer (computer programming) Ring (mathematics) Tesselation Uniform resource name Ranking Special unitary group Arm Value-added network
Metropolitan area network Source code Group action Image resolution Parsing Variance Uniform resource locator Mathematics Computer animation Strategy game Uniform resource name Vector space Whiteboard Drum memory
Point (geometry) Rule of inference Digital filter Pixel Service (economics) Clique-width Civil engineering Polygon Expression Set (mathematics) Line (geometry) Rule of inference Declarative programming Variance Computer animation Different (Kate Ryan album) Vector space Quicksort Genetic programming Genetic programming
Pixel Service (economics) Variety (linguistics) View (database) Maxima and minima Counting Arm Subject indexing Category of being Computer animation Personal digital assistant Term (mathematics) Genetic programming Wide area network
Information management Mapping Overlay-Netz Mapping Multiplication sign Interactive television Element (mathematics) Variance Uniform resource locator Computer animation Social class Plug-in (computing) Social class
Metropolitan area network Information management Mapping Overlay-Netz Computer animation Personal digital assistant Point (geometry) Interactive television Social class Element (mathematics) Position operator Variance
Point (geometry) Group action Functional (mathematics) Dependent and independent variables Identifiability Computer animation Mass
Point (geometry) Metropolitan area network Game controller Group action Computer animation Function (mathematics) Point (geometry) Vector space Interactive television Iteration Branch (computer science) Variance
Information management Group action Twin prime State of matter Uniform resource name Computer worm Game theory
Point (geometry) Group action Shift operator Functional (mathematics) Building Drag (physics) Sine Interactive television Distance Special unitary group Rule of inference Number Different (Kate Ryan album) Uniform resource name Network topology Video game Data structure Drum memory
Slide rule Uniform resource locator Computer animation Code Repository (publishing) Multiplication sign Self-organization Website Spacetime Library (computing)
the BigSim referred coming to pursue the updated the talk here at a conference held some people caught their session earlier we get a bit of Chapel at 1 of the leaders talks going on their spoke just before the break and it really introduction open layers and talking now and the end we are basically just delighted that most of what collaborative usually with a gala site and following the tumble will talk about 2 million turtles and the look under the of open layers and finally set ball up and discuss will be about how we launched as fund raising campaigns and and that really helped the tackles development effort so appeasing entitlement talk application development would open layers of work with the players with a reshuffled to accommodate and having these for talks a wrote this can be some redundant material for those who who were here at the start of the two some by
work fur boundless Geo this is fully open Geoghan and that is when the take my employer for allowing needed his openly Isabel and for the past 6 years or so and the Open layers 3 velvet
effort has really been a collaborative African only that you become the said extracted here the but more about that but it's mainly and it said that we would fundraise for and we have developers but protesting from a number of companies are really can't to camp and balanced and also terrestris and we are interested offers from from other places so I'd
typically start that with talks with a bit on the history of layers and find myself actually going pretty long and talking about how we been around for a seven year as an amateur Graps about a product is growing however and brought under could treatise had the peaches and always find itself to shorter than non time per showing demos when the sort of food that around and say oh they
forget the history was to spend so that they and go straight to the
Devils and that doing that were forgetting history of that board that actually is very significant that we have taken a 7 year 's of experience with the work with the players to and and though we have thrown away all code and start over we really learned a lot from the experience and that of that knowledge that in the development of this new library so that it's a bit arithmetic havoc entirely downloaded and the talk but it seemed like pickaxes work out and could to accountants organisers for making possible and the way of dry
this is just by setting up a simple gold so look at an objective Britannia sitting under the belt application this of the mountains just with a simple not page that initially what looks
like an open layers codes of this is a differs introduction to the open layers of 3 8 eye 1 thing to say is that we have a separation of the match and a view and that is the primary object to attract with when working with the players applications and but airport to know about the view this example shows the construction of 2 new non all the examples so you use the same view redesigned of layers to be able to publish 3 to build accommodate different views so we will have a through the potentially and a lot of the initial that if disparate for developing a Labour's 3 was to be able to provide for used it would provide a can limited to half the views of the views with extruded buildings Oxted terrain crime but also the potentially the with more complex 3 so this example of given the view at Santa just array of values values and case and is now view general takes resolution and rotation values as well as in the sort of a sure and convenience for indicating that which resolution assuming the fault of the of the default that tile levels for your committed tile said the construct a map and a point to some new board in the dark on this now straying is that via the other developments in in the dollar and a given list of players and a given that the limits to it that looks like so there we have the
basic Hello world from some of players like in double click
assuming year drag to
pay and of that the expected default
controls zoom but near to
do the same thing so pretty basic something you'd expect published with with a mapping library and so do the players so
moving on to the next anyone is to use different sauces legs but should be used in the West and and data sauce and and
that and and show how was created in the previous example of this is that you do that you use a etiolated and a new give that layer sauce so again this is an example of the separation concerns the mentioned in the previous tightening time will be giving the order to the kitchen for a new start but my quick explanation of is a layer represents the view how this tell you want that the data sauce to be rendered in that in the sauce represents how to fetch that data so for all the talking for them if you examples about that today that in these examples its using a child rostra data so this sauce knows about the your health of tiles the oral scheme has had a get them in the styles might come from a different type providers to come from local storage or you could be using the for protocol not defeating Qatada's tiles and that of the sauce use that
same layers of this again using the Thailand but in this case it using a being maps sauce so that the licence Auster's and taking a special configuration this thing map sauce requires you provide a key Ugo register from for being maps and then you choose which style and ideas that will and in injury later with labels social
example demonstrating couple different tile sauces in the 1st example we saw of them here is
now Questran rivers and being sales
and you can use tiles from other providers statement said that the design company that provides tiles available for for use by people
from a note not box is the job of the class later this is a tiled Jason later so uses the style Jason protocol computing the protocol to go out and catch information about the Metadata the origin of the tales of the trial lattices and configures the sauce for you so this inching example Texas and was a bit awkward and openly do but these sauces can be asynchronously configured in this case the application over does know everything about the at the configuration of this style algorithms commented that somebody to specify taking get that information the sauce goes out that is a capabilities and configures with the sauce and Woods available to be rendered in your mouth so or what goes on behind the scenes there but the board API use it is easy to use
and accosted in this use any general ex Ileana's sewn player the map and enjoy a couple the features here showed this animated zooming would likely should be century and over here because of the fund where we are now more than the usual a city that has been made and we have to find up to look the at other just the player and the player and the player so it was in in the year ended because of the way the here you can you can watch the tiles load given talks and and demonstrated before very fast collection of cost concede that them and it's not as announced but it does demonstrate something that would show you zoomed a year over bring Birmingham and the only can over
to the side and I could see that instead of going off the map seeing that would be on the edge of the world and you see these lower resolution tiles and then as a city in which the at the tiles my Tory resolution are loaded so
this provides a really nice at facts and particular with with
imagery so will push to snap
loaded look tiles the party of lower loaded on the CIA icon over
here and it is low resolution houses shown services placeholder and and the and houses the appropriate resolution committed and this really sophisticated tile handling going on behind the scenes here as well but there is a tile Cuba
determines the and the priority
of the and the tiles the fetched and it is prioritise round the focus of my now so aside zoom
in 2 dislocation tiles where my over the side of the prioritise was the 1st in these tiles commended after that system really nice tile handling of stolen to comes under its large accused and that's really great and it provides a nice experience for the user by also and in another
demonstrated in this example but it's important to note as well that were using the standard resolution the standard in levels for these ex the tiles available here but openly 3 has a capability due to textiles at a resolution that is available on the server and and displayed in any resolution the client and the sort of or your seem using these law resolution tiles display in the background but you don't have to just restricted map to the standard zoom levels at are available the under server you can into any resolution and we will scale that that those rested sauces at the display that you chosen on the climb to the about the
players and sauces working with Rasta sauces in in particular in the
breeze examples talked about some of the and the attractions of the wanted to win and showed the controls the on the map and the might want to provide more control to user we provide by default Susan vaunted about these 2 concept the interactions in control it layers 3 attractions things that have no visible representational representation in the dollar and the Middle Ages take out browser events and compose and into higher level events for them take some action and the City movie about so the drag interactions is just the basic takes browser events compose them into a drag the drag sequence start dragged again and that can be used to do things like dragged rotate some say that in the 2nd using drag pending Zegota there is also the also touch related attractions so touches and works on a mobile devices and then key board interactions that can make your mouth accessible city allow the user to focus Ramat with attack you should begin and used the key keyboard to interact with that controls by contrast things that do have a representation in the down so the zoom controlled provides those buttons resuming out on the map at the scaling control should be just a 2nd displays scale and about it said a so that were found in in taking that the distinction and were and the testing this division knocked actually we go but maybe that we have and the idea is to have actions that a reusable seeking have controlled that August reason number of different directions and turns among off and the takes advantage reuses attractions in multiple controls so this example has
a couple of non default and controls built in play in the 1st examples of getting catch controls decreed that and this example a have extended the ball controls with customers so the 1 here the tie is the scale in control and that guerrilla eyes and watch that and you should see it as a human not
that that scale and that is inundated with the
resolution of the matter so showing the resolution that the centre of the match at all times by the zoom way out here you should see
but it is a change the Santa the at the the scale changes because work and were changing resolution as we go further north than the case to stay on control and mentioned the zoom controls that you soon in
out another at the control we have included the time but that is not enable but I thought this is geology geolocation control some by to locate ourselves here and there that gets location and
bounces a in numbers in the
further here said it was close this
summer and there is direct
messing campus that citing
that explored here but look
again and should take systems and did find this accurately so 1 day mentioned but have enjoyed yet Thesis rotation drag rotation attractions some going to all just
dragging can rotate the map around the Santa if you
looking care fully with far top right you can see a little slider their the changes as IRA taken up around them and this
is age to No 5 is added to the range tied input so this Justin input that takes the about your rotation value and if you provide this
range side supported the browser selection show you're will slide alike who enjoy New
Year uses to a binding and between that input elements in the match that the you rotation size and move sliders the map
rotates as and moved as a row diplomat with the drag
occasion the action and the library allows you to be time to do that sort of to a binding this things like input elements or other helmets and applications Nemertean full screen but if you were in full
screen we provide a cache of full screen controlled the and
expensive to for screen is really nice person experience
and and the and so that is
a some custom controls that you can add and to an extent
that the faultless looking at goal might be to work with the 3rd ball of the new so far as working with Brasted there were arrested house and but they focus and open
layers 3 is working officially with that delivers sewage pretty presocial you tiled players and the file sauces and this example to back to later were using at the time based vector sauce and here stay but the you are all after my data for this can be geodesy that we currently have for Fergie adjacent of which is in general Kamaljit kayaks advected is sauces and and were expanding that less so we plan to have the to parity with the players to in terms of a wide variety of the for matzoth supported the and and again this allow you to use the says the sauce describes where there is coming from and a talent for managed in and out the lybrel positive for you transformed coronets on the fly and then rendered so looking at the back
of a example here is just the
country's data said is it as
you mean here I can see labels
comedian would they would mention about the at the back door and reading this is that you can see that it's pretty locally data here by the
way things worked in the back during a raid now is this internal tiled Ramnarine so
well your animating Wellens EMI out or doing this animated
and and not actually going back to
the data and and rear rendering ring with every move and using cashed Becta tiles from the previous Rwanda and and using those to display that while were in this animated
transition between resolutions immediately changes strategy for this work spread strategies that are most efficient for for during the large amounts of data and still
providing really nice attracted to
those pre board example didn't have much style just white volumes of blue outlines
lexeme induced gave year later some style so that style handling of with 3 is is pretty sophisticated we intend making it is convenient as possible and this example shows creating a style with to symbolise the services of still symbolise a and stroke civilizer and if you get it Polygon data that will render polygons with the film stroked if your to give that line data to to stroke them and that it 30 pointed out that it would remove them at this point that in tactical after about however and point examples and
so that was just saying Renda all my data in the same way typically where you want to do is provide some sort of selected some Filtrona rented this for summit in 1 way and then the rest of it in another way so in see assesses the user selectors and then the style declaration in openly we have rules so rules and have a filter which represents a select a in this case and that it is 1 of the highway is to be rendered with this symbolises so 3 pixel stroke for the Highways and they could provide the and other said symbolises the and the rest of the day with a different set of symbolises so you can see that these rules in here and using still expressions determined and which featured
beaches are selected in the 100 so Agrabah simple but is a New York street status at the end rendered these different to the team that the data did not much variety in terms after values but there is a highway here running and and then the service roads were shown the yellow and if you look closely you can see the views and the roads are case of the 2 symbolises the 2nd pixel wide stroke and expects a one stroke over and we intend to provide and really robust and control for as the index support you can see this for example roadgoing under another example roadgoing over in some cases the became cases don't Lorelei property propylene but we want to give you that controls the you can say want the wider should be the all the settlers I index value and that the nearest has a high index so it next gold
the to let users interact with data and and this is an example of this using an over lay in the fact that the real data here release because time the and this example showing that
bootstrapped overs and to add to your maps on cooking on the map and enjoying the location where quick this pop over openly doesn't provide a pop up classes itself but if you using some elected strapped the does provide disagree plugin for public Verstappen use that in what we do for you is a car that at the location the used the you
Saxos rotate around here
today that pop up says position as inanimate it
moved smoothly with the but that was
just really interaction with my
location and relieve the wanted racked with with the data in this case an interactive activated have regular violent and this is sort of
enunciating example look at but that's intentional the idea is to show that we can have goal is to officially render far more features the action want to show people and so here 20 thousand points and they rented quickly as he saw it as an now see over and showing you future identifiers for points so you should get the impression is that the response to avoid the functionality here to the masses hovering over 1 2 3 4 5 6 7 8 features of the featured 5 for all those back not just about the future is that on the top there is that you can
see that agonisingly zooming
still with this week as points
in the red and efficiently the
final goal of the 2 shows just to allow editing and this is
very experimental work at this point were unstable workers in the stable block experimental but with these 2 interactions iterative branches having worked on the select interactions and a modified action in these Araxes a beacon posed in an editing control and other should them some that even those might have so that when looking
at the state's later rented out on
the kind here and Museum in injury with that
the selected action looks like so and cooking taking to
select later that showed a different style as eye however close to where you can see his point that should show up as a get out close to overseas in this and that in the sector data and that it is dragged so this is a pretty basic Maqdah editing functionality you can see that and and destroying the topology in my data and went on to serve editing to 1 of the Build provided is the ability to maintain this topology without the and having it necessarily in and that you having loaded etiological data structure for providing much a rules but despite and interpreting the user's interactions so by get rid of those at its selected of a teacher from a shift click to selected number of other features now have should Vertex said England on so as a drag on these points and changing oversees the adjacent polyamines and maintaining the topology of my data there so life that want to reshape Colorado there should be as big as it is a like a year and they can officially and had a surge of attacks editing which is sensible user actions and in the distance on the college rules is that the selected over beaches and move the proceeds together
sold the all high open-eyed motivated used to a new region is to get involved in libraries and we heard people become contributors please the and the code and the a size and you make a mistake and esprit earlier were working in the oil 3 repository under the layers organisations and and and then the say nailing West and and
soon will have an updated website and this of death or and locations and interested in the player and his examples he conceded that the the slides at this year's to show that they are working with the Royal 3 and the the will be over by the time her questions about a half