MapLibre GL 2.x - JavaScript maps with React, Vue.js, Svelte or Angular
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 | 351 | |
| Author | ||
| Contributors | ||
| License | CC Attribution 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 purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/69231 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Year | 2022 |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
00:00
Function (mathematics)Computer configurationPixelComputer iconSymbol tableRotationWeb browserGraphical user interfaceLatent heatTerm (mathematics)IntegerPay televisionTeilerfunktionGraph (mathematics)Fiber (mathematics)MassType theoryCodeSoftware developerClient (computing)Peer-to-peerPlastikkartePlane (geometry)Web pageKey (cryptography)MereologyTraffic reportingCategory of beingComputer iconSymbol tableMappingSoftware frameworkGraphics tabletCodeSoftware bugDemo (music)Computer configurationTexture mappingLatent heatLibrary (computing)Revision controlPixelType theoryHill differential equationFunctional (mathematics)HorizonAsynchronous Transfer ModeGraphical user interfaceLetterpress printingWeb browserTouchscreenINTEGRALOpen setMaxima and minimaVideoconferencingRotationUniform resource locatorSet (mathematics)View (database)MathematicsBitInternetworkingWage labourSynchronizationGame controllerMachine codeLine (geometry)Goodness of fitRing (mathematics)Open sourceComputer animation
05:51
Texture mappingMappingFunctional (mathematics)Hill differential equationMedical imagingOpen sourceSatelliteRaster graphicsVector space
06:56
Computer fileCuboidPixelSource codeTesselationCodeDefault (computer science)Functional (mathematics)Type theoryTexture mappingUniform resource locatorJSON
08:37
Standard deviationHypermediaLimit (category theory)Software testingImage resolutionActive contour modelPoint cloudTexture mappingTesselationDemo (music)SatelliteLibrary (computing)CodeHill differential equationComputer animation
09:42
Cartesian coordinate systemSampling (statistics)CodeTexture mappingComputer animation
09:59
Software frameworkTexture mappingDemo (music)Raster graphicsSoftware frameworkOpen sourceView (database)Electronic visual displayComputer animation
10:48
Library (computing)Musical ensembleView (database)Connectivity (graph theory)State of matterCategory of beingMereologyGame controllerPosition operatorTexture mappingLibrary (computing)Keyboard shortcutSimilarity (geometry)IntegerINTEGRALCASE <Informatik>Open sourceNatural numberImperative programmingElement (mathematics)Demo (music)Attribute grammarSoftware frameworkZoom lensSampling (statistics)Coma BerenicesMarkup languageGraph coloringRight angleWage labourLevel (video gaming)CuboidComputer animation
14:44
Source codeComputer-generated imageryRaster graphicsVector spaceVideoconferencingControl flowMedical imagingElement (mathematics)Source codeComputer animation
15:02
EmulationConnectivity (graph theory)Computer-aided designEuclidean vectorGUI widgetTemplate (C++)Sampling (statistics)Texture mapping
15:20
Sampling (statistics)Demo (music)Video gameCartesian coordinate systemVideoconferencing
15:35
Connectivity (graph theory)Water vaporStructural loadTesselationTexture mappingHill differential equationBitRaster graphicsComputer animation
16:29
Cloud computingVotingPoint cloudRange (statistics)TesselationDrawing
17:09
Total S.A.Wide area networkSoftware developerGroup actionTexture mapping
17:44
FreewareUsabilityDemo (music)Texture mappingResultantImage resolutionBefehlsprozessorCartesian coordinate systemArithmetic progressionBand matrixHill differential equationComputer animation
19:14
Multitier architectureCone penetration testTexture mappingVector spacePoint (geometry)BefehlsprozessorComputer animation
19:42
Multiplication signComputer animation
Transcript: English(auto-generated)
00:00
Good afternoon. My name is Martin Dilla. I work at map Tyler. I Love maps since my childhood, and I'm a big open street map contributor for more than 10 years Today I will talk about map Libra GL. What's new in version 2?
00:22
Most notably about 3d terrain support, and I will also show you how to integrate map Libra library with various frameworks like react swelt view or angular so Let's start
00:41
with Sorry with what's new in my Blibber version 2 so the big change is that the library was rewritten to typescript Which I will explain later The big feature, but still a little bit experimental is 3d terrain support
01:03
They dropped support of old browsers like Internet Explorer It's the same as for open layers and also they don't support chrome older than 66 Which is which was released like four years ago They drop mapbox specific features like the mapbox URL and some
01:26
Base URL and some Access tokens settings So now the library is has nothing Which is mapbox pure specific
01:40
They added options to set a custom pixel ratio You can use it if you want for example print Your map in good quality because it requires higher DPI than the screen Then I edit map reader of function this is useful if you want to integrate map Libra with other
02:05
JavaScript map libraries like open layers Then they increased max pitch from 60 to 85 and This is very useful if you display 3d terrain and want to see for example hills on the horizon
02:24
Then you need to tilt the map a little more. So these options this option enables you to do it then they edit Icon overlap and text overlap symbol layer properties and
02:40
They deprecated all Hello icon hello overlap and text hello or overlap and they extended it with the cooperative mode So if the some symbol Is rendered with cooperative mode and you render another symbol of which which collides with this symbol later
03:00
Then it won't be rendered if it has This value set to known but it will be rendered if it's set to always or to cooperate you Then they added options We pour glyph to the text rotation alignment I will I will demo it soon
03:22
Then they added a symmetric padding to icon padding property So every symbol or the icon can have different padding on every side It's styled similar to a CSS padding Property then I added cooperative gestures options. I will demo it shortly and they fixed many bugs
03:45
mostly thanks to Rewrite the typescript. So this demo shows Cooperative gestures option
04:03
Okay, so this is a video and you can see if I use the scroll wheel and I scroll the page the map will scroll until I click control key and then I can zoom in and zoom out and this other part of
04:24
The video shows the text rotation alignment report glyph Property and You can see On the map, I'll play it again. Okay. This is this cooperation
04:45
Cooperative gesture options and now if I rotate the map you see that every glyph of this map teller text Which is placed on the line? aligns with the viewport
05:03
Now I will talk about reverting the library to typescript So now there is no need to use external NPM library type slash my map labor and as GL and You also will have always all the types in sync
05:22
with the library if they release a new version and it has all this benefit of auto competition and Controlling types of your code It also improve improve the code quality. So they Thanks to the typescript. They found some bugs and fix fix it fix them and
05:43
It also makes contribution easier for new developers because of this typing Now about 3d terrain 3d terrain adds 3d functionality so the maps are no more flat
06:02
But you can visualize the the hills the elevations the volleys and at the serrata In this screenshot, you can see three images You can apply this 3d terrain all all kind of maps supported by my Bliber So it means on raster maps and also on vector maps in the first picture
06:24
You see the simple gray shading with 3d terrain support on the other picture you see the aerial map or satellite map also with 3d terrain support and the third map is map tailor outdoor map also with 3d terrain
06:43
You can see you can for example check these hiking trails if they are going too steep Uphill so you can for example Decide if you take the trip or not now how to add this 3d terrain functionality, so
07:02
You may include The source terrain directly to your style or edit separately like you see in this code So you add a source name it you must specify the type It's raster dash dam and then it provides either URL to
07:23
To tell JSON file or you specify all the details directly and my Bliber supports terrarium Tiles for elevation data or Terrain RGB tiles which are from my box
07:42
And these styles are basically PNG files where the elevation is encoded to these RGB channels for each pixels each pixel represents This elevation on the tile
08:00
Okay, and so if you set in the source terrain Then you can call the map and dot set terrain When you specify this source and you can also specify the offset and X-exaggeration and this exaggeration means how These elevations should be boosted. So if you are in there in some
08:22
Some land which don't have much hills and but you want to see some some 3d really or 3d Terrain then you can increase or boost it with this value. So this default is one
08:40
for my my purpose for the demo which will be at the end I Used map Tyler cloud where there are many existing standard tiles Which for this demo are? interesting like contours hill shading Outdoor map or satellite map it also contains global terrain RGB data
09:06
This can be used for this 3d modeling but in my demo I Wanted to take it to the limit and test how How details how how much detail can this library show? So I generated
09:21
high resolution data from leader data it includes high-resolution contours high-resolution hill shading and High resolution tellin terrain. So after I generated I uploaded to map teller cloud and I Could easily then include it, too
09:41
the code This is the screenshot of the sample application You can find it find it on labs dot map teller comm samples. There are multiple samples and one of them is It's about this 3d terrain
10:02
The demo will be shown at the end because it's longer video and not sure if it will make it complete And now I will talk about Integrating mablibber with various JavaScript frameworks Namely with reacts well to do an angular you can find many
10:23
Documentations and examples on docs dot map teller comm Slash mablibber GL jazz and there are many examples on this page like get started about basics display marker georgism layer and rasters and
10:44
So on and so on gal coding, so let's start with integrating mablibber with react I recommend us to use library named react map GL
11:02
Which brings reactive API of mablibber because mablibber is on its nature Imperative has imperative API But we direct we are used to reactive API so this library brings it for you, and it defines many elements with many properties
11:22
Which makes you mostly not need to interact with mablibber API directly But you will use these just these elements and in this demo. You see you have to import the map from the rig map GL and you need to import mablibber library library because
11:43
This library supports also map box so if you want to use mablibber you have to import it and specify it to mablibber attributes and Then you specify the style which should be used in this case. We are using nice street styles from map Tyler
12:04
You specify the initial view state so which part of the map would you like to see and I also including showing a marker at some position and some color You can of course
12:21
Use mablibber we direct without using this library, but then you need to handle all these Low level binding on your own a Similar integration integration goes with the swelt There also exists a library, but it's much simpler. It provides the only map component
12:43
it doesn't currently even it doesn't have a Marker component, but you can bind the map To swelt variable and then use mablibber API to add this marker or other
13:00
features Next library is view It's also similar as with react or as it swelt its bring its own markup When you specify for it for the map style some initial position
13:21
in this example you can see there is a Element that told us that we want navigation at some top right position and also marker on some coordinates coordinates and For every of these examples you can find again tutorials and demos
13:41
directly on Doc's map teller comb and We include Samples which uses these libraries for every framework, but also How to use it without without these libraries so with accessing this
14:01
with accessing mablibber API directly and now How to integrate mablibber with angler this library is also Pretty comprehensive like react one So it contains many
14:22
elements which basically Copies the map labor API So do they find everything declaratively and the same style zoom? Center for the map at the control marker, and you can also there are also element for layers
14:44
You can see it here for layers for various sources like Joe Jason canvas images and so on Marker pop-up Various elements
15:05
So this is how it will look like if you check the documentation on map Tyler We have their working samples
15:22
and At the end I created the demo I couldn't present this application life because of this restriction so I created a video and It will show you how it Looks in the world. I need to plate
15:48
So this map using uses raster hill shading with the terrarium RGB elevation data This This
16:02
Place is Slovak cursed in Slovakia, so you can see all these Holes made by water. This is fleshy bits quarry And you can see how the how it quickly loads the tile. It was not pre-loaded
16:22
This is zadial Canyon I'm from Slovakia. So all these places are near by my where I live This is Potsman's Kanisha, this is ruins of Moran Castle
16:54
And all these tiles are served served from the cloud. This is the highest peak of
17:06
Carpathian mountain range called girl ah In high Tetris There are still some glitches in this terrain elevation For example, if you see the transitions from place to place that it's not that smooth
17:24
But they're all reported and Developers are working on it. And now you see the same but with aerial imagery So it looks like if you are watching the land from the plane
17:41
And see all the details. It's of course possible as I mentioned to use existing map Tyler
18:07
Maps included to create a similar demo. They are currently not as Of as this high resolution but you can still create impressive results and they will be even more performant because
18:24
for this high resolution you it requires higher bandwidth and stronger CPU and graphic art and this opens many opportunities for example if you
18:48
if you load some if you if you track your trip somewhere to hills and then you can Create an application which will show you how did you progress during the trip the animation?
19:03
There are existing applications for it. And now you can create your own with your own customizations Can height address? and now I will switch to My map Tyler outdoor map when you can see
19:21
Hiking trails in high tetras and peaks and other points of interest but it's this is a vector map, so it's more CPU It requires much more CPU and therefore
19:46
Yeah, thank you, okay, so times for questions, thank you