NACIS 2016 Presentation
Katie Kowalsky, Mapzen
Cartographer meets map tiles. That infamous meet-cute has caused scores of love, commitment, and eventual heartbreak for all of us in web mapping. The technology behind tiles is constantly changing, growing, and expanding—but where does that leave a cartographer? Are the limits of raster tiles worth abandoning for the mysterious, bad boy vector tiles? This talk will impart the wisdom of how a cartographer’s quest for true love in her tiling scheme and possible workflows can adapt smoothly to a new relationship with vector tiles.
Before we talk about vector tiles, let’s talk about where things first got started in our map tile relationship real quick
First there was the raster tile.
If you haven’t built a web map, you’ve certainly used one and seen the effects of tiling from the way it loads in square sized chunks
This technology was great! And just like in print cartography where we have different purposes for raster and vector data, there are still some great things that raster can do (and more on that later)
We know these- they’re 256 x 256 px pictures of a certain place at a certain zoom level on a web map
They’re exponential! Zoom 0 has 1 tile, zoom 1 has 4 tiles, zoom 2 has 16 and so on…
Things were great for a while… until they weren’t
There were… pains to say the least when it came to raster map tiles.
They could be slow to load on screen
The way they’re built means they have to be re-rendered with every style change, that means a trip to the server every time.
Lo and behold, vector tiles happened.
Vector tiles are really exciting.
Because they’re so smart! Just like raster tiles were a smarter implementation of original web mapping, vector tiles are smarter versions of their predecessor.
Instead of a web server having to send a pre-drawn raster image tile, a Mapzen vector tile contains the OSM geometry for a particular part of the earth, delivered on demand.
It contains instructions on what can be drawn, rather than something already drawn and styled.
Mapzen offers a vector tile service
We separate our tiles, that geographic data I just mentioned, from our map renderer.
The data comes from Natural Earth Data, OpenStreetMap, and our own gazetteer, Who’s On First.
Because it’s separate, this can make things very easy to adapt to!
You can transition a project using raster tiles to the vector tile data source easily
Like all of our services, vector tiles are free, with generous rate limits
Vector tiles offer a lot more versatility than raster.
The most obvious changes being that they’re much faster to load and a smaller file size than raster tiles.
That’s awesome just as a way to reduce the time it takes a map to load on screen, but has some other huge advantages.
Not having to re-render tiles and go back to a server every time a design needs to be changed can allow for our maps to be quick change artists
The way we interact with base maps is completely changing!
For instance, we can add language support with our maps in a breeze! Using the languages stored in our vector tile data, we can switch between a local language and someone’s preferred language on the fly
When you’re travelling in a foreign city, like Tokyo in this example, you can easily transition the map from Japanese, which while is the local language, might not be what you can read!
Or instead of having to draw a data layer on top of a basemap with transit data, we can have that integrated through our vector tiles!
Being able to toggle on and off transit lines makes using a navigational map a breeze!
If we already have a ton of useful OSM data on a page, why add more data on top of that to show the same thing again?
We can also change the way someone interacts with a map
Being able to simply add 3d rendering in using building height information through a renderer like Tangram with GL technology changes the way we interact with basemap as a static image and now as something we can interact and even play with.
Mapzen’s motto is ‘start where you are’ because we want to meet you at your level of expertise for web mapping and help you build a better map
Having a difficult learning curve to a new technology isn’t fun and often limits our choices as cartographers
We want you to be able to access the full capabilities of vector tiles without having to compromise your workflow
That’s why our products are free, open source, and completely customizable!
We want you to build your own instances of our maps and products, to learn and create.
You can dip your toe into the realm of possibilities- or do a straight cannonball into something new.
I’m going to walk through some of the options:
What if you just don’t have the time to design a basemap? Let’s be honest, just getting a client to not want “something that just looks like google” can be enough of a struggle
We offer premade vector base maps!
We have some awesome house styles, using our brand new version 1.0 vector tiles
They range from base maps useful for navigation or information to ones suitable for data overlay to provide context
One of our newest base map is an outdoor style with hillshade rendering with our separate raster terrain tiles with the Walkabout style
That’s right! Even though we love this new technology, we still want to stay friends with our ex- through offering a raster terrain tile service and supporting raster in our renderer, Tangram.
There are multiple versions of each basemap, so you can dial the amount of labels you want
You can add this to a web map using Mapzen.js, our extension of leaflet
We have a tutorial how to make a web map with this in less than 30 lines of code!
Or we can design a whole base map and take advantage of graphics card shaders that can add animations and amazing details to a map
This is tron, our newest basemap style that was released last week
Inspired by the movie, Tron shows the realm of possibility in our renderer. Animating water, coastlines, roads, cars, is all doable and built to be reusable code through Blocks, our way of letting you play in GL graphics card programs called shaders without having to learn the nuts and bolts of GL
The attention to detail and ability to add animation to roads, water, and add 3-d rendering is just the tip of the iceberg for Tangram
But maybe you need to tweak something or want to get ambitious!
We’ve heard how great vector tiles are, but how can we edit them?
We can use a map renderer to take the data and allow us to style them- and there’s a whole realm of possibilities out there. From Mapbox Studio’s Photoshop-like interface to controlling the fine details of a basemap by writing code, playing with vector tiles can be done however you prefer.
To hit that nice middle ground of being able to see your map while editing and still be able to fine tune your design through code, there’s Mapzen’s own Tangram, which renders maps for the web, mobile, and even on your watch!
We have an editor, called Play, still in beta, but able for you to balance the best of both worlds when editing a map as you can see what you
Our official release is still coming out, I wanted to give you a sneak peek of play, so you all can start editing vector tiles!
Tangram is based on GL technology and lets you write in YAML (a little less code-like than CartoCSS).
You can load in examples or one of our base maps for tweaking things like the color of a park or the font size, like I’m doing with our outdoor map style, Walkabout
Or you can use D3, Open Layers, MapboxGL, Mapbox Studio Classic, whatever your heart desires!
You can take our vector tiles data service and use it with what you’re comfortable with in the format you like
This D3 demo can make an interactive web map with Mapzen vector tiles that doesn’t even need a GL renderer!
The level of customizability is astounding with vector tile data.
D3 makes it easy to generate a static map too, which is great for an export to SVG for getting vector data into Illustrator!
We have a tool for exporting to SVG from D3 using our vector tiles service, made by the awesome Rachel Binx
So you can make print maps in Illustrator, Inkscape, or whatever your heart desires!
Vector tiles offer fabulous rewards, especially when combined with the magic of GL. We can start slowly integrating new technologies into our workflows.
You can use one of our premade base maps, edit it with Tangram and our editor that’s going to be released soon, or play with it yourself in D3! You can even work in print maps with vector tiles through our SVG export tool.
But when it’s free, open and accessible, what’s stopping you?
There’s a reason our beta editor is called Play after all!
Starting a relationship with new technology can be tough. Sometimes there are growing pains, frustration even- but by taking something new- like vector tiles and using it at a level that you feel comfortable with, we can start to take advantage of the new service and find love in the end.
At Mapzen we’re working on seeing what’s next for vector tiles and map rendering on the web. Come talk to us and see what the future holds!
Thank you!
Read about all of our new vector tiles updates on our blog, come say hi and get awesome point of interest stickers from one of our base maps!
