OpenLayers 3 Showcase
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 95 | |
| Author | ||
| License | CC Attribution - 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 | |
| Identifiers | 10.5446/15568 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Place | Nottingham |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSS4G Nottingham 201368 / 95
17
25
29
31
32
34
48
50
56
58
68
69
70
82
89
91
00:00
Computer-generated imageryWechselseitige InformationWeightCAN busOpen setFlow separationSystem on a chipLevel (video gaming)SummierbarkeitView (database)3 (number)Vector spaceComplex (psychology)Artistic renderingOperator (mathematics)Library (computing)Software developerVolumenvisualisierungWeb browserObject (grammar)Electronic visual displayRotationLevel (video gaming)CodeDirection (geometry)Projective planeTesselationDependent and independent variablesVirtualizationRight angleMachine visionView (database)Flow separationOpen sourceBuildingSpacetimeSuite (music)Multiplication signMobile WebMappingWeb 2.0State of matterFigurate numberOrder (biology)WordMetropolitan area networkImage resolutionMatching (graph theory)WebsiteNumberOpen setChainTask (computing)Module (mathematics)Spectrum (functional analysis)Electronic mailing listHypermediaComputer animation
05:28
Level (video gaming)Source codeGUI widgetEvent horizonOperations researchBit rateFrame problemAlgebraic closureCompilerObject (grammar)Arm3 (number)Cross-site scriptingDisintegrationOverlay-NetzSineBing MapsArtificial neural networkPosition operatorTouchscreenLine (geometry)Scale (map)Vector spacePhysical systemRegulärer Ausdruck <Textverarbeitung>ParsingOrientation (vector space)GeometrySummierbarkeitDoubling the cubeInteractive televisionCategory of beingTesselationCompilerVolumenvisualisierungObject (grammar)Operator (mathematics)Scaling (geometry)Endliche ModelltheorieDependent and independent variablesLibrary (computing)Game controllerService (economics)View (database)QuicksortCodeSource codeMathematical optimizationCompact spaceFunctional (mathematics)NumberArtistic renderingSingle-precision floating-point formatEntire functionSpeicherbereinigungWeb browserLevel (video gaming)Orientation (vector space)Software frameworkCodierung <Programmierung>Vector spacePower (physics)Demo (music)Type theoryBootstrap aggregatingINTEGRALSoftware developerZoom lensInternet service providerTouchscreenFlagFrame problemBit rateComplex (psychology)Figurate numberMatching (graph theory)Machine visionLebesgue integrationCuboidInheritance (object-oriented programming)Statement (computer science)Position operatorMoment (mathematics)WebsiteComputer animation
10:56
Conditional-access moduleUniform resource nameSoftware engineeringMathematicsCAN busSpecial unitary groupLevel (video gaming)Game controllerMatching (graph theory)MappingArithmetic meanZoom lensComputer animation
11:14
Execution unitConditional-access moduleSummierbarkeitWechselseitige InformationSpecial unitary groupUniform resource nameMathematicsInterior (topology)Game controllerMomentumLine (geometry)Personal area networkScaling (geometry)Sound effectKinematics
11:36
Wide area networkHill differential equationConditional-access moduleGamma functionArmMetropolitan area networkVideo GenieWeightRaw image formatPointer (computer programming)Keyboard shortcutGame theoryBranch (computer science)outputRange (statistics)Computer animation
11:58
Conditional-access moduleMenu (computing)Artificial neural networkMagneto-optical driveMetropolitan area networkWide area networkInterior (topology)Wechselseitige InformationEmulationHand fanSoftware engineeringEmpennageUniform resource nameFlynn's taxonomyTouchscreenGame controllerWeb browserAsynchronous Transfer ModeIdentity management
12:18
GUI widgetLevel (video gaming)Information managementArtificial neural networkStorage area networkEmulationSpiralSineGamma functionFlynn's taxonomyNumberArc (geometry)Moving averageArmSummierbarkeitSpecial unitary groupMetropolitan area networkPhysical lawPersonal area networkElectronic data interchangeMaxima and minimaSatellitePrinciple of maximum entropyGeometryFile viewerOpen setSpherical capComponent-based software engineeringMobile WebNon-volatile memoryDemo (music)Hidden Markov modelChi-squared distributionNormed vector spaceUniform resource name3 (number)Hand fanMUDRaw image formatInfinityGradientWide area networkMeta elementComa BerenicesAreaCone penetration testForm (programming)WebsitePhysical systemBuildingVector spaceSoftware bugEquivalence relationGame controllerZoom lensCartesian coordinate systemPoint (geometry)PlanningExtension (kinesiology)Library catalogFunctional (mathematics)Uniform resource locatorSoftware frameworkMultilaterationDrop (liquid)QuicksortArithmetic progressionDependent and independent variablesOpen setCodeObject (grammar)Product (business)GoogolClique-widthSoftware maintenanceTouchscreenMikroblogMobile WebElectronic mailing listConnectivity (graph theory)Library (computing)Multiplication signVector spaceProjective planeType theoryTouch typingBeta functionBootstrap aggregatingAlpha (investment)Series (mathematics)Order (biology)Elasticity (physics)MappingParameter (computer programming)SpiralMathematicsKey (cryptography)GodDesign by contractRight angleIndependence (probability theory)1 (number)Decision theoryProgrammer (hardware)Field (computer science)Network topologyWhiteboardDivisorAreaPhysical systemHypermediaSet (mathematics)Matching (graph theory)BitCASE <Informatik>Operator (mathematics)View (database)Neighbourhood (graph theory)WebsiteProcess (computing)BuildingSign (mathematics)Computer virusReduction of orderElectronic visual displayComputer animation
Transcript: English(auto-generated)
00:00
where we are going with OL3, what we want to do, direction we're going. So first of all, we think that there is a convergence between 2D and 3D, and people expect to be able to draw, to display 3D objects like 3D buildings and 3D terrains
00:22
on top of 2D projected tiles. So as on this picture, we can see buildings on OSM tiles. So that's, we're not yet there, we don't do any 3D right now, but that's what we want to do. And it's also interesting to note that that is also what big players like Google,
00:44
that's the direction they're going to. Another key thing for the project is vector rendering. We want to be able to display many vector features with complex tiles on the map. And we think we can use technologies like WebGL
01:07
to be able to achieve that. And vector tiling is also something we are looking at, and something we want to take into account from the very first, from the beginning of the development of the library.
01:27
So 3D and vector rendering are main things, I would say. And we think that to be able to display 2D as well as 3D objects,
01:40
and with complex tiles, many objects, we think that we need to treat map as graphics. And what this means is that, more specifically, this means that we think we want to use a graphics API like Canvas and WebGL that modern browsers support now. And we already do that a lot.
02:06
The library, in its current state, the library uses WebGL and Canvas quite extensively. And we think that by using these technologies,
02:21
WebGL and Canvas, we can also get very good performance. Now I'd like to take some time to position OL3 within the current suite of open source web mapping libraries. So on one side we have OpenLayers 2 and
02:43
Leaflet, 2D libraries, very popular. OpenLayers 2 has many features that people use and need. And Leaflet is a great library. It's very lightweight, works great on mobile devices, and it provides an API which is very convenient for people to use.
03:03
On the other side of the spectrum, we have 3D libraries, virtual globes like Cesium and OpenWebGlobe. They are fantastic libraries, very powerful libraries, but they are also very complex to use.
03:21
And with OL3, we want to be right in the middle of that. And we actually want to cover the entire space. We want to be able to do 3D, and we also want to provide a convenient API and easy enough API for people to use. And obviously we also want to support the features that OpenLayers 2 supports
03:43
because people use those features and need them. So that's it. I'd like to say that OpenLayers 3 is a very ambitious project, a very ambitious library for ambitious maps, maybe.
04:02
So that was the vision. So now I'm going to talk about some of the design principles we apply. These are the things we care about while developing the library. So the first thing is separation of concerns, separation of concepts. So within the library, everything is very well separated.
04:24
We have many modules, many files. Each has a clear task, a clear responsibility. And this actually trickles down to the API. And I'm going to give a few examples here. So the main object that you use at the API level is the map.
04:44
That's the main object. And the map as a renderer. The renderer is the object that takes care of the rendering operations. So all the rendering operations are done by the renderer object. And you won't find any WebGL or Canvas code outside the renderer.
05:03
And the map also has a view. The view is what determines what the user sees of the map. So for example, we have a 2D view object, which is determined by a center, the center of the map, a resolution, and a rotation.
05:24
And the map has layers, which is very typical. But actually, a layer has a source. And the source represents the data. It represents the remote service that provides and serves the data.
05:41
So we have this distinction here. So the source is, if we borrow from the MVC model, the source is the model and the layer is the view. The layer determines what you see. For example, it has properties like opacity and visibility.
06:01
So another thing where things are separated is interactions and controls. We have these two concepts. And Tim, I think, will talk more about it. So basically, interactions respond to browser event on the map. And so we have, for example, the double click interaction,
06:22
double click to zoom interaction. So this is just an interaction. There is no presence in the DOM. In contrary, controls have a presence in the DOM. So for example, a zoom slider, or a scale line, or zoom buttons, those are controls.
06:45
The other thing we care about is obviously performance. We want the library to be super performant. And we take special care for this. And we want to, so we are very careful with the code we write,
07:03
the JavaScript code we write. And we want to avoid boxing, unboxing operations that JavaScript engines need to do if you are not careful with the types you put in array. This is just an example. We also want to be very nice with the garbage collector and we try to reuse objects within the library as much as possible.
07:24
We use this new API function, browser API function, which is RequestAnimationFrame. So our entire rendering engine is based on this API function. And we watch the frame rate.
07:43
We use tools, specific tools, to assess the frame rate that we achieve. And we also try to redraw as few pixels as possible in the renderer. And one big thing is we use the Closer compiler
08:02
to get a very compact library with optimized code. So this is just an illustration for the things we are looking at and we are careful about for the performance of the library.
08:21
Another thing, the library has no opinion on the UI, which means we use CSS a lot and it's your responsibility as the developer or the designer to customize the controls and everything. And we also provide objects like ol.overlay
08:43
which allows integration with other libraries, for example, Bootstrap, if you want to use Bootstrap. So with ol.overlay, you can easily create a Bootstrap pop-up, for example.
09:03
So that was design principles. Now I'd like to give an overview of the current features we support. So we support various tile sources or providers, OSM, XYZ type providers, stamen, typejes and big maps,
09:24
WMTS and WMS. And WMS, we support both tile and single tile. We have a number of controls, attribution, fullscreen, mouse position, scale line, zoom, zoom slider. I will show you some of those in the demos.
09:46
We have a vector layer with a rule-based styling and a very powerful expression system. If you want to know more about that, you can go to Teamstar.
10:00
And we have many parcels already. GeoJSON, GPX, KML, filter encoding. So those are OGC parcels, GML, WMS capabilities and WMTS capabilities. So just to say that we, and we have more, we have an animation framework that we use internally
10:23
and that you can, that we expose also so people, users can do all sorts of animations based on that framework. And we also support geolocation and device orientation. And actually there is more than that. Just to say that the library is already, has quite a lot of features already supported.
10:49
Just a few, just two demos, a few examples to show what an OA3 map looks like. So this is a Bing map.
11:01
And you can see the controls I was talking about. So these are very common stuff, plus and minus. So you can see that everything is animated. When you zoom, zoom in, zoom out, it's all animated. You can, even when you pan, there is this kinetic momentum effect while panning.
11:23
We have this scale line here control, excuse me, and other control as well. And something that we support is, oops, yeah, rotation. So we support rotation, which can be very useful on mobile devices.
11:45
And we have this, you can, when I move, we have this binding stuff. When I rotate the map, I can see the input range up there that moves as well.
12:00
And we have this full screen control that allows switching the browser to a full screen mode. Okay. So I mentioned animation in the previous slide, previously.
12:27
This example here demonstrates what you can do with the animation framework. So you can do very, very, this is just an example.
12:41
You won't use that in a real application, I think, but this kind of demonstrates the capabilities of the library. Elastic to Moscow, bouncing to Istanbul, and let's spiral to Madrid.
13:03
Okay. So now I will let Cedric talk about the application they're building. Okay. Hello, my name is Cedric Moulet. I am working for the Swiss Topo.
13:22
It's a national mapping agency in Switzerland. Thanks, Cedric, to let me introduce GeoAdmin. My main goal today is simply to say that OpenAIOS 3 is already very good, is working, we can use it in a productive application. And that's what we are going to do with MapGeoAdmin.
13:43
MapGeoAdmin is based on OpenAIOS 3, AngularJS, and Bootstrap. So we try to use really large libraries, modern libraries. We created several components on the top of OpenAIOS, so kind of widgets, and we name it components in the Angular jargon.
14:05
They are directive, mainly. Mobile and desktop application is only one application. Previously, we had two applications. Now, with OpenAIOS 3, we are able to create also a very nice application on mobile,
14:23
so we made only one application. It's really lighter. Previously, we had 600 cars, and now it's 250, and we can probably reduce that. And it will be in production on the 17th of October. And the code is available on GitHub if you need it.
14:43
So one aspect is the responsiveness of the application. Here, you have the application on a phone, application on a tablet, and an application on a desktop. So it's exactly the same code base. It's exactly the same application. With Bootstrap, we are really able to make the application
15:02
depending on the width and the height of the screen and also the touch component. I will maybe make two simple demos. First, the responsiveness. You can see typically on the left here this tool. That's a typical OpenAIOS 3 control.
15:21
And now, when it's too small, when the width is smaller, then we have only two buttons, and we don't have the zoom slider control. You can see something equivalent also here in the search tool. We move it, and we also move the accordion depending on the size of the screen.
15:43
A nice function is the all-in-one search. Now, you can search here for layers and for location. In this case, I put water, and with a nice preview function which works very well with open layers.
16:00
And this preview is also active in the catalog. You can select layers and simply see a preview in order to check what is the layer. In summary, I think you can already use OpenAIOS 3,
16:23
so feel free to make that. Thank you. To conclude, I will give a quick status update on the project.
16:51
We are about, if not already done, I don't know, we are about to release a 3.0 beta 1. We had a series of alpha releases this summer,
17:03
and this is going to be our first beta. The things we are currently working on is we work on a new website, a new build system. It's very important to be able to do custom... OpenAIOS 3 is already a large library,
17:23
so it's important to be able to do custom builds tailored for your applications, so that's what we are working on. WebGL vector is a key thing, something we are currently working on. There's a lot of progress, but we are not yet there.
17:43
Vector editing, something we've been working on. I think Tim also will show you the current status of that. That's the end of the talk. Thank you very much.
18:06
Okay, thanks Eric and Cedric. Do we have any questions? Is there support for time? Not directly right now.
18:22
You can change, for example we support WMS, and you can change WMS parameters on the fly, so you can easily add a time parameter, but it's not built in the library I would say. This is something we've discussed already.
18:41
I noticed in the list of base layers there was Bing and a bunch of others. X, Y, Z type layers, but it didn't mention anything about Google. Does that mean Google is not supported? Google is not supported right now. It's been difficult to maintain in OL3
19:03
because of the way we interact with the Google Maps API, so it's not clear yet that we'll support Google Maps in OL3, to be honest. Any other? I think there's no sort of backwards compatibility
19:20
with Open Wheels 2. No, there is no compatibility. It's a rewrite and it's a new API. So maybe the compatibility is more on the features we support. We try to support what OL2 supports, which means our objective is that
19:41
if you have an OL2 application, you will be able to update to OL3. Does that also mean that you are trying to maintain OL2 still, and if so, how long? Yeah, we will maintain OL2, and how long, I don't know exactly.
20:01
It depends on our progress with OL3, I would say, but I think OL2 is here to stay for some time. That's my opinion. If you say it depends on the progress with OL3, it sort of sounds like once OL3 is finished, we'll drop support, or we'll drop maintaining. No, I shouldn't say that.
20:23
Thank you. It's looking really beautiful for so much. Really nice, really fast. Are you doing tilt as well as rotation? Oh no, but this is in the plan, obviously, with 3D stuff, and yeah, we'll do that for sure.
20:42
Is that going to be in the 3 release, or 3.1 or later? No, the 3 release will be 2D only without tilt, I think, but we'll add this later. Sorry, didn't...
21:00
Oh, excuse me. So as I said, we use Canvas extensively. That's one of our main rendering engines, and so this is IE9. So we support Chrome, Firefox, obviously, and IE9+.
21:22
And IE11 is supposed to support WebGL, so this is a very good thing for us. Are there any plans to support SVG symbols, for example, point symbols?
21:42
I'd say it's much easier to do than this canvas. I don't think this is something we've discussed yet, but it would make sense to me, at least. Any other questions? Okay, now I'd like to thank Eric Cedric.