How to make a crafty Vector Tile map: Custom tiles, the perfect sprite, animating stuff and random hot air balloons!
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 | 295 | |
| 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/43579 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
00:00
Vector processorComputer iconWeb 2.0Universe (mathematics)Visualization (computer graphics)Computer fileOpen setTesselationSymbol tableLevel (video gaming)Presentation of a groupPolygonLink (knot theory)Polarization (waves)Sound effectSlide ruleCodePixelMereologyInternetworkingPointer (computer programming)Line (geometry)Text editorComputer fontOpen sourceMappingClique-widthBitNatural numberCombinational logicDot productFeldrechnerPoint (geometry)Spectrum (functional analysis)CuboidPosition operatorObservational studyChannel capacitySinc functionDegree (graph theory)Numbering schemeError messageForcing (mathematics)WhiteboardPattern languageComputer animationLecture/Conference
07:02
Random numberLevel (video gaming)FeldrechnerMereologyDot productComputer clusterSquare numberBitGraph coloringCodeComputer iconMathematicsDefault (computer science)RandomizationWeb pageVolumenvisualisierungMultiplication signAnalytic continuationMappingPoint (geometry)2 (number)Total S.A.Interactive televisionMathematical analysisWeb browserLine (geometry)Texture mappingHost Identity ProtocolSound effectSampling (statistics)Open sourceMetropolitan area networkCoefficient of determinationChemical equationSpacetimeNetwork topologyComputer fileWebsiteCartesian coordinate systemExpert systemChannel capacityScripting languageLibrary (computing)Heat transferFreewareLecture/Conference
13:58
Convex hullRandom numberVideoconferencingLevel (video gaming)TouchscreenGoodness of fitAreaLink (knot theory)MappingInterior (topology)Moment (mathematics)PlanningLibrary (computing)Hydraulic motorBitPresentation of a groupProjective planeMereologyCodebuchDiscrete groupNumberLabour Party (Malta)BuildingWebsiteRoutingDifferent (Kate Ryan album)Multiplication signView (database)Asynchronous Transfer ModeSound effectCircleMathematicsObject (grammar)Medical imagingKeyboard shortcutSoftwareOpen setReading (process)CodeUniform resource locatorReal numberOnline helpSoftware frameworkInheritance (object-oriented programming)CuboidLecture/Conference
Transcript: English(auto-generated)
00:11
Thank you. Welcome, everybody. My name is Nina. Hi, Mom and Dad.
00:20
Really quickly, I did a year at Art Academy, then I went to university and I really studied geo-information science, and now I became a web cartographer, so really quickly about myself. I work at WebMapper, which is a really small company in Utrecht, the Netherlands. We make geo-web visualizations. We combine data, design and technology.
00:45
We do everything open source. We use a lot of open data. I think that's it. So this presentation, I'm just going to show you some really cool maps, and I'm going to give you some tips and tricks on how to make creative things with vector tiles.
01:01
I'm going to do that, showing you four maps examples. These four. About those maps, they're made by me, so I did all the creative things on that. I use Mapbox.GL, so I'm not going to elaborate on that. Our tiles come from Kartico, which is a vector tile stack that we build ourselves later on that as well.
01:22
I make all my fonts and sprites myself. If you use your own tiles and your own font sprites, you don't need anything hosted on Mapbox, so no access tokens needed there. If you want to follow along, there's a lot of links in this presentation to tools and stuff I use.
01:40
You can check my slides and click on everything. The first map I wanted to show you is a map called Paradise in the Polar. It's a really artistic map I made. I wanted to start out with the first step takeaway. When you want to make a creative map, you have to know your tiling scheme.
02:01
You have to know what are you working with to make it easier for yourself to experiment with the creative part. We built Kartico. This is our tiling scheme. It's a consistent style stack, accurate, simple, it works fast. It has really easy, understandable layers and naming.
02:23
My colleague is going to talk on that later today at 11.20 in this room. He's going to explain all about the stack. If you want to know more about this, then check that out. I'm just going to show nice pictures. I always code my map, so I do everything in my text editor. That's also what I wanted to show you.
02:41
I have a little code example, so I really hope that this will work. You see my map and you see the style JSON. The fun thing is that if you have a really easy stack, like now I just made everything green, which is natural, I could just change it into, for example, agricultural.
03:07
It changes to everything, which is agricultural. I like this, that you can just really easy names to style. Next step, I'm just going to code that and unlock this part.
03:27
What I did, I took the natural layer and instead of filling my polygons, I took a little icon and I put it on the lines. It just randomly renders this icon on my lines. You get this really cool effect.
03:41
I just love coding stuff because I can just copy my things. I can add it in. I have to give it a different name. Then we're going to do the same for agricultural. Yeah, well that's coding, no?
04:04
Let's just give it a different opacity and maybe the icon size could go up a bit. You get a whole combination between the nature and the agricultural dots.
04:21
It's rendering a little bit weird, maybe it's too big. Let's just make it six. Having an easy, understandable tileset with coding your own map makes it possible to create really creative stuff in a fast way and also just play around with it a lot.
04:42
The next takeaway is, a polygon doesn't have to be a polygon. That was one thing that I discovered when I was making this map. I used a little fill symbol on the lines instead of filling my polygon. I think that's also something that I really discovered for myself. I don't have to style a line as a line or a point as a point. You can do other stuff with it as well.
05:02
That also brings me to the next thing, use sprites. The little green icon is a sprite. I'm going to show you that with the next map, which I made completely out of sprites. Take me to 1943. What is a sprite?
05:21
Mapbox.GL works with sprites. It's a build-up out of two files. You always have a sprite.json and a sprite.png. Check out the Mapbox pack about it. There are some tools and tutorials on how to make icon sprites. You can turn your SVGs with sprite0 into a sprite. That's also what it's normally used for.
05:40
This is one of the sprites from Mapbox, and it's used for making these icons. You can also use this, not only for icons, but for fields, for symbols, for background patterns, a lot more. That gives you the ability to do this visual effect in your map.
06:01
Then you'll have to make them by hand. This is the map. Check it out. It's from the whole Netherlands. It's completely made out of these sprites. The Internet's a bit slow. This is a sprite.json, for example. You can look at the specs from Mapbox.
06:23
You give your little picture a name. You say how much pixels width and height it is, and then at which x and y coordinates in your picture, the smaller picture is. My sprite.png I make with him,
06:40
which is an alternative Photoshop. I always start out with a blank canvas, and I just paste everything I want to use in my map design onto that canvas. Then I'm finding the coordinates with the pointer dialog, which is a panel in him. You can just use it. You draw a little box, and you get the x and y position, and the width and height in pixels.
07:01
I add that manually in my text editor into the JSON. Then I export my canvas as a PNG, of course. Give it the same name, and it works. For this map, this was my inspiration. There are war maps from 1943. I really love that map, so we tried to remake it
07:22
with the modern data. I noticed it has a legend. Actually, this legend is so cool, because all the little roads are sprites by themselves, I thought. What did I do? I just copied the legend, and I went to use this one as my sprite. This is in him. I just zoomed in, and I just made a little square
07:42
about which part I wanted to use for the road. I cleaned it a little bit up, because the picture was not that sharp. You can see I cleaned it, and I just used a little bit of that. If you want to check out those files, I called them legend.png, so if you open up the application,
08:01
you look behind what you're going to get, you get the legend as well. This is a sprite that I made for another map. For the previous map, actually, I'm only using the green icon now, but I just throw a lot of experiments and stuff in there and try to play with my map design.
08:21
This is a sprite for another map you're going to see soon. That takes me to the next tip. If you know your technology, you know how things work, you can change it, and you can change the defaults. That's always what I tell if people ask me, how do you make those beautiful maps? Just change the defaults, change whatever you can, just make it slightly different than the defaults are,
08:41
and you'll get there pretty quickly. The next map I wanted to show, we made this map for customer liberation map. What I really wanted to do once
09:00
is have those random, hand-drawn coastline effects that you see in the old maps, and there's this really nice, blurry edge around all the coastlines. It's actually really, really hard to render this with the data that we have, with any kind of vector total data out there. That was my challenge, and it's not working.
09:23
There's supposed to be a map here. It did work before. Let's give it a second.
09:46
I'm also afraid to change, to reload, because I'm not sure. Oh, I clicked somewhere. I'm sorry. You can check it out at home.
10:03
I'll just quickly explain, because you can see it in the background, what I did. I'm just going to stand here. It's not that clear on this one either. There are actually three coastlines with three different colors in the back. It's really, really hard to render these lines with blur and opacity,
10:20
because you get all kind of weird render artifacts that have spikes and shit that overlaps each other, and it's ugly. I found out eventually that it would just do not put too much opacity, just a really little bit of a blur and three colors. Then I put those dots on top of it, and it kind of mixed, because your mind just makes it blurry by itself.
10:43
Putting those dots on top of the coastline layers made a visual blend on the coastlines. If you check it out for yourself, it's also the codes. You can see for yourself, play with it. It's really fun.
11:02
That's one of the tools I used, a color blender tool. I really love this tool. It's an online tool. You can throw in two colors, and it blends. That's also what I did for the coastline. I picked some colors, blending the blue to the land color.
11:23
Visually combine those layers. Also, my dots were kind of an accident, so I really like the hip. Putting those dots on top just gives a visual blend, and I think that's also the power, that if you combine more transparent sprites and layers,
11:40
you can create awesome stuff. That's also what I do. In Mapbox, you can create a background layer, which covers your whole map. I use this a lot also on top. I have a transparent texture with a grain, a paper grain, and I just put it on top.
12:02
Check out transparenttextures.com. They have a lot of really awesome textures you can download. I'm going to move fast, and my sample is not working anyway. Last map, the crafting map. I really hope that the balloon is going to work. So what comes after styling is interactivity with JavaScript, which is so fun. This is CSS.
12:24
So combine those libraries, and what I, for example, use is Turf, which gives you the ability to do some geospatial analysis in your browser. And I'm creating random dots with Turf. I'm asking my map bounds, and creating a layer and then inserting it into my style.
12:43
And the balloons are not working. Okay, I'm just going to refresh because I hate this. It's called hot air. No, stay on page. They're supposed to be mapped on random hot air balloons. You can go to it yourself, and then you can put the slider, and you can go up to a thousand air balloons on your map.
13:16
Yeah, okay, I'll continue. We'll go back, check it later.
13:21
Anyway, then also the little air balloon is in the sprite already. Oh, I hate this. Use those map events, and it's really fun. And I also did it in this map. So there is a coffee stain. I think it's here. Yeah. So every time, so now it stays in one spot, so every time the point goes outside the screen,
13:42
it's going to be redrawn somewhere else. I think now it's here. So it's a really, really small thing, but I think it adds to the feeling of having an old map. And it's a nice search every time. It's right in the middle now. You can never get rid of it.
14:01
Anyway, it's also in this legend. See, I added it there. So this is the code. Check it out. I'm going to go more fun. Okay, so really, really fun, but I had also this question, like, I can't read this label, where are my reading classes? And you can use the same technology to do something useful with it. So here is supposed to be a map,
14:22
and you can increase the font size. So it scans your whole style and takes all the text layers and just increases the font size, so you can drag this number up and down. Check it out yourself. It's horrible it's not working. So making a good map is more than designing the map. It goes beyond, use JavaScript libraries, add stuff on top of it.
14:44
How much time? Because I have a little bit extra. I just made this last week, and this one is working. So I was playing around with MapboxGL, and I tried, oh, CSS blend modes is awesome. So here I used a CSS blend mode on the MapboxGL map,
15:02
and it actually works. And I love the effect, and even if you press L, you can just play around, and there's different blend modes on the map, different blend modes on the circles, and also different blend mode between the circles. And, yeah, I love it.
15:20
You play around with it, press the L on the keyboard, and then you can do the bubbles. Don't ask me what the L is for. So that was the last takeaway. Go even further, and use also maybe like CSS, pre-creative, and we have knowledge, we have technology,
15:40
you can have a lot of experience, but making a nice image in the end just really comes down to creativity, and I just love this one. Okay, okay, I'm done. So this was my presentation. I made it with Reveal, Idil, Mapbox, React MapGL, Code sandbox, everything. Everything is built on top of Cartico. Check out the presentation of my colleague later on today.
16:02
Check out me if you want to see what I do, see more maps that I made. You can follow me everywhere online. Okay, questions. I'm sorry that didn't work. Oh, oh, oh, yes.
16:21
It loaded. So we can increase, and you do have to reload it, and it just makes new balloons every time. It's awesome. So you want more balloons? Oh, yes, okay.
16:46
Awesome. Thanks, Dina. Thank you for a map full of hot air. And I want to ask you, can you please put the URL when people can try this at home?
17:02
Because I know that we only have the video, and I think lots of people watching this from home want to see this on their screen, so thank you very much. And now I think we're open for questions for a few minutes.
17:28
On one of your screenshots, I saw that you populated the build-up area with little houses. Yeah. Do you have that code somewhere as well? Yeah, so all the maps,
17:41
there is the GitHub link and the code box link, so you can check all the styles out. They're all online. And also the sprites, so you can steal it, use it. Any other questions? Any more questions?
18:03
Super nice presentation, thank you, despite all the problems. I wanted to ask you if you ever... I personally totally agree with you. Creativity is awesome, and I think we should try to... There's the software part and technical part, and then there's the creativity. And I think when these two meet, then it's really amazing.
18:23
And I wanted to ask you if you ever had 3D projects, because I work a lot in 3D and I do a lot of creative stuff in 3D, and I was just curious if you guys ever had this or you just stick to the 2D land with your projects at your company. So real 3D, no, but I did do, like, in the Mapbox GL, I can do the extrusion, so I made a map of all the buildings in the Netherlands
18:41
that are extruded on their height. So that's, I think, two and a half D officially, but people think it's 3D. Yeah, I think that's in the background of this one. Yeah. So, yeah, 3D, no, but I would love to experiment with that, but I have to learn more.
19:01
Yeah, sure. We still have a tiny amount of time for one more question. It's not a bother, it's more a comment than a question. I have friends at the France National Heterographic Institute who are working on recreating the Cassini's map from the 17th century.
19:26
And I think when we saw your presentation, we would get so pissed, because we tried to reproduce it the old way. So we have maps and objects in databases, and we run our stuff,
19:41
and you do it so gradually, and say, okay, I take that, and let's do Spite. I think we would get so pissed, say, oh, shit, we don't think about that. Yeah, thank you. I can come help you out. I want to make a very quick question of my own. If you could meet new special people who make these kinds of visualizations,
20:01
frameworks like Mapbox, OpenLayers, Leaflet, and so on, and ask for one feature, what would that feature be? What feature technically are you missing that you think could squeeze into more hot air? So I think what would be easier,
20:21
like now we can just upload one Spite image, and I would love it if you could just add multiple. So sometimes I want to reuse stuff from previous sprites that I made, and I have to do all the himp and manual editing again, so that might make it easier. So last week I was experimenting with the CSS blend mode, so it would be awesome if we could put the blend mode on layers,
20:43
because this was on the whole map, and you cannot do it on a layer. That would be awesome. We could make funny stuff. So thank you very much, Nina. You're welcome.