Web Mapping 101: Getting started using MapTiler SDK!
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 | 156 | |
| Author | ||
| 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/68569 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
FOSS4G Europe 2024 Tartu148 / 156
6
33
35
53
55
59
61
67
70
87
97
99
102
103
104
105
107
111
121
122
123
124
125
126
127
128
134
144
150
151
155
00:00
Streaming mediaGroup actionAuthorizationTexture mappingLecture/Conference
00:32
Mobile WebSoftware developerOpen sourceTexture mappingSoftwareSet (mathematics)Cartesian coordinate systemCodeMappingRight angleMobile WebComputer animationLecture/Conference
01:22
Source codePoint cloudLibrary (computing)Vector spaceFluid staticsFormal languageSoftware development kitSet (mathematics)Vector spaceWeb-DesignerService (economics)Web browserSoftware development kitUniform resource locatorLibrary (computing)Self-organizationPosition operatorFormal languageOpen sourceCartesian coordinate systemWeb applicationPoint cloudTexture mappingKey (cryptography)MappingWeb 2.0Stress (mechanics)Computer fileVisualization (computer graphics)TesselationVideo gameInteractive televisionAddress spaceCodeProjective planeCore dumpOpen setXMLComputer animationLecture/ConferenceDiagram
04:16
Software development kitInstallation artContent delivery networkTexture mappingLibrary (computing)Software developerSoftware development kitComputer fileInstallation artLecture/ConferenceJSONXMLUML
05:02
Computer configurationSoftware development kitKeilförmige AnordnungLie groupManufacturing execution systemGame theoryElectric generatorMereologyTexture mappingUniform resource locatorCartesian coordinate systemFormal languageObject (grammar)Differenz <Mathematik>Software development kitCodeSource code
05:57
Software development kitComputer configurationSign (mathematics)Color managementLocal ringTexture mappingSound effectMusical ensembleVideoconferencingOnline helpComputer animation
06:37
GeometryGame theoryGamma functionComputer configurationSoftware development kitGame controllerTouchscreenTexture mappingParameter (computer programming)Source codeComputer animation
06:54
QuicksortSoftware development kitBounded variationTexture mappingMixed realityDrop (liquid)Keyboard shortcutObject (grammar)MappingSet (mathematics)Direction (geometry)Uniform resource locatorFunctional (mathematics)Lecture/ConferenceSource codeJSON
08:04
Software development kitBounded variationFormal languageLocal ringEmailFlagSlide ruleFunctional (mathematics)Formal languageCartesian coordinate systemVector spaceCombinational logicVideoconferencingDefault (computer science)Set (mathematics)Raster graphicsKeyboard shortcutTexture mappingSatelliteDatabaseFlagMusical ensembleRight angleVariancePresentation of a groupComputer animationSource code
09:46
Formal languageSoftware development kitPoint cloudLinear complementarity problem8 (number)Formal languageTexture mappingWeb browserComputer configurationResultantSource codeJSON
10:24
Software development kitWeb browserSound effectTesselationTexture mappingLocal ringImage resolutionDemo (music)Computer animation
11:00
Formal languageDistanceComputer configurationSoftware development kitFunctional (mathematics)Presentation of a groupDependent and independent variablesFile formatModule (mathematics)
11:21
Default (computer science)Software development kitFluid staticsTexture mappingFluid staticsComputer fileDynamical systemVector spaceMapping
11:48
GradientSoftware development kitTesselationMoment (mathematics)Reverse engineeringInformationTexture mappingCoordinate systemCodeSource code
12:21
Modul <Datentyp>Software development kitPoint cloudRoute of administrationDrop (liquid)Game controllerPlug-in (computing)VideoconferencingCore dumpCartesian coordinate systemTexture mappingLibrary (computing)Computer animationSource codeJSON
12:54
Software development kitCASE <Informatik>
13:11
Augmented realityGraphics tabletView (database)Mobile WebSoftware development kitAugmented realityNeuroinformatikModule (mathematics)Tablet computerMixed realityCellular automatonComputer animation
13:32
GoogolFormal languageProduct (business)HTTP cookieWebsitePoint cloudFreewareDemo (music)Link (knot theory)QR codeTouchscreenObject (grammar)Texture mappingRight angleComputer animation
14:04
Open setSoftware development kitFreewareSelf-organizationClient (computing)Library (computing)Right angleService (economics)Web pageComputer configurationOpen setCartesian coordinate systemScaling (geometry)PlanningRoundness (object)Endliche ModelltheorieSoftware developerMobile WebSoftware development kitComputer animation
15:18
TouchscreenVideoconferencingWeb 2.0MappingTexture mappingGame controllerSeries (mathematics)Computer animation
15:56
SoftwareCross-site scriptingStandard deviationCartesian coordinate systemTouchscreenNeuroinformatikWeb applicationDemo (music)Arithmetic progressionMobile appTexture mappingComputer animation
16:34
Thomas KuhnSoftware development kitMultiplication signTexture mappingCodeMobile appOpen sourceTraffic reportingComputer animation
17:35
FreewareSoftwareGraphical user interfaceGoogolSoftware developerMultiplication signAreaMereologyCartesian coordinate systemWeb browserRule of inferenceGoodness of fitTexture mappingSoftware development kitMobile appShift operatorMusical ensembleNeuroinformatikLecture/ConferenceMeeting/InterviewComputer animation
19:49
Computer-assisted translationLeast squaresAreaRight angleComputer animation
Transcript: English(auto-generated)
00:01
Thank you, thank you very much, thank you for coming. I'm here speaking on behalf of Jonathan Luria. He's the author of the MapTiler SDK, but unfortunately he couldn't make it, and originally it was also announced to be a lighting talk, so just five minute talks, but now it is a full talk, so we have to extend the topic. So here I am, speaking on behalf of someone else
00:22
about a topic I basically have no clue about, but we will see what we can do with it. First let me tell you something about MapTiler. We are tiling maps, as you may know, and we are a group of people who are loving maps, loving map designs, and software development, and open source software development, of course,
00:40
and we are putting together a set of tools which are going to end the maps for developer which are then easy to be used on the web and on mobile. We are Swiss-based with a bunch of people being located in the Czech Republic, and of course we have colleague all around the world as well.
01:03
I was already speaking about maps and maps applications. Map applications, as you know, usually contain not just the map itself, but also the navigation, or for example, geocoding, or you may, this conference is full of the 3D topic, right? Nobody was speaking about AR yet,
01:21
maybe I will be the first one. So shortly about MapTiler SDK at the very beginning. What it is? It is a open source TypeScript or JavaScript library licensed on the FreeBSD3 license, and it helps you to create interactive web applications
01:42
or map applications on the web. And originally it is designed to access easily a MapTiler cloud API for maps, geocoding, and other services. MapTiler is obviously a for-profit organization or company, therefore we are building a set of tools
02:01
which do help us to, which do help our customers and users to communicate with the APIs. But MapTiler SDK is built, is sitting on top of or the shoulders of MapLibre project, of course. So MapLibre is the JavaScript library for creating interactive maps on the web as well. This is basically how it looks,
02:22
there is MapLibre core, so whatever is supported by MapLibre is of course available in MapTiler SDK. And we just are adding a couple of features which should make the life of the web developer easier regarding the map styles and vector tiles
02:41
and raster, of course, and for example, JSON data files or GeoJSON data files. There is a couple of features which I would like to stress. So the first one is totally the built-in MapTiler styles. I hope you saw already one of the maps on our booth.
03:02
People like them, you like them too. So you can easily access them from within MapTiler SDK. Then there is this topic of language switching because this is actually one of the key advantages of vector tiles or vector maps on the web that you can style or change the map style directly but not only the map style and map appearance
03:21
but also the labeling and the language of the labeling which may be useful for some of the applications. There is also the language auto detection based on the location of the user or based on the settings of the browser, for example.
03:41
You can generate static maps, you can geolocate the position of the user based on the API address or directly of the geolocation capabilities of the device user is using. I was already mentioning geocoding both forward and reverse
04:02
or then there is an example of 3D terrain visualization directly in the web browser. So this is, those are some of the features which MapTiler SDK is adding on top of MapLibre. So let me show you quick start.
04:21
How to start with MapTiler SDK. First you have to install it. I assume most of you have some experience with JavaScript or TypeScript so the way is, it should be pretty straightforward. You just npm install MapTiler slash SDK. That's basically it if you are using TypeScript. But if you are more familiar with vanilla JavaScript
04:44
or HTML development like for example myself, then you just have to, I hope you can read it, yes you can. You can just put directly from the CDN dedicated JavaScript library and of course CSS file.
05:02
That's it. Then you just start to code map application. So what is in common is the first part. Oh, I can use this device. No, yes. So in the first part, you just initialize a map object.
05:21
You put it into some diff container called map container with the ID map container. Then there is the style and here already it starts to be more about MapTiler SDK. So we have for example predefined, I will talk about it later, predefined styles so you don't have to remember them, you don't have to look
05:41
for style JSON files, URL and so on. But you can also set all the other features like terrain or how much there should be exact generation of the terrain language and so on. So if you put this all together,
06:01
can someone local help me with the playing of the video? Oh, that sounds too complicated. I will just skip this slide. And go farther.
06:21
What you will get is a map. Map in Japanese having 3D effect on it, on itself. And what was there? The terrain is slightly exogenerated. And if I look at the parameters,
06:42
yep, it should be geolocated for example. There should be full screen control. Yeah, just like that. So relatively easy. And the map style is MapTiler outdoor map. So let me briefly talk more about the other features. I was already mentioning the styling.
07:00
So our team of cartographers who maybe had a chance to visit a talk of Petra Duriancikova about how to style maps. And she's actually the one along with Nicolas Bazone who is preparing a bunch of styles. I believe there are about 30 of them which can be directly used within the ESDK without need to remember all of the names.
07:24
But there's luckily other possibilities as well. Like for example, I was already mentioning winter. Now there is example with outdoor. You can immediately switch to another map style like backdrop. You can directly go to a shortcut which is the ID of the map within the MapTiler infrastructure
07:43
or if you are already having your private map with a dedicated ID, you can use it too. But luckily and of course you can use any URL or directly apply the style object
08:01
into the set style functions. Oh, what a disappointment. So next slide hopefully should be showing you some of the map, some of the styles.
08:21
I wanted to point out basically there is, I was mentioning 30 map styles, right? And some of them have variants. Most of them has variants. Like we have mapped our streets. Then there is the streets, dark variants, streets, light variant or streets, night variant. And we have the satellite map
08:40
but also so-called hybrid map where there is a combination of raster satellite imagery along with the vector labeling all over it. We have a beautiful database map and so on. The video was basically showing just some of the styles live. And luckily I have many videos in this presentation.
09:01
We will see how we can go. So I was mentioning also another feature which is the language switching. So first you can of course set the default language. Oh, sorry, this is the one. I can, you can set the default language which the application will use for start.
09:22
But later you can also switch the language to, for example, Albanian language or use a common ISO shortcut. And then there is a set of flags which can be used also. So that the map really behaves the way you would love it
09:41
to behave for particular user in particular region. Oh, this is working. So this is basically the result, how the map can change its labeling, language labeling directly or dynamically directly in the web browser.
10:03
Next feature is the 3D terrain. So with the options terrain through and exogenation 1.5 will enable the terrain, those alternative ways. But it will simply start to exogenerate the terrain.
10:25
And this is a slightly too fast demo, but I hope you have a picture because we have prepared the global digital elevation model which is then distributed in the map tiles apparently as well.
10:40
And this enables us to really show directly in the web browser like mountains and hellier regions, of course it looks the best. Don't try this on Estonia. You will see nothing. We are adding also local high resolution terrain slowly. So yeah, the effect should be really better even.
11:03
Another feature is geocoding. Here's a very short example. You just call the module geocoding, call the function called forward geocoding like Prezren from the last year presentation. And all you got is the geojson format as a response from the API and you can then show it directly in the map.
11:23
So here we have an example of Paris across Europe. So don't be confused if you are looking for Paris and you will find many other places. Another example is the static maps API. Static maps is another dynamic vector files
11:42
but this is the way how to get a static image out of the API. And there are other APIs. I was already mentioning geocoding. We were talking about forward geocoding. This one is example of reverse geocoding. Like tell me what is on this particular coordinate,
12:02
what kind of features for example. And there is an example of the geojson being stored on map tile cloud, geolocation info like where the user is basically based at the moment. Coordinate transformation API and many others.
12:23
I was so far speaking about the core of SDK but we are building a ecosystem of another, let's say plugins, especially weather and AR control. Now there will be more videos again so I'm curious how this will occur. First example is the weather library.
12:41
It should be relatively easy. It should be easy, this easy, right? Trust me, it's easy. To add a weather layer having weather forecast for four days and adding it into the map application. So we can have either for example wind layer in this case or as in with this case,
13:01
showed the precipitation moving. Another module I was mentioning is the augmented reality module which will give you the possibility to display really
13:23
AR on various devices, tablets, cell phones, computer or the new glasses. Let me see here the demo and let's risk it. So here I have directly the link to a object, right?
13:41
Which is a 3D map of a piece of Switzerland. If you can see it and point your cell phone on the QR code, you should get it on your cell phone and see it directly in front of you and of course on a screen of your device or in the other devices as well.
14:04
Okay, I will continue. Your this is basically the same example. Another reason why to use, why to bother about MapTeller SDK because yes, you can still use with MapTeller services, MapLibre or OpenLayers clients or Leaflet clients
14:20
but we are a for-profit organization, right? So we have to talk about pricing and about money even though there are three plans of course but for serious usage on big scale, we have to talk about pricing and those libraries are request-based. But MapTeller SDK, the big advantage is that it is based
14:42
or the pricing model is per session. That basically means that you, thank you, that you have to count, you can count how many visitors your page has and based on this, you will get directly an idea about how costly the application will be for you.
15:02
You don't have this option with the other libraries even though you can use them for displaying the map. So let's talk also about future development. The future is round and of course mobile.
15:21
Another full screen video, very, very beautiful. The video was showing this. If you go to labsmetal.com slash showcase slash globe, you will get already a globe with the maps and map controls and you can zoom around and pan around.
15:45
This is the way where the web mapping is probably going to evolve. And this is something we would love to deliver in the next series of MapTeller SDK and MapLibre. Also, if you heard about progressive web app
16:02
which is the way how to deliver applications using standard HTML and JavaScript technologies but then these applications can be directly distributed as cell phone applications. So in this way, we are developing
16:23
let's say a demo application. You can find it on mapteller.app, like app, and you can see it on your cell phone directly or on the screen of the computer. Another, this is basically how it looks, make just a few screenshots. And another example exactly of this approach
16:43
is the TimeMap.org, which is a very beautiful app showing the history of Earth, very simple, very simply said. So I would advise you to visit timemap.org
17:02
either on your computer or on a mobile device and see how it behaves. And that's basically all for me. So please, if you are interested more, visit docs.mapteller.com.sdk.js
17:21
or go to npm.js to find for MapTeller SDK to look for MapTeller SDK. The source codes are of course on GitHub, so pull requests will come as well as back reports all the time. If you are a developer, you are steadily hunting for people
17:41
and during the summer there may be more requests which can be found on mapteller.com slash jobs, so you can join our crew. And thank you for your attention. If you have more questions, you can see us on the booth in the exhibition area. Thank you.
18:04
Thank you, El-Yakim. So we have 10 minutes of questions, so that would be great to have also a few questions from your side. Everything was clear?
18:21
Okay, good. Hi, could you please just write the time map to the browser to see the application on site? Unless there are no other questions, I can show you timemap.org. So you run with the mic and I will focus on the computer.
18:41
Okay. Where should I run to? In the meantime, maybe we can have another question. Oh, you're ready.
19:01
You're first, okay. Yeah, this shows not only the cartography, but also the possibilities of the SDK. And yeah, the application itself is showing the history, like for example, rulers in their regions, and how the situation evolved during the history,
19:25
during the time. So if I just move to recent time, you may see some shiftments in this region. But also on the other part of the world, yeah. Cool, any other question?
19:48
Thank you, see you on the exhibition area. Yeah, right.