MapTiler SDK: MapLibre experience on steroids
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 | 266 | |
| Author | ||
| Contributors | ||
| License | CC Attribution 3.0 Germany: 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/66473 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
ThumbnailSoftwareProcess (computing)Electronic visual displayWorld Wide Web ConsortiumInteractive televisionLibrary (computing)Raster graphicsFormal languageSoftware development kitEmailInstallation artContent delivery networkModule (mathematics)Open setQuicksortCartesian coordinate systemGraph coloringEndliche ModelltheorieType theorySoftware developerTexture mappingPower (physics)SmoothingCirclePoint (geometry)BitFormal languageSet (mathematics)Web 2.0Source codeVisualization (computer graphics)Library (computing)Physical systemVector spaceTelecommunicationModul <Datentyp>CASE <Informatik>TesselationPosition operatorRemote procedure callExtension (kinesiology)Point cloudTablet computerSound effectRaster graphicsElectronic visual displayOpen sourceForcing (mathematics)Materialization (paranormal)Software engineeringFluid staticsPresentation of a groupSlide ruleElectric generatorSoftwareFreewareComputer animation
05:04
Computer configurationTexture mappingDefault (computer science)LogicFormal languageCodeElectronic mailing listContext awarenessSocial classPoint (geometry)Complete metric spaceServer (computing)Dot productComputer configurationType theoryGame controllerObject (grammar)Uniform resource locatorMoment (mathematics)Constructor (object-oriented programming)Musical ensembleDirection (geometry)Source code
06:43
Computer configurationRankingFormal languagePrisoner's dilemmaSource code
07:15
Software development kitQuicksortBounded variationView (database)MappingHill differential equationMultiplication signDefault (computer science)Line (geometry)CASE <Informatik>
08:04
Bounded variationSoftware development kitAsynchronous Transfer ModeBounded variationVisualization (computer graphics)DatabaseDefault (computer science)Graph coloringNumbering schemeRow (database)Hybrid computerInformationElectronic mailing listLevel (video gaming)Texture mappingComputer animation
08:40
Software development kitBounded variationTrailLocal ringFormal languageFlagTexture mappingFunctional (mathematics)Formal languageSet (mathematics)Internet service providerAsynchronous Transfer ModeLatent heatComputer configurationLine (geometry)Musical ensembleDefault (computer science)String (computer science)2 (number)Web browserAreaLocal ringMultiplication signKey (cryptography)QuicksortPoint cloudSubsetObject (grammar)CodeEqualiser (mathematics)Decision theoryCASE <Informatik>BitTesselationRevision controlQuantum stateLatin squareFlagParameter (computer programming)LogicType theoryDifferent (Kate Ryan album)Constructor (object-oriented programming)Source code
12:19
Formal languageSoftware development kitDefault (computer science)Formal languagePlug-in (computing)Computer animation
12:44
Point cloudSoftware development kitTerm (mathematics)Axiom of choiceTexture mappingSource codeMusical ensembleParameter (computer programming)Multiplication signAbstraction
13:37
DistanceComputer configurationFormal languageSoftware development kitDistanceResultantPrisoner's dilemmaPoint (geometry)Dependent and independent variablesCuboidGeodesicAdditionEncapsulation (object-oriented programming)Texture mappingComputer configurationFunctional (mathematics)System callFormal languageLevel (video gaming)CodeComputer animationSource code
14:37
Type theoryPoisson-KlammerMatching (graph theory)Number2 (number)ResultantSquare number
15:17
AreaGamma functionSoftware development kitUniform resource locatorProjective planeComputer configurationPoint (geometry)QuicksortSeries (mathematics)Reverse engineeringTrailWeb serviceComputer reservations systemPhysical systemSource codeMappingEquivalence relationPoint cloudFluid staticsTexture mappingInformationLevel (video gaming)TesselationGeodesicSource code
16:51
Fluid staticsSoftware development kitModul <Datentyp>Fluid staticsGraph coloringTexture mappingUniform resource locatorRight angleShape (magazine)Point (geometry)MappingCuboidQuicksortGame controllerTesselationPoint cloudDemo (music)Computer animation
18:16
Software development kitPoint cloudTexture mappingGraph coloringDemo (music)Computer configurationDefault (computer science)Videoconferencing
18:52
Software development kitAreaSmoothingQuicksortPressurePoint cloudExecution unitVideoconferencingLevel (video gaming)Multiplication signComputer animation
19:55
Software development kitPointer (computer programming)Computer configurationInformationCodeParticle systemComputer animation
20:22
Software development kitTexture mappingGraph coloringBitLatent heatRight angleCodeSource codeCone penetration testCASE <Informatik>Computer animation
21:21
Point cloudTesselationProjective planeMusical ensembleMoment (mathematics)Regular graphServer (computing)Texture mappingConnected spacePhysical systemComputer animation
22:43
Software development kitFormal languageLocal ringMaxima and minimaFlagUsabilityComputer configurationCASE <Informatik>Source codeUniform resource locatorMoment (mathematics)Local ringTexture mappingBridging (networking)Arithmetic progressionServer (computing)Pattern languageTesselationQuicksortComputer animationLecture/ConferenceSource code
Transcript: English(auto-generated)
00:08
Hello, so I'm Jonathan Lurie, I work at MapTiler and I'm a senior developer there and I'm going to present MapTiler SDK that has been developing in the last month but is available online already. So first I'd like to start with a
00:26
small introduction of what's MapTiler as a company, one slide. So we are based in Switzerland and Czechia but we also have many people remote across Europe and recently also in the US. We create a lot of tools and application
00:42
related to displaying JS data. We do quite a lot of open source contribution, we curate process and create a JS data set as well. As a business we also host JS data for our customers and we are doing quite a bit of R&D and many more
01:00
JS things. So the team is quite diverse internally, we are like roughly 50 people, almost 50 people. So it's composed of cartographer, JS specialist, designer, UX specialist, software engineer, geocoding, copywriters and all of them, map lovers in general. So MapTiler SDK, so what is that? So it's a JavaScript
01:23
and TypeScript open source library and the licensed PSD3. It's a way to create interactive maps on the web, it's a way to access MapTiler cloud API, geocoding, geolocation and this kind of thing. It works with the free MapTiler account and it's an extension of MapLibre GLGS. One point I haven't
01:42
mentioned here is that there is no vendor lock-in, so it's an extension but it can be using like any tile sets out there and we don't force anything into using MapTiler cloud. So first, since it's an extension of
02:00
MapLibre, it's worth making a recap as to why are we extending it. So MapLibre GLGS, it's a JavaScript TypeScript library to create interactive maps on the web. The pros are for maybe those who don't know, it's pretty fast, it's pretty smooth, it's powered by GPU WebGL, so on the display side. It's compatible
02:23
with many types of layers, so raster, vector, 3D models and stuff like that. The vector layers are super highly customizable, so you can display things of all sort of color and all sort of visual effects. It's open source and the
02:41
community is very active. The cons, or at least the cons that we wanted to address is that it doesn't come with any data, so for us it's actually a pro because we are from a data, it's our business. It's only about maps, so there is no geocoding in MapLibre. The developer experience can be a bit of a
03:01
pain for setting up and styling layers, for example. There is no built-in multi-language support, even though the styling makes that possible, but it's kind of an advanced use case. Customization can be a bit overwhelming and MapLibre has its own agenda driven mainly by the community and
03:22
that's totally fine. The thing is that this agenda is not always aligned with material's agenda, so the points we are extending or working on is the cons part. So let's build on top of MapLibre, so you can see the blue circle in the middle is MapLibre and we are not forking it in the sense that we
03:42
continue to build on it and as MapLibre advances and there's new features going on there, we still use the new features and continue to build around that. So as you can see, there's a lot of little MapTailer logo around them, so that's basically the modularity of the SDK and this outer layer is in
04:02
communication with our servers or at least if the user of our SDK is willing to use our data, which is not mandatory at all. So for example, one of those modules is like built-in, the use of built-in styles that we make that
04:20
our cartographer and designer make, language switching, auto language detection based on system settings, access data on the cloud, generate static maps, geocoding, 3D terrain, also to have like the whole dam and centering the map on user position might be a plus for our customers. So how to install it is
04:47
fairly simple for people who are already versed with TypeScript and basically using NPM, so it's very easy to install. We also provide a CDN so that if you have a more simple use case, that might work better for
05:02
you. And then what's new? For some who may know, MapLibre comes with a very important object that is called map, so that's a class in TypeScript and map already comes with many options so that you can, at the moment you create your map, you already can customize it. So the way we extend that is by adding
05:24
few options. So the style, which was already present but here in MapLibre, here we are extending it with built-in types that are directly communicating with our servers. So the good point is that if you're using VS Code, for example, as I told you that my map style dot and then you have a whole
05:43
list of styles available with a short description as per in what context you could use them. The terrain, whether true or false, by default it's false but you can basically pop the terrain as at the moment you create the map, you instantiate it, you may want to have it with a bigger exaggeration. You can choose the language, so for example here language
06:05
dot and then you'll have a completion list of a fairly long list of languages. Whether you want to geolocate, so by default it's false, but if you put it to true, the map is going to be centered on the end user location. So there is no
06:22
GPS, so it's like kind of a rough location, it's not like your house. And then there is a few other controls, some of them are already built-in MapLibre but has to be initialized from the outside and then later on added to the map. So we kind of nested this logic inside the
06:41
constructor directly. So here, as we could see before, language Japanese it's because here it's on prison and it's obviously not the local language, so as you can see the main label for the city is written in Japanese but
07:00
the rest, all the other labels that don't have the Japanese label as will fall back to the local name. So yeah, here is basically another view. So the styles and the variations, so as I said we have a team of
07:20
cartographer and designer who are working on use cases, so whether they are internal or come from already existing customers, we are designing new maps for example, the last that was designed is the one that is, yeah they're all kind of blurry, but it's called backdrop, so it's a fairly minimal style for visualizing data, so there's less label, there's less line,
07:45
there's less details, but there's hill shading, so that's one of the things we use for weather layers that I'm going to show later. So basically every time you select a style, there might be variations such as like dark, light or default, so yeah in the end there's quite a lot of them. And here on the
08:05
first row you could see all the variations of the street style, so the first one on the top left is the default street, but then there is a dark, a light, a night and a pastel, they are all showing the same level of detail, the same kind of information, so basically it's just the color scheme
08:22
that changes. And on the row below you have other example of styles, though it's not exhaustive list of course, but hybrid dataviz.dark if you want to have your data visualization on the dark mode, and backdrop with nice hilly shading, and some other that you may recognize. So to create a map
08:44
with a given style you have many different options to do that, so you can do that at constructor time, so when you initialize your map you do like map style equal map style outdoor for example, but later on you can always change the style of your map with the same shorthand basically, like backdrop
09:01
for example, you can use the ID as it if you want to use a specific version like street v2 which is like the last version, but you may want to use v1 if you prefer for some reason, and on map style cloud you can also design your own style, and when you design your own style you will be given
09:20
a fairly long ID, UID v4, so this is this long string of nonsense character that you can see here, that's the one you can use as well, but if you want to use another style that comes from another provider you can always use the set style with a full URL, possibly with an API key if it's not your main
09:41
API key that you want to use, it's a style designed by someone else maybe, or you can design dynamically your style and inject it as an object on the last the very last example here, yeah, so set style as a function can accept
10:04
different types of arguments, so if it's a string or if it's just like on the second line like map style dot backdrop which is a shorthand, and then internally in the function we check, oh is it an object, is it a
10:21
string or is it something like that, so this logic is partly borrowed from what is already existing in map library, so we are kind of extending that to create like shorthand map style dot backdrop for example, which we came up with, so multi-language support, it's something that we wanted to have because
10:41
since we are data provider and map provider in a way we don't really know who is the end user and we don't really know in what language they prefer to see their map, so the same as for style you can define the language at the very beginning when you construct your map, like language dot English for example, but you can later on set it after your map is initialized
11:02
you can change the language, you can use the shorthand language dot Albanian or use ISO code like the two letter ISO code like SQ for Albanian for example, and there are other tags or flags that are not exactly language such as auto, locale, latin, or style lock, and auto which is the default mode if you don't
11:22
specify the language is going to look into your web browser language setting and try to, if it's possible, if it's available to adapt the language to your settings, if you have multiple language in your web browser it's going to take the first that is available in the SDK, so that in the end
11:42
when you look at the map you see it in your own language, and style lock it's a usage our cartographer have taken strong decision regarding the language if it's a locale map for example only on a specific area with specific language or sometimes concatenation of labels, then if you use style lock it
12:05
makes it impossible to modify the language at least with the set language function you can always like dig deeper into that and change it sort of manually but otherwise it's prevented so yeah here
12:21
it's supposed to be a limited GIF so it doesn't show basically rolling over different languages and showing Mediterranean countries changing labels but yeah it's also compatible with right-to-left languages in the built-in way so you don't have to install or to extend with a plug-in so Arabic and
12:41
Hebrew are going to be supported by default. 3d terrain so basically popping terrain on your map in a 3d is also built in so you don't have to create to add another layer with adding a data source like internally since Matala provides this kind of data we made it made a small abstract layer
13:03
on top of the SDK so that you can basically set terrain true with a given exaggeration or later on after your map is initialized you can do like enable terrain or enable terrain with a specific exaggeration of your choice or then there's like set terrain exaggeration with the second argument
13:22
being a boolean if whether you want to animate that so in a smooth way maybe and maybe that's your thing or disable terrain entirely and then as you bruise the map it will stop fetching the terrain time so it's it's supposed to be animated GIF of like showing but yeah doesn't matter
13:45
geocoding so in addition to display map we also provide API endpoints encapsulation so basically instead of pinging one of our endpoint on a low-level fashion you would have function that encapsulate these calls for
14:00
example here the geocoding dot forward so if you look for prison for example you'll have the response as geodesism feature or feature collection which is not exactly a top-level geodesism so you still have to have like small encapsulation but it's still a feature so and there is a lot of
14:22
option to this function so you may want to change the language for example or to have a proximity if you want to have a priority on the result based on on proximity of a given point or a bounding box or this kind of thing so here if we type in Paris for example we are given some results and they
14:43
are ordered by relevance and here is just like a few of them so it's not super obvious but it's written like the number in square bracket at the beginning so Paris France is the first result the second is also a city called Paris in Czechia and but later on you could have like in Iran for example you
15:03
would have like Paris because it contains a substring Paris it's still one of the match so yeah that's that's basically how it works and you can define like how many results you want to have and you can also change the ranking method there are other API that I'll go maybe less in less in
15:22
depth so for example one is like reverse geocoding of course if you want to have like longitude latitude a given point and you want to know what kind of feature is there also written as geodesism you can have that in map tile clouds we also have a service to host your own data so for
15:41
example your GPS tracks for example or any sort of geodesism data and then you're given an ID so you can fetch them like that and then you can display them on top of a map you can also have geolocation so geolocation is basically giving the location based on your IP so as I said it's not like
16:01
precise location like location of your own place but it's more usually at the city level so yeah and there is also an interesting API but it's maybe more advanced which for some of you who may know apsg.io here we are kind of giving a way to access the same kind of information so if you want to go from
16:26
from a source CRS to a target CRS for example WGS 84 longitude latitude to Lambert 93 which is the official French projection system you could ask our API hey what's the equivalent in another
16:44
system and you can also create all sort of static maps with all sort of options yeah so this is an example of static maps so on the left this is one of my personal bike rights I've done at some point so you can say okay I
17:03
have a path that I want to follow and it's going to be like of a given color and I want to add a marker for the start point and then you can automatically say okay I want the map to be centered around this path automatically and I don't want to bother like finding what's the
17:20
bounding box for it so you can send all this data and it's going to spit out the URL and your URL is actually this map you can do simpler shapes like on Portugal for example the bounding box of Portugal written like drawn in red or yeah basically all sort of maps and it's the same
17:40
the same styles that are provided in the SDK so winter outdoor streets or street dark or all these styles are available for static maps as well so we are kind of building an ecosystem around the map tile SDK and map tile clouds so we have recently been working on the AR control that extracts some of the map
18:03
with terrain we have geocoding control as well and we have been working on the weather weather layer that plays well with our SDK so I thought I would give a short demo of that so if you want to have weather layer so basically weather condition weather forecast for the next four
18:23
days or with how early how early snapshots replaced and refreshed every six hours that's basically how it goes so you have to import a map import layer for weather here for example the precipitation layer and and then that's how it goes you initialize your map you create a layer here we don't use
18:43
any option just the built-in options that's how they're with a default color map default opacity and so on and then when your map is ready you can add the layer to your map I also used to have a video for that so basically on the video yeah which is working you see all the clouds like
19:02
moving moving across Central America here and you can zoom in them out the data is provided by GFS and internally we work on that to make to make it possible to be used on the tiling way so yeah so there is
19:21
precipitation and then there is also pressure so in millibars or hectopascal again available up to zoom level three or four exactly and then it's interpolated on time so you could see like smooth smooth animation of the
19:40
weather condition he is like with radar so radar is nice for detecting cloud or dust or all sort of things so DBZ is the the unit yeah and so we'll have of course temperature and as you you can if you want have the
20:01
layer to be interactive in a sense that as you Hoover with your mouse with your pounder pointer you can have information about like temperature for example and he is also maybe not super obvious but like particle winds which is also moving and as you can see on the code snippet at the bottom it's fairly easy to create this wind layer so yeah and then one of the option
20:24
you have for any of these layer is to customize the color map so at the on the right side column especially on the on the lower corner you would see some actually not as the one from the middle actually the middle cone you will see some of the color map that are dedicated for specific usage like
20:43
radar in DBZ or temperature in centigrade but some of the color map like quite classic like jets turbidity and so on and very decent on so the usual suspects here and for some cases we thought it would be good to
21:00
work on some color blindness friendly color map so some of them that are labeled actually in the code source our color map colorblind friendly and yeah so we try to work on that as well to be a bit more inclusive because yeah that's not done enough I guess so yeah that's that's all for
21:23
my telly SDK
21:53
so so at the moment it's not something we have worked on but I feel like it's something that is definitely of interest and yeah at the moment the
22:03
connection to my telecloud is like not mandatory as I said you could have like a local system but then you would still have to go with the regular map Libre way of doing it so at the moment we don't provide yet at least snapshot of data or or at least I'm not really on this side of the
22:24
project yeah yeah so let's say you have your own tiles for example hosted on your server like your own data yeah yeah exactly so one of the yeah one of
22:47
the the examples here where that's here you see style my title dot winter but you can use the URL local like slash my server blah blah blah and then using the pattern like XYZ for example local style with your own source this
23:04
is entirely backwards compatible to my privilege yes so if you already have the source and the data source and you happy with it and you don't want to go with our offer that's totally fine we just provide styles that I know for base map that would that could be handy but yeah it's compatible with any
23:23
sort of data and same goes with custom layers like if you have tile layers for example with your custom data your own weather data for example yeah that's entirely compatible yeah supports what sir not yet yeah what
23:49
would be the use case with that for example the use case you would have full yeah I know yeah at the moment no but it's very much a work in progress and we are sort of at the beginning of it and so yeah we are gathering ideas
24:05
and yeah new features ideas yeah definitely all right thanks