Vector tiles cartography tips and tricks
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 | ||
| 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/69030 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Year | 2022 |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
FOSS4G Firenze 2022214 / 351
1
7
13
22
25
31
33
36
39
41
43
44
46
52
53
55
58
59
60
76
80
93
98
104
108
127
128
133
135
141
142
143
150
151
168
173
176
178
190
196
200
201
202
204
211
219
225
226
236
242
251
258
263
270
284
285
292
00:00
Vector spaceLevel (video gaming)Zoom lensPolygonLine (geometry)Point (geometry)Client (computing)Codierung <Programmierung>Open sourceSource codeVisual systemRevision controlMetadataFormal languageDefault (computer science)Water vaporText editorInfinityForceFormal languageMedical imagingNumberCategory of beingSheaf (mathematics)InfinityTesselationFigurate numberProbability density functionVector spaceTessellationType theoryLevel (video gaming)Open setView (database)Graph coloringBitRow (database)Open sourceSocial classSatelliteProjective planeMachine visionLatent heatLine (geometry)Computer fileText editorPoint (geometry)Zoom lensPolygonMetadataSource codeGeometryMappingNatural numberTheoryCloud computingRaster graphicsWikiSquare numberPhysical systemDifferent (Kate Ryan album)Client (computing)Web browserMusical ensembleBinary fileWeb 2.0Default (computer science)TouchscreenComputer animation
05:03
Level (video gaming)MappingStandard deviationResultantPoint cloudComputer animation
05:50
Line (geometry)Clique-widthInterpolationLinear mapTrailCategory of beingLevel (video gaming)Reduction of orderLine (geometry)SoftwareAttribute grammarNumberInflection pointZoom lensExpressionInformationCASE <Informatik>Stylus (computing)Overlay-NetzComputer animation
07:17
State of matterScaling (geometry)Overlay-NetzComputer animation
07:47
Order (biology)CASE <Informatik>Graph coloringMobile appPoint cloudLevel (video gaming)MappingStandard deviationComputer animation
08:38
State of matterLevel (video gaming)CASE <Informatik>SoftwareMobile WebTransportation theory (mathematics)Variety (linguistics)Focus (optics)Inflection pointPoint cloud
09:16
Computer fontHill differential equationLine (geometry)Clique-widthComputer iconComputer-generated imageryTesselationGraph coloringLevel (video gaming)Medical imagingParameter (computer programming)Form (programming)Computer iconLine (geometry)Category of beingLatent heatVector spaceComputer animation
09:58
Source codeForestNetwork topologyGrass (card game)Acoustic shadowInterpolationActive contour modelChemical equationRange (statistics)Slide ruleCASE <Informatik>Process (computing)Link (knot theory)Point cloudLevel (video gaming)Line (geometry)Acoustic shadowNetwork topologyCovering spaceTesselationZoom lensDrop (liquid)Scaling (geometry)ForestGraph coloringGrass (card game)ResultantCategory of beingBitSocial classSound effectSource codeTessellationDemo (music)GradientField (computer science)Attribute grammarComputer animation
12:47
Library (computing)AdditionLevel (video gaming)Order (biology)Revision controlGraph coloringLattice (group)Discrete element methodMapping
13:31
Head-mounted displayArmCAN busAbstract state machinesBinary fileState of matterExpressionWebsiteGraph coloringProjective planeLevel (video gaming)Matching (graph theory)Library (computing)SoftwareArray data structureTesselationHome pageGroup actionRight angleRevision controlPolygonNatural numberLatent heatComputer animation
14:49
Source codeDigital filterPolygonPolygonLevel (video gaming)Flow separationGraph coloringMultiplication signTesselationZoom lensCategory of beingThresholding (image processing)Population densityField (computer science)
15:26
Field (computer science)UsabilityDigital filterComputer-generated imageryComputer iconInheritance (object-oriented programming)Symbol tableLibrary (computing)FingerprintSource codeClique-widthVector spaceLevel (video gaming)Position operatorField (computer science)Medical imagingSheaf (mathematics)Category of beingMereologyOpen setPoint cloudTessellationComputer iconScalabilitySymbol tableVector graphicsSocial classSingle-precision floating-point formatSet (mathematics)MappingTesselationComputer animation
16:57
Symbol tableSource codeDigital filterComputer-generated imageryComputer iconFlagGreatest elementMaß <Mathematik>Nichtkommutative Jordan-AlgebraMedical imagingComputer iconFlagLevel (video gaming)Computer fileZoom lensDemo (music)Core dumpAttribute grammarTessellationComputer animation
18:13
Vector spaceFluid staticsRaster graphicsCoding theoryOpen sourceSign (mathematics)FreewarePoint cloudMultitier architectureStandard deviationOpen sourceMappingLevel (video gaming)Projective planeSoftware testingFreewareDemo (music)Link (knot theory)Fluid staticsTessellationInformationClient (computing)TesselationOpen setVector spaceRouter (computing)Library (computing)Bookmark (World Wide Web)Special unitary groupRaster graphicsPoint cloudComputer animation
Transcript: English(auto-generated)
00:00
Thank you, okay Hello, everyone. I'm Nicolas from the map Tyler team so at map Tyler We develop global satellite and street maps and run the map title cloud platform That makes it easy to use and customize them so today, I'm going to present some of these maps and then
00:22
Give a few tips based on simple Cartographic examples so before that Please sorry let me start with a bit of theory about the vector tiles technology, so vector tiles usually come in the
00:40
Mercator reference system It's convenient because the entire planet can just fit in One square at zoom level zero so then each tile can then easily be split into four smaller tiles and at next zoom level Each tile can be found at the
01:01
Zxy address so that is for zoom X for a colon and Y for a row And So it's so far pretty much similar to to raster tiles right the the real difference is that geometry
01:20
Vector geometry are contained in the in the vector types such as point lines or polygons and The tiles keeps just data not not style It is also very lightweight so unlike raster tiles that are served That returns PNG or JPEG or webp images
01:45
vector types are served as a binary file so that the PDF and these PDF files are very small so therefore it uses less bandwidth and and Allow for faster performances So I can give you a few figures from our
02:03
Map Tyler data website from which you can download such vector tiles So talking about the open street map vector tiles the full world is just 100 gigabytes The Italy the extract for Italy is 2.6 gigabyte
02:23
Whereas the Florence metropolitan area is only 40 meg. So, you know, it's much much Light lightweight compared to raster tiles The style itself for tiles is honored on the client side
02:41
So there is also the open source vector that schema that defines which data is included in the in the tiles So All our maps at map title Clyde rely on implement this this schema And the open up tiles project allows to select which data
03:03
To include in the tiles for which zoom levels and how they would be generalized it also defines the Class names that will be used for for cartography So open map tiles uses open street map natural earth and wiki data by default, but this can be applied to any
03:25
vector GIS data So there is no style in vector tiles and we want to give them a style That defines the vision that will define the visual appearance of the map. The map style is defined in a style JSON file
03:42
Which things which syntax sorry is based on the map of jail style specification This file contains various section such as name metadata sources Grief etc. Today. We will be mostly looking at the layers section where the map layers are defined and their style properties
04:00
to The style can become quickly become quite verbose So one good practice is to try to keep the number of layers and does the number of lines lower as possible
04:21
So you look at it don't have to write the the style decent by hand One would rather start with ready-made Map style and and start to modify it in a style editor in the web browser. So at map Tyler we call it customized and This tool let you change the colors as you can see on the screen, but also fonts
04:46
preferred language and world view with a few clicks So basically you can you can create an infinity of map style using the same tile set quite quite easily really an infinity of map style because
05:07
Map Tyler cloud maps map Tyler cloud offers offers a dozen of standard maps Each of them has two of or more presets That you can use to stop designing with
05:23
so moving The HSL slider that you can see on the left let you the unchanging the phones and and so on let you create style variants and the appearance of the map is updated Live so that let you iterate and test and see the results in a very easy way
05:50
So here is our basic map style the most simple actually It provides a lightweight and informative
06:03
Base map specially designed to overlay your own JS data on top So the map reader won't be distracted by many features or pois So it has recently The basic map has recently
06:21
Been updated in a new basic v2. So it was much Simplified we try to reduce number of layers. So only 25 remaining and the style design is around 700 lines So it offers it is now easier to use and offer even faster performance
06:44
So for example, you may appreciate how the world road network Is mapped using only one layer So the using the power of stylus expressions in this case the the line width property
07:01
Is set according to data attributes or motorway or primary or or secondary? but also Interpolated across zoom level. So the more you zoom in the thicker road lines or So the basic map style is also available through dark and light presets
07:22
That you can also use in the customize and then and then modify This is what we do. In fact to prepare such presets We would fiddle with the HSL slider until it look as we want So dark versus light both are very well suited to make your data overlay shine at every scale
07:46
There are different presets proposed for each standard map in my title cloud There are two other maps that I want to show Which may be switched according to the season so
08:02
summer versus winter so our outdoor map uses green and sunny color tones Whereas the winter map is tinted with the icy blue and and wintry colors in this particular case The data layers are also changing so hiking and biking trails in the order map
08:25
Versus ski resort and slope in the in the winter map so you can in if you have another app you can switch depending on the season So that would be a seasonal presets presets And then there is our street map style
08:41
especially designed for mobility and transportation use cases It provides a rich base map Focused on I mean suited for itinerary or Navigation apps it features it highlights roads and transportation networks as well as a
09:10
Cloud account and it also comes with dark and light presets So this is how we present The street style and any other in its simplest form
09:22
so basically Only few style properties can can describe the style such as specific fill or line color line with text color icon image Of Course there are many others parameters to take into account when mapping vector tiles
09:41
But this may bring the cartographic simplicity brought by vector tiles to your attention. I mean colorimetry Iconography and typography are just the foundation of a successful vector based map So the Street style is also being modernized and simplified currently
10:04
So it will also soon land in the map title cloud. That's street v2 In this slide you can for example see how the global land cover is mapped using only two layers So the landscape layer
10:22
first Assigned color to crop scrub or grass if it's none of them, then it will be white for ice and Then a forest layer is overlaid on top and just shows the forest and trees classes
10:43
So there are many other thing we can we can do with the with the field property In this example from our labs so you can access the demo at the link on top of the slides We try to create a land drop shadow effect by overlaying two fill layers
11:05
So the land shadow fill layer is placed below the landfill layer and it's translated a bit To create that that drop shadow so you can see the translate is changing according to zoom level as
11:21
well We also could add an extra line layer using the same land data source of the tileset But we've within a line layer and Try to create a glow an additional glow around the coastline to to emphasize the the drop shadow
11:42
So this would be done with a line with and line blur properties That needs to be adjusted So here's another example taken from our Map Tyler ocean based map which will soon be released in that in that title clouds as well
12:03
So it relies on a new Tile set that imagery tile set a process from the global bathymetry data So in this case the depth attributes which is contained as in the tiles is
12:22
colored by value ranges at small scale and then according to Individual depth value at larger scale so blue colors are also interpolated across zoom levels and That result in a beautiful blue color gradient
12:43
Which color can of course be changed so this is what we did to create a custom version of this ocean maps so here more vivid colors are used and An additional
13:02
Batymetric ill shade layer is overlaid in order to Highlight the seafloor mountains and and Canyon so using that same terrain RGB Tilesets within a rusted DEM layer
13:21
We can also visualize the the ocean in 3d for example using the lattice version So this is another example Created for the map Libre quick start example. You can also see this simple map on the project's home page
13:44
so here we try to mimic the look and feel of the Political map that used to be aimed on the wall of the of the geography classroom So Simple country tiles available from the natural of project were up tiled using the map Tyler desktop software and
14:06
Then colored with this match expression you can see on the right hand side So here countries world countries were randomly splitted into multiple arrays and each of the Each group of countries was assigned a specific color
14:23
So that's a very simple way to feel polygons And yes You can you can see the full study decent on the map Libre website to see How it is done in in more details so basically to see more of the of the Jason
14:51
So my last example for the field color property features a choroplet map Which is creating using the population data of the Czech Republic
15:03
So here population density for every municipal polygon Is contained in the tiles again and in the map style several several Thresholds or are defined with a color code each time and then interpolated
15:21
Across zoom level again So I said in the beginning iconography is also an important part of vector tiles cartography they are usually Created as scalable vector graphics and then turn into a single sprite image
15:44
so in this example most of the OSM Carto icons Were scaled and turned into a sprite image. It is not it is now Used in our open street map map style that you can also find on the on the cloud and
16:02
Because the open map title schema is using the same Classes and subclasses name as open street maps all we have to do here is to Use the subclass you see it's bolded on the in the Jason use the subclass as the icon image
16:21
value and then the the icon will Magically show up of course there are additional setting that are necessary to Adjust the icon according to their the position of the icon according to their respective labels and The labels are added using the text field property so you can see the full sprite PNG image
16:51
On your map title cloud accounts in the symbol section of the map So my last example is also about icons so again
17:03
Please visit the demo you know at labs at my pilot comm if you want to see it live The same approach is used here, but for mapping all the the flags of the world countries So the latter are also available as SVG's a turn in the in the image sprite
17:25
But each SVG file is named after the ESO a2 attribute which is also Contained by the map title planet or map title countries tile sets so hence we only same thing we only need to
17:42
Use the ESO a2 Value for the econ image and and flags will show up Here econ size And core and offset are also Modified according to zoom I mean to provide a seamless smooth zoom in so they would they would scale
18:04
As you as you zoom in So you can again you can see the the details on the under demo So please let me conclude by saying that
18:21
Anyone can become a cartographer using my title cloud I want to invite you to create free account and and test it by yourself You could even reuse some of the example I gave today once published all the standard or custom maps or immediately made available as a
18:45
vector tile style G Sun XYZ raster tiles WMTS and static maps API So that let you use the map in many ways and and with your favorite Clients such as map library open layers leaflets or QGIS
19:06
So please find map Tyler's the latest open source contribution at this link and Open source project you can also of course find many of our information about us on map Tyler
19:21
and I thank you very much for your your attention, and I'm happy to answer any question