Add to Watchlist

Application Development With OpenLayers 3

147 views

Citation of segment
Embed Code
Purchasing a DVD Cite video

Formal Metadata

Title Application Development With OpenLayers 3
Title of Series FOSS4G Nottingham 2013
Author Schaub, Tim (OpenGeo)
License 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.
DOI 10.5446/15511
Publisher FOSS4G, Open Source Geospatial Foundation (OSGeo)
Release Date 2013
Language English
Production Place Nottingham

Content Metadata

Subject Area Computer Science
Abstract 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.
Series
Annotations
Transcript
Loading...
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
Collaborationism
Lecture/Conference
Software developer
Website
Control flow
Bit
Turtle graphics
Cartesian coordinate system
Open set
Computer animation
Chemical equation
Software developer
Geometry
Coma Berenices
Open set
Number
Product (category theory)
Computer animation
Demo (music)
Multiplication sign
Bit
Quicksort
Web page
Mapping
Computer animation
Software developer
Home page
Self-organization
Bit
Whiteboard
Cartesian coordinate system
Point (geometry)
Rotation
Building
Mapping
View (database)
Code
Open set
Variance
Image resolution
Energy level
Default (computer science)
Zoom lens
Mapping
View (database)
Constructor (object-oriented programming)
Electronic mailing list
Limit (category theory)
Cartesian coordinate system
Tessellation
Computer animation
Doubling the cube
Personal digital assistant
Quicksort
Whiteboard
Object (grammar)
Matching (graph theory)
Separation axiom
Default (computer science)
Zoom lens
Game controller
Mapping
Luftreibung
Computer animation
Mapping
View (database)
Convex hull
Variance
Library (computing)
Maxima and minima
Numbering scheme
View (database)
Multiplication sign
Open source
Tessellation
Computer animation
Data storage device
Internet service provider
Order (biology)
Subtraction
Data type
Communications protocol
Separation axiom
Summation
Computer animation
Mapping
Key (cryptography)
Personal digital assistant
Open source
Configuration space
Discrete element method
Subtraction
Variance
Tessellation
Metropolitan area network
Information
Cartesian coordinate system
Metadata
Demoscene
Tessellation
Process (computing)
Computer animation
Lattice (order)
Personal digital assistant
Internet service provider
Statement (computer science)
Cuboid
Configuration space
Whiteboard
Communications protocol
Social class
Scalable Coherent Interface
Mapping
Structural load
Zoom lens
Discrete element method
Tessellation
Maxima and minima
Mach's principle
Image resolution
Computer animation
Field (mathematics)
Energy level
Addressing mode
Units of measurement
Simulation
Image resolution
Service (economics)
Structural load
Free variables and bound variables
Computer icon
Demoscene
Tessellation
Summation
Focus (optics)
Roundness (object)
Computer animation
Zoom lens
Tessellation
Physical system
Standard deviation
Server (computing)
Mapping
Ring (mathematics)
Physical law
Zoom lens
Open source
Client (computing)
Variance
Tessellation
Image resolution
Computer animation
Electronic visual display
Energy level
Keyboard shortcut
Group action
Game controller
Direction (geometry)
Zoom lens
Event horizon
Rotation
Number
Force
Luftreibung
Meeting/Interview
Touch typing
Representation (politics)
Energy level
Electronic visual display
Software testing
Contrast (vision)
Subtraction
HTTP cookie
Default (computer science)
Zoom lens
Multiplication
Focus (optics)
Scaling (geometry)
Mapping
Keyboard shortcut
Interactive television
Division (mathematics)
Control flow
Sequence
Position operator
Luftreibung
Computer animation
Touch typing
Personal area network
Email
Metropolitan area network
Game controller
Scaling (geometry)
Multiplication sign
Zoom lens
Image resolution
Summation
Mathematics
Arithmetic mean
Lecture/Conference
Personal digital assistant
Physical law
Matching (graph theory)
Game controller
Multiplication sign
Quantum
Variance
Number
Force
Summation
Rotation
Luftreibung
Computer animation
Conditional-access module
Emulation
Hypothesis
Physical system
Maxima and minima
Metropolitan area network
Summation
Rotation
Mathematics
Mapping
Meeting/Interview
Uniform resource name
Range (statistics)
output
Right angle
Emulation
Luftreibung
Mapping
Range (statistics)
Element (mathematics)
output
Selectivity (electronic)
Web browser
Matching (graph theory)
Emulation
Row (database)
Maxima and minima
Group action
Touchscreen
Method of lines
Multiplication sign
Element (mathematics)
Coma Berenices
Cartesian coordinate system
Maxima and minima
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
Computer file
Parity (mathematics)
Variety (linguistics)
Multiplication sign
Open source
Parsing
Variance
Uniform resource locator
Computer animation
Vector space
Term (mathematics)
Vector space
Position operator
Uniform resource name
Units of measurement
RAID
Reading (process)
Pointer (computer programming)
Uniform resource name
Ranking
Ring (mathematics)
Tessellation
Metropolitan area network
Group action
Open source
Parsing
Variance
Image resolution
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
Line (geometry)
Set (mathematics)
Rule of inference
Declarative programming
Variance
Computer animation
Vector space
Quicksort
Genetic programming
Subtraction
Genetic programming
Pixel
Service (economics)
Variety (linguistics)
View (database)
Counting
Maxima and minima
Category of being
Subject indexing
Computer animation
Personal digital assistant
Term (mathematics)
Genetic programming
Wide area network
Social class
Uniform resource locator
Mapping
Overlay-Netz
Computer animation
Mapping
Multiplication sign
Interactive television
Element (mathematics)
Plug-in (computing)
Variance
Social class
Metropolitan area network
Social class
Mapping
Overlay-Netz
Computer animation
Personal digital assistant
Point (geometry)
Interactive television
Element (mathematics)
Position operator
Variance
Point (geometry)
Group action
Identifiability
Computer animation
Dependent and independent variables
Mass
Functional (mathematics)
Point (geometry)
Metropolitan area network
Game controller
Group action
Computer animation
Function (mathematics)
Point (geometry)
Vector space
Interactive television
Branch (computer science)
Iteration
Variance
Group action
Twin prime
State of matter
Uniform resource name
Computer worm
Game theory
Point (geometry)
Building
Shift operator
Group action
Sine
Interactive television
Distance
Rule of inference
Functional (mathematics)
Number
Luftreibung
Video game
Network topology
Uniform resource name
Data structure
Drum memory
Subtraction
Slide rule
Spacetime
Uniform resource locator
Computer animation
Repository (publishing)
Code
Multiplication sign
Self-organization
Website
Library (computing)
Loading...
Feedback

Timings

  607 ms - page object

Version

AV-Portal 3.8.0 (dec2fe8b0ce2e718d55d6f23ab68f0b2424a1f3f)