 Hey, how's it going? Thanks for staying for the closing minutes. This is basically just a talk about the thing, but also a little bit about this crazy idea of maps and how exactly they work and the things that you see that you don't usually realize that go into them if you want to follow along the URLs right there. So this weird hexagonal signal that we've redesigned a few times means Mapbox, which is a company in America. And it's basically 30 people in a garage and, well, 10 of those people around the world, two dogs. We do open source tools. So this one in particular was kind of our own energy plus a grant. And they're relatively big open source projects that we hope that a lot of people use. And in a lot of cases, people do use them. And then also, the part where we actually try to feed ourselves is in cloud hosting of maps. But what I'm talking about is tile mill. So it's an open source tool that we designed for creating tiled maps that makes this relatively tricky process somewhat more approachable. And it's really to modernize the idea of cartography. Cartography is, of course, ages old. As you would read downstairs, Mercator invented the projection for sea captains to navigate their ships. And now it's very popular on the internet. But for the first 25 years or so, maps didn't really change very much because there are only three or four companies, which were all kind of boring. And then Google changed maps tremendously within the realm of about two or three years. And then a lot of companies finally realized that this could be like a creative realm. Part of the problem with maps is that people view them like fonts. They don't see them as kind of movable, mungible things that you can design. It's more like just choosing which font. It's also a thing that you can download and you can use and learn. How we made it was that the Knight Foundation funded a 2.0 version, which we converted into coffee, tears, and thyme, which eventually yielded code. It looks like this. If you're a programmer, you could think of it as a REPL, like a read, eval, print loop in which you write stuff. It reads it, it creates a map, and you're able to know what you did right, what you did wrong, whether it looks ugly, or whether it doesn't. And it's very, very simple. It's meant to be kind of like a Microsoft paint for maps more than an opinionated tool, which really comes out in the fact that we just sent it off into the wild. And a lot of really unusual things that we wouldn't expect came back, which is super exciting. I get to see a lot of them. But first, why? So we started making maps. Development seed predated this company, and they did a lot of big data portals. It was in DC. You just get sucked into it. It's like being in LA. You have to work on movies. So we worked on NGO and government type stuff. And all of this involved maps. Because maps are obviously, they're one of the most simplest visualizations that you can convince yourself to be true. Because if you look at where you're standing on the street and you zoom out and you zoom out more, then you imagine that being a map. Of course, it's a sphere, not a map. But the same thing doesn't really happen with other types of things except for stacks of money. But the thing that we ran into is that maps are kind of a heap of technology and concepts. They're like a very, very deep topic, which takes a really, really long time to learn. We found that cartographers had to be kind of like these geniuses who knew about really arcane data formats and file formats and math and geometry and languages. We've launched a few maps in Arabic. And it's really hard to do line spacing and breaks in Arabic, especially when nobody knows it on staff. And just crazy stuff. And so the process really used to look like what you would picture when you're kind of up at 2 AM trying to finish a coding project. You have like 40 windows up. And you have errors in some of them and not sure which ones are current, et cetera. It was also, yeah, it was just a technical heap. It was terrible. Which makes it extremely hard to actually turn this into something that's sustainable or encourage more people to do it. Because you know that there's so much pain. And you have to hire somebody who wants to work for six months just struggling. And so kind of on that point, here's the part where I actually have an opinion. There's this question that was asked, thank God. It's so much easier to talk when you're being asked a question. What are we missing because of the tools we're using? I think the main thing is voices. Not to be all kind of like, we are the world about it. But the real problem that I see with visualization is that Sophie Pughill do it. And the visualization that people do do is so limited. If we talk about people being able to understand nothing more than a bar chart, we should really think about what people have actually made. Most people have only made bar charts in Excel. And it's very, very hard to understand things that you have not actually made. This is why we do master's paintings in art class. It's because you're mimicking the creation of a thing in order to understand the thing. And you don't get there just by browsing InfoVis sites. And so the idea behind TileMill, for instance, is to make more map makers. It isn't like it is the most powerful tool in the world. It's more that it makes something that is previously something for 30 dudes with MacBooks into something that thousands of people can do. So maps, what are they made of? Let's see. This is the first time that I've used Spaces feature on my computer because it's really terrible. Maps are, I made this infographic. This is how maps are made. The world is a sphere. And we crunch it up onto a piece of paper. And that's what we call a map because the problem with spheres, obviously, is that you can't see behind them. And so you can't, you know, you got to do it. And then beyond that, they have to be multi-scale. So we take one tile and a tile, meaning 256 by 256 pixel image. And so this might look like that, very, very simple. If you go in one zoom level, it's four tiles. If you go in 2, 16, 256, then the numbers start getting very, very large. And then you're very, very close to a thing. If you're a math nerd, this is just two to the power of z. It's really uninteresting. And so basically, these are the two operations that you have. You have just data. You're turning it into a flat surface. And then you're doing something that's extremely multi-scale about it. And by multi-scale, I mean that at this level, we're only seeing countries. At this level, we're seeing countries with names and then borders and then streams and then towns, major highways, slight highways, buildings, residential streets, railroads, and then finally, building names. Google Maps usually shows about three levels of roads at a time, which is super weird because you never really realize it until you think about it. Anyway, so the principles of how Tile Mill works, it's basically made to be not scary. The main problem that we saw was that previous things were scary. And so you can either try to make things non-scary by putting lots of knobs on them, or you can try to make them familiar. Tile Mill tries to make it familiar by making maps seem like building a web page or working with a spreadsheet. It was also all about just being really, really simple and to make things look pretty and to really treat maps as just kind of drawing. And then I feel like I would be derelict if I didn't say the word D3 at some point in the stock. The end result of Tile Mill is images. The reason why is that the image on the left is made from one megabit of data, and the image on the right is made from 400 gigabytes of data. And your browser can read both of them, which so just to prove that this isn't just kind of a personal grudge against D3 because it's the best. I've recently been building this, which is a D3 map of the world that you can edit and you can change things. And you can just vandalize this data a lot if you really want and then save it to OpenStreetMap. I won't because I have a reputation on the internet. So images, because they're simple, because they're images, computers, love rasters, they're square. The process, this is the first of my embarrassing pencil drawings to be in this. You use Tile Mill on your laptop. And so I was actually going to do this run through, but I feel like it would be better just to do it. So I think, as Sean said earlier, after you work with something for a while, you get quite bored of just working with the normal stuff. So instead of doing a map of places, I'll do a map of stars. There is this really, really excellent, let's see. I have this somewhere. This is kind of the bad thing about working in temp directories all the time. And if this doesn't work, I can always just use the cool stuff, which I will call 0.03. Oh, OK. Here we go. Just needed a projection. So right now, these are stars, but they're on the world. Obviously, that's not real. There is no world on stars. They don't really have much to do with each other. They're subsets. So I'll just make them stars on a black background, make this window really large. And as you can see, it's basically like an interface in which you can take data and styles on the right and turn them onto pictures on the left, which are extremely, extremely multi-scale, with this metaphor of zooming, just ruling everything. And so these stars have a little bit of data attached to them. Speaking of which, this is from the AstroNexus project, which is incredible. It's just like star science nerds. I love them. So I'll just make all stars with color greater than 0, make those cyan. And so now you can kind of see these basic things that we can understand about stars. And then let's see. What are they? So this also has names. Soul, I mean, I'm not an idiot to say that soul is the sun, right? Yeah, cool. So I'll add labels to these stars. See that text name is name. And text face name is Helvetica bold. I don't really, I'm not a text guy. Sorry, I hate all fonts, as my friend used to say. And so now we have this, and let's let all these guys overlap, which will be extremely ugly. And let's make them white. So as you can see, this is the known universe of stars. Usually you would think of the multi-scale of a map being really interesting, because you can see cities or something like that. But here it's that, obviously, if you were in the awesome planetarium earlier, we're just a very, very small dot in this actual gigantic universe of things. And so this is about our constellation as we zoom in. This is like a few hundred megabyte database. Let's see. Yeah, so you can see. And I don't really know whether this is just that things are grouped around our sun or whether we know things that are nearby. But here's basically like our little guy. You can see Betelgeuse. You can see all those various awesome little planets. And then you can very easily just kind of select an area of this and turn it into a SVG, PDF, MB tiles, file, whatever you want to do. And make it zoomable on the internet. Let's see. Actually, in this demo, I'll just show you the end slide. This is a really fantastic project by Sean Gillies that I used called Pleiades, which is a map of the ancient world. And so these are all the places that were existent in Roman times and were destroyed. They were the best. And so as I showed briefly, the inputs and outputs of Tile Mill are meant to be open. In some ways, they have to be open because Tile Mill is an open source piece of software. So we aren't going to integrate with evil proprietary things on either side. As far as how exactly we developed it, it's kind of this question of whether we want something to be extremely easy via knobs or whether we want it to be learnable. And I kind of air it on the side of learnable. Basically, if you mess up, it teaches you, but it does not forgive. So if you type in polygon fill with 1L, it says you should probably write polygon fill with 2Ls. It does the same kind of thing with autocomplete. And the language is relatively simple. You can get really crazy with it, but it's basically like a superset of CSS that is applied to maps instead of web pages. And it's also self-documenting. So instead of CSS where you have, well, actually, CSS has thousands and thousands of properties now. This has a few hundred, but there is documentation for all of them, which I mostly wrote. And here's just kind of the layout of a web map that we actually created. And so basically the big point of these CSS style sheets is that when you think of Z-index and HTML, this is kind of the next level of Z-index, in which very, very often we have much, much, much, much more as far as layers than that. Let's see, I'm gonna switch to showing the new stuff depending on, let's see, I think I have an internet connection. Okay, so, well, I'll show data. Okay, so data, blah, blah, blah. Data sucks, it's the worst thing of all time. So if you work in another industry like audio or, you know, text or if you work in graphics, you always have like PSDs and you have JSON and you have MOBI files. Like, okay, eBooks suck, but you have Calibrian, it just converts between all those things and you don't have to worry about it. Whereas Geospatial data has kind of stagnated for years upon years and it's just horrible. All of the file formats don't have adoption or support or anything. So we just supported all of them, which doesn't really fix the problem, but it does kind of. It also helps with the problem that basically all of our maps are really based upon OpenStreetMap at some point. If you haven't heard of OpenStreetMap, it's what I was vandalizing earlier in this presentation. It is this fantastic project which is basically an open source map of the world. The importance of OpenStreetMap is, of course, without it, most people would not be able to make maps. The extremely stifled geo-industry that you see right now would just be Google Bing and nothing else. Probably not Bing now. But, sorry guys. And so, you know, it's basically like a map of the world as you would expect. It's very similar to Google Maps, except this map is notably much uglier because it was designed by nerds. I like these red colors are pure red, unfortunately. But the big feature is that instead of any other kind of mapping portal, you can replace the WW with the word planet and it goes to this page where you can download the entire thing. Maps are very, very big. It's a very, very, very, very large set of data. I've made a bunch of visualizations, but all of them really say the same thing. It's a lot of data. But it's also kind of insane that, you know, like it's almost as if we have, well, we do have Wikipedia, but we had a Wikipedia for maps, you know? It's not exactly there, but it's getting there. And so, let's see. The thing that sucks about this is that it's 28 gigabytes, but it's around 300 to 400 gigabytes on disk, and it takes two days to import on an SSD machine. So unless you have like a lot of money to throw around, it really, really, really, really sucks to use, or if you're mapping a very small area. And so, I'll just jump very rapidly to a demo of some crazy new stuff. This is TileMill 2. And so, similar to TileMill 1, as far as interface, since our interfaces are so minimal, there's really not much to do here, you know, unless this was dark and this was, I don't really care. But the difference is that this has the entire world. And so, let's say that I'm, sorry, I automatically zoomed to DC. So, let's say that I change the background color and I change water to something ridiculous. So, it's rendered on the fly, and it's changed everywhere. And so, if you were to go to Italy, to some random lake, it's the same. And it's not any kind of post-processing, it's actually just like an on-the-fly database backed by lots of, well, not that many buzzwords. I could actually probably say them in like one or two sentences. Mostly protocol buffers, and then really, really, really smart simplification of features, and really fast servers. And so, basically, you know, since you have all these kind of attributes, you can do much more intense things. You can say line with zero for all major roads. And hide all major roads, hide all streets, all limited streets, and make all buildings red. And so, basically, Tile Mill 2 is kind of like our problem. The main problem that Tile Mill 1 could not fix is history, unfortunately. Like, you're integrating against horrible, horrible formats that have been around for way too long and don't scale. And so, we basically just wanted to fix that. Like Tile Mill 1, Tile Mill 2 is also a BSD, which is an open-source license, which basically means that if you're competing with us, you can rename it CatMill and sell it for money if you want to. Nobody has so far, so we're assuming that it's not a problem. And so, as far as publishing this, kind of like the big question is that if you were to go to an existing map conference or to a GIS department end of the year type thing where people show what they've been working on for four or five months, most of what you'll see are printed out maps on those classic kind of styrofoam boards. Like, usually three maps because there are three sides to the board. And then a paragraph of text. And this is kind of what map publishing tended towards for quite a while. It thought about scale in a very limited way. It was very much about these kind of classical ideas of context, like North Arrows. This is the ArcGIS North Arrow selector. And notice it scrolls. And they're all North Arrows, which is kind of weird. I've always wondered about, like there are plenty of projections in which like North is not the thing that you care about. But it's always North Arrows, both named and is. Whereas TileMill is really created to be web-first. So like the main thing that it focuses on is actually like zoomable map tiles that you can put on the internet. And that are actually interactive in a very useful way. And it kind of shows this in that the style language treats zoom levels as first-class options. And that when you're exporting, you're choosing basically like a 3D cube. Map tiles are the MP3s of maps, says Mike Magersky. Basically like they're the common format. And since maps make these certain assumptions, since they assume that map tiles cover specific areas of the world, that there are specific zoom levels, et cetera, you can stack them on top of each other. Which is really interesting. Like they're this insane compatibility point in an industry that has historically hated compatibility in every form. And I'm not really sure why exactly. There were a bunch of places in history where people could have forked this idea and made history suck more, but they didn't. In order to fix this, in order to fix one of the problems of map tiles though, so to go back to that really to this thing, do you have that many files on your computer? You probably shouldn't, it'll break. And this was a problem for us for quite a while. Basically computers are not made for lots of files. If you've done CS, they're basically using, they're usually using a B tree and they run out. And so we created this really, really simple file format called MB tiles, which just packs them all into a tiny little file. When we released it, a lot of people were really afraid because it's a new file format. And it was released by a company, oh God. But it's just an SQLite database with image data in it. It's four lines to extract. And I wrote the tool to extract it, like the day after just to make people less afraid. Under the hood, second drawing. Let's see, these are the things to memorize really, really quickly if you're interested in the technical side. Tile Mill relies on hundreds and hundreds of open source libraries, but these are like the first down things that it relies on. A lot of these are very, very specific, but I obviously made the first two big because those are the ones that you should remember. Mapnic is kind of like the big, it's like the D3 of tiled maps to throw in D3 for the second time. It's extremely fast and extremely successful. It's open source licensed under the LGPL, et cetera. And then of course, Node.js is unnecessarily fast for 99% of use cases. It allows you to use JavaScript, which everyone loves. Obviously, this is probably raising a few eyebrows about why we're using Node.js, and this is an application that's in my bar. So this is a web app to, if I just pull up the address of that web app, it's the same thing. It's just a native wrapper on all platforms that people can kind of treat it as a native app. Again, kind of on the dialogue of making people less afraid, we found that really, really, really small things like that. The difference between something that's on your home screen, on an iPad versus something that's in a web browser is really massive for the way that people actually understand a project. But obviously, it's super, super fun to actually just develop something where you can look at a map and right click a tile. That's downloading data sources. And that's using new features. I really should not be a developer for this software. Because all the maps that I make are using things that get merged and then unmerge. So for instance, this map, it's just a tile in a web map, which you can copy and paste and you can add into your projects. It's, I mean, like depending on what level of like crazy wizardry you want to get down to, it's a very transparent interface that you can actually learn from. And if you're trying to build something like this for some other use case, like I would love if somebody built this from music. Please copy it. We already got the grant and did it, so you might as well. Let's see. Yeah, so I haven't shown any examples of maps that were made with tile, except for my own, which are actually the ugliest ever created. So let's show some cooler ones. Well, this one's my own. Okay, so as Amanda brought up, you can't really avoid reference to Joy Division's albums in any kind of visualization talk. And so this is a map called Shadow Play. After that song, of course. Computationally, it's very simple. It's just a line going across the map. If it detects that it's on a continent, then it has more noise. Otherwise, it's just a sine curve. This guy, we actually hired him eventually, but he was mapping out Occupy networks around the world. And they had like a really, really fantastic database. Occupy did a really bizarrely awesome job as far as organizing. And 8-bit map, of course. I think that they're one of those things that somebody did them about five years ago, and then Google did them last year, and everyone was like, er, which is fine. You have less ability to copy when you're big. And so a pirate map was developed, obviously, by one of our lead cartographers. And you can see that he's a real artist. It has really awesome fonts. There are some monsters in random parts of it. And he replaces some of the words with pirate words. Some of the less ridiculous things that have been made with it are the FCC's maps, which are actually, I don't know, if you really want a use case for how bizarre and opinionated data can be, this is a pretty good one. Because they're advertising maximum advertised download speed, but their data reporting is so bad that they published a lot of maps just to prove how bad their data reporting was so that they could, you know, basically put the pressure on people who were not doing their jobs. And it worked. Map of Iceland. Iceland. And a different projection than Mercator, which is just beautiful. This is the guy who wrote the CSS language with me. A map of my really pathetic runs. And this one, my heartbeat is the width and the color of the line. And so you can see that on the XY plane in DC is basically the hill. And I live in Columbia Heights, which a lot of people figured out on the internet. But which is basically there. You can see kind of like a cross shape around it. And so like going up and down is where I'm actually like working hard. But you know, it's sad. Like speaking of which, like people not being able to do visualization, like this is kind of a weird thing. Like I made this map and I think it's relatively pretty and like a lot of people thought it was pretty. But I'm a very bad runner. And a lot of people like a year later after I published everything were able to make theirs and it just was embarrassing. It was like, you know, people training for marathons. And whereas this looks like a tiny little star of DC, theirs was like tracing out DC and going into Maryland and going all around Virginia. And it's just, it's kind of, it's, I found it to be a little bit, not only embarrassing, but like a little bit odd that the people who's actual data to visualize and who's actual attachment to the craft were not able to do it first. I wish they were. And I wish that like, you know, this was just one of many at the beginning. And then one of the weirder examples is that Craigslist made maps and we kind of looked at them and we were just like, wait. Which is cool. You know, they're great people. And so like Craigslist just basically did it themselves. And, you know, they're a little bit secretive as far as being a company. So we didn't hear from them very much, but they just kind of used Tylenol on their own. And they started from one of the open examples and just did it, which is pretty awesome. You know, like obviously transitioning from, from Development Seed being a contracting company to Mapbox trying to do products, it's very weird when somebody first uses your open source project to do something that previously they would have paid you for. But it's also like this extremely awesome feeling that like you've actually created something that does not need you to sit next to somebody or even be on a really boring conference call with them. And they can just do it. You know, you're like that, that finally has legs. Tylenol too, I already showed. Rendering the world is really hard, et cetera. Use vector tiles. And that's, let's see, I just have a lot of time for questions, right? Cool. Oh, yep. So the watercolor maps are stamens. Oh, yeah, these guys are actually made all in Tylenol. So we merged Tylenol, got raster compositing modes. And so you can do quite nice things in it in which you could say that something's comp-op is overlay, I think is valid. I don't remember these really offhand. But you can basically just save something and overlay over black, maths. But yeah, so you can combine layers and just add arbitrary composite operations to them. There we go. That's real overlaying. Looks the same. Sure. Let's see, I actually, I didn't really pan through these tabs, but this is just locations. Obviously, like every nerd, I track my location with the GPS unit and so on. No, I should. Oh, God, if only. This is how much of New York would have been illegal to carry a gun in if a law had been passed that was on the books. Anyway, where our map data is. And then this one's a maze. This one's more on like the kind of insane slash like, just, I don't know, I was in a very weird place. I seriously did this at like 2 a.m. And then it was one of those things where you wake up and a really good idea just seems weird. But it is solvable. And yeah, it's like several million units. And it, let's see, yeah. So it opens over here and it gets out over here. And you can easily, you know, you can easily write a robot that would get through it. Nobody has, I guess, I don't know, either it's hard or other people have a better sense of priorities than I do. Probably the latter. You can also use some other random let's see, images. Here's a map of Super Mario, brothers. Which actually, this is all just thanks to the internet. People have made these game maps of every old game ever. It's quite awesome. You can use it for gigantic images, just like space images, this one of the galaxy. But you know, obviously, like a lot of the times these NASA images, they don't actually give them to you as large as you would want them. Or, you know, my expectation of large is way too big. And let's see, you can flip the world and sort countries by size. Greenland is really big. Both on maps and in real life. Suck it, Mercator. Let's see, yeah. And then, you know, Voronai polygons around bus stops in Denver. So basically like, what's the closest bus stop to you in a certain direction? And also, so I should not take credit for these kind of crazy geometrical things. Please, please, please use Shapely. The name is so bad to Google. But Shapely is this Python package that makes all this super, super accessible and it's made by Sean Gillies and it's a fantastic piece of software. But I wrote some docs for it. Just Google for Shapely and Fiona. And also, I mean, you know, obviously, also, come on, yeah, I don't know. I feel like Santiago already went here, so. See, he also already went here. Anything else? Yep. Yeah, so it's kind of a, it's a hard question because basically like if you think of map data and like what maps do is that they tile it out. And so if you take a really naive approach, this tile of data will be 400 gigabytes, which is way too large. You would never want to do that. And so in order to actually tile this out, we need to make certain assumptions. And so we basically have like a bunch of rules which are just like this zoom level includes a bunch of roads, probably more than you need, but not all. And then from there on, you have to make quite a few relatively tricky geometrical calls. Like this tile connects to this tile so the roads need to end in exactly the same place. And they need to be simplified according to the zoom level so that you aren't storing more than one pixel of precision for each jump of a node. As far as all of this is under the Mapnic repo. And so you can pretty much just check out everything that we've done. I mean, the same for absolutely anything that Mapbox has done except for our hosted application, which is exceedingly boring, I guarantee it. Yep. Yeah. I'm sure, I'm sure not, but yeah, actually, so the weird thing about like building an SVG map renderer is that within this task of building an editor, we kind of did. And so let me zoom to somewhere that will be quick to download on conference wifi. Like SVG is a very interesting technology, I would say. It makes very, very simple things difficult and it makes some very, very, very, very, very hard things. Simple. Basically like here, for instance, these are one-way roads. There are five lines on top of each other for a halo, a stroke, the interior stroke, a hit radius and one-way markers. It's insane. And they, thank you. Awesome. Cool. Yeah, we should talk. I also have a long wish list as far as the markers back and text geometry? Text geometry? Yeah. And make it work in Firefox, please. Oh, come on. We've actually gotten like five or six browser bugs already fixed because we discovered them here. Fantastic. Yeah. Yeah, the hardest part of maps is labels. So without figuring out how long they are, you can't do it very well. I don't wanna be super like start-up-y about it and so I'm not gonna use the word disruption. But if you were to look at this and, oh God, no, no. Like if you were to look at Photoshop, for example, it's just as expensive as it's ever been and it's terrible. The thing hasn't changed, it hasn't been like Photoshop has gotten simpler or less expensive. It's actually gotten as expensive and way more complicated for no reason and it's way worse. Really the deal is that we have better alternatives in a lot of industries and sometimes like those alternatives become so popular that we think of them as the thing. As far as why GIS software kind of suffered, it's basically the same thing as Photoshop. You have like a market of pro photographers and like those photographers love Photoshop. It's an extremely powerful tool. Whereas like if you have smaller niche use cases, like a lot of farmers just need to figure out where exactly their crop polygons are. That doesn't require ArcGIS or Photoshop or anything like that. It just requires a very simple tool and those farmers don't have a lot of cash to give you, unfortunately.