 Hey, can everybody in the back here, okay? Let's work out. Good. All right. Hey, good evening. My name's Eric Gunderson from Mapbox. I'm joined by Alex Barth, also from Mapbox. How many people in here have made a map before? Fantastic. How many of those maps have not been a Google map? That's awesome. All right. They're about probably a good 80 hands. This one up is pretty cool. All right. So quick back story. This is not really about mapping with Drupal. We're going to get into maybe a little of that later. But we're going to talk about how to design really custom and beautiful maps. And then you're probably, which quickly brings up to the point of why we're sitting at DrupalCon talking about this and why there's a development site behind us. So the back story here is we got into making map design tools to start telling much more compelling stories with data. And the reason we were doing that was because we're working on development seed, an international development tech company in D.C. and trying to do really big data projects and the tools to design really custom maps and have a lot of control over the style. And then actually the tools to make them perform it online. We're just not there. So over the years we started rolling our own solution. And today you're catching us as a kind of brand in transition. We used to work with Drupal for seven years and up until just before, yeah, just last year and have transferred over to focusing specifically on data visualization and making very performant maps. And what I mean by maps is specifically web maps and anything that can go on top of a web map. The market for this is absolutely huge. And we're looking at over a million sites using Google Maps and you can't even customize those that much. With Mapbox it's a service that allows you to take your data locally and actually start designing a totally custom map. Upload it to the cloud and then be able to actually integrate this, the map, into your own site or app anywhere from dropping in a YouTube video, like dropping an embed, like a YouTube video, to tightly working with our API. And I want to walk through a really quick, higher level view of how Mapbox and some of these open source tools can be used. And then I want to jump over to more higher level views of what's actually possible with these tools and literally show sites and tell some of the stories that we were trying to do with these sites so you can get a sense of what's possible and then literally digress into some of the technicals around how those sites work and just kind of riff on that. We are then going to jump into a little bit of live coding with TileMill, our open source design studio. It's going to be a whole whopping three lines of custom code but you're actually going to get to see what that looks like. And then Alex is also going to speak specifically to some of the Drupal paradigm pieces. So we're going to move fairly quickly here during this hour. But I wanted to first say this is not going to be a real intense deep dive around TileMill. I know there are a lot of TileMill users and some pretty serious Mapbox users here. Our goal here is to actually talk about everything from strategy to really showing the art of the possible and getting into some of the technicals. And for folks that are like, should I be in here or should I be in another session? But I really want to get technical about some of the mapmaking. We are going to have Boff tomorrow. 1 p.m. Room 502. Where we will get incredibly hands-on, literally walk from a more detailed spreadsheet and really dive into some of the code and answer some of the questions. So if anybody wants to take that as a cue to sneak out. Otherwise, let me actually show you how to publish incredibly fast maps. Yeah, is that better? So first, in regards to making a map, you basically have three sections here, right? You have a data collection side, you have an analysis side, and a map design side, right? You actually have to have the data, you have to figure out what story you're telling with it, and then you want to actually present that. We're not going to talk about the first two. We're only going to talk about the actual map design side. Whether you're doing a data collection tool via like SMS, you're using Excel as your data collection tool, or you're actually using a database, or you're using GIS tools like Esri or OpenGeo, there are plenty of existing tools for that. Where we were getting pinched was actually on the communication side of trying to tell the rich story. For us, this starts out with a tool called TileMilt, which is fully cross-platform, one-click install on Mac, Windows, and Linux. What this allows you to do is to actually take your data, whether this is a spreadsheet, whether this is your company's API, whether this is OpenStreetMap data, whether this is communities, local data, Esri shape files, like any data that you have, and pull it into the system and actually start designing out a map. Like I said, it's an install that runs locally on your computer. Here you can see TileMilt with a spreadsheet pulled into it. Turning a few knobs and running a couple of color filters, you're able to start scaling out and telling a story with your data. I'm going to actually try to get into some of the code later and not actually show the GUI. But you get a sense of where this all starts locally. Once you have your map, you can then literally export this out to the cloud and actually put this online. Once it's online, you're able to grab a YouTube embed code or, like I said, our API and literally drop it into a story and have a fully interactive map alongside your content that can be shared anywhere. That's really where you're dropping in a URL, whether it's like tweeting it, really trying to make data more social. And then on the map box side, what we're doing is we're monitoring statistics for you so you can actually see who's looking at your map where and really manage all of your different maps. Again, I just want to gloss over the life cycle here. But what's important about this is that this map, it's just a basic, slippy map, just like a Google map. You can put these tiles, these squares. Everybody that's ever loaded a map in a low bandwidth environment or a bad connection has seen squares slowly load. We're in the business of making custom squares. Just like Google. So you can put them on top of Google. You can put them under Google. You can put them on top of Bing, on top of OpenStreetMap. This is a very established standard, these actual map tiles. And whether they're on top of a traditional map or integrated into an application, you're talking about just basic map tiles, which means anybody using Google Maps right now could actually switch to your own custom maps. So let me very quickly, like in the three minutes, walk through what it's like to make a map with TileMill using slides so I stay focused. And then we'll get into a live demo later. So all this starts, as you saw, with TileMill actually running locally here. You can see I have a couple different map projects. This is just TileMill as soon as it opens up on my computer. And here I can go in and create a new project up top. And immediately I get a fresh canvas here of a live interactive map. Like I said, this is about then being able to add your data. So I can go in, I can take a spreadsheet here, a nice CSV file, go in, browse. Let me add this spreadsheet to the map. Now I can actually see the spreadsheet and the mapping application. And like I said, I can quickly run some filters over this data here and make a map and then actually export out that. And I don't need to know how this stuff works. There's really good documentation built in. All right, that was clearly oversimplified and I promise I'm going to do a live demo later so you can see me hop around and get into some code. But once you walk through that step with TileMill, you're then able to actually publish this up. So I wanted to just show that as a full-on lifecycle of where Tiles come from. So let me now transfer and actually show what you can do with somebody's custom files. Cool. I want to walk through this specific example that we were working on last August into September during the actual famine in the Horn to really illustrate the power of telling complex data stories. We're hearing a lot right now about open data, open government, transparency. Unless you have the proper tools to actually leverage and explain what's going on with the data, add context to the data, you're going to have a hard time reaching a larger audience. So we partnered with one here to help have a longer conversation about why the famine happened and actually start looking at infrastructure issues in the Horn. So the first thing was to talk to one's audience and say, hey, wait, what's going on? Okay, we have a famine. Here's what it looked like three months ago. We can actually zoom in to the famine area and the situation is going to get worse, right? We want to actually orient people and we want to describe what's going on right next to them in context. Okay. It's caused by drop, right? So now here we're pulling up open NDVI data. This is actually showing a differential between vegetation growth. So here I can actually see the growth in April 2010 and I can literally watch the Horn turn round over the course of a year. What happened here? It actually caused prices to go up radically. Here you can see I can mouse over individual price points for cities. This is all open data from the FuseNet project, the famine early warning system as part of USAID. They open this data up on data.gov. And you can see as I mouse over, I'm seeing five years worth of actual crop price data on a monthly basis. You can see that this price spikes last summer and fall were actually higher than they were during the food crisis in late 2007, early 2008. Okay, but famine is actually made by people, not the environment. So let's really get to the point of this. This is about a situation and conflict. Let's now look at that first map again and look just at the famine areas and actually show where it is in relationship to the hash areas. These are limited humanitarian access areas where we actually can't get to or we actually can't get food out. What's going on with people in those areas? Let's actually look at internally displaced people here. I can see the IDPs clustered here. I can actually go and see the refugee camps outside of the country. I can mouse over and see a demographic breakdown by age of who's in those camps and the influx. You can see at the very bottom where the peak starts coming in. That's May, right? You think back to the NDVI data we were just looking at when everything turned brown. That was April. I can literally zoom down into this data and see the individual camps and the breakdown there. But more than just creating like a common operating picture of what's happening, I'm then able to zoom down and do a really deep dive here. Here I want to actually look at Mogadishu. This is all using OpenStreetMap road data and the areas in red are actual camp data from the UN UNISAT and the black areas within these camps as I mouse over can actually see the number of shelters. Those are actual tents. I can literally hijack this presentation. I basically just did a flyover of the camp city in Mogadishu and was toured through that. This isn't even HTML5, right? This is just basic HTML and some JavaScript. A subtext of the site here is that this is a pretty incredible open data story. We would not have been able to pull this off without being able to just go to certain websites and pull down datasets and start using them without getting some bureaucracy in action. Eric, how long did it take us to build the site? Three days. Three days. We had a warm team that are really trained on building these sorts of sites, but those are in terms of the power that you take, the effort that you put into it are relatively small sites that do a lot and they convey a lot of data and they're very, very powerful. All right, so on that note here, you want to see what power is in Georgia. Yeah, what Eric's pulling up right now here is how we integrate the site. The one-to-the-work site is actually what content management system is running on? Do you know what's off the top of your head? We don't know actually right now what the content management system is of one-to-the-work, but you can imagine, you know, for all intents and purposes, it's truple, but the actual site that we are looking at, the interactivity we just walked through, is really just like a straight-up HTML site with a lot of JavaScript on the client. And it's all embedded really just with an iframe. This is a really interesting and important point because specifically with these sorts of campaign sites as visualizations, they usually, you know, are the capture some facts in time. And them just being like straight-up HTML makes them like a shoot and forget. You just turn them on, you put them on your server, there's no database that you need to go back, update security patch, et cetera. Yeah, and again, so audience-wise, we're assuming here we're speaking to developers and people actually deploying sites. We want you to really understand what we're doing and how quickly we're thinking about building so you can literally take some of these concepts and quickly deploy. And as Alex said, quickly deploy in a really scalable way and forget. I can't tell you how many data sites that we've built, but I know some people in the audience can that are still running on pretty costly database servers now three, four years after elections. Important artifacts to keep up, but would get expensive. So the actual code delivery here was literally an iframe. And this is all powered sitting on GitHub pages. Next example. The census came out in April-ish, and we partnered with NPR to actually look at the change in population within the U.S. Here you can see purple areas, cities where they're losing, excuse me, states where they're losing population, green areas where there are states gaining population. As I zoom in here, you get to see counties start to emerge. You can see now as I mouse over, I'm actually seeing a breakdown for the county. Basically, these green donuts, that's suburbia. We can drill all the way down to the actual census track here and have all of this be fully interactive. That's over 72,000 interactive features on this map, and you're getting a sense of how fast this is. This is fully mobile compliant and will downgrade for low bandwidth environments. How much data was this? So the census file, we started processing with this 300 megabyte census file. The actual geodata that you add to that, all the shape files for the counties and census tracks, that's probably another 600 to 700 megabyte of data. We can all deliver that at the speed of web just because we baked tiles from that ahead of time and because we only deliver what you're looking at at that moment. And again, the pop-up in the sidebar here with little graphs in there, this is just all coming from the map, again allowing us to expose a lot of data here incredibly fast. Before I turn this over to Alex, the other thing if you can see the URL keeps changing as I pan. Anybody can quickly grab a link here and literally tweet this and actually start having conversations being like, hey, look at this area in my city and that was pretty cool. It's had more success even on that. I think people have been talking about the FCC map site. They did a 3G blackout map and you could literally tweet and people were like, yeah, this is why my cell phone reception sucks on the ride home and this was a U.S. government release map. That's awesome to actually have this stuff become social. But I wanted to show the NPR example to really show what a lot of data looks like. So let me stop there and transfer this over to Alex for any examples. I quickly want to show another example here for like showing a lot of data on a map. This is a website that we did last year in about November for the climate summit in Durban for the World Bank here. The World Bank has decided to open a whole bunch of climate data to support the international aid community in their planning for future projects. It's becoming more and more clear that the impact of climate change will be specifically important for international development folks as some of the poorest countries are actually going to be hit hardest by it. So they released here data that is actually not as much as their own data but data that they repackaged that they felt was really valuable for climate change planning. What's interesting about the site is the amount of data we can show with these maps but also that we really just give you a quick view of like, hey, this is the data. This is the data that you can work with. And then we actually provide this data for a download. In this case here, I'm going to do like a full pop-up here. We're looking at about 700,000 data points of climate change prediction map and we're looking at 2100 here. The dark parts of the world here are where it's going to get hotter. The bad news is like, this is actually one of the optimistic predictions. The bad news is like, we'll have here changes in temperature that are going to be in the 8, 9 degree centigrade area which is pretty serious to give you an idea of what this relates to is like we had from the last ice age about a rising temperature of about 5 degrees centigrade and we're looking at similar rises in temperature over the next 100 years. So these are the sort of predictions that they publish here and when you move over with the mouse here you'll see how the graph changes here in the sidebar and you'll see that in the cell on the map we have a breakdown, a monthly breakdown that shows you and for those that are further in the back here the breakdown shows you like what is the average of today for each month how does this average look like in 100 years from now and what is the 10th to 90th percentile around that, what is the error that they can be expecting around that. The error margin is obviously very large those are predictions but it is something to work with and what we do a lot in our mapping sites is we actually provide the data for download and again going back to what I said before when we were looking at the famine the Horn of Africa site a lot of these sites are possible because there is so much open data out there right now we try to be like good citizens in this ecosystem and have the clients especially the clients that we work with also open their data in the formats that are conducive for creating maps, creating graphs visualizations of data and re-leveraging it what I now want to do is actually jump over to showing what it is like to make a map from scratch this is my spreadsheet in my spreadsheet I have a region column I have a latitude, longitude or hold on let me back up sorry so we are working with the National Democratic Institute around a tech camp with state department in Romania and we are talking about ways to actually visualize the partners that we are working with on the ground this is something classic I am working with a lot of cool people in country I want to actually see who I am working with and what they are doing and here is how you can see that you all get a sense of what is going on right, no but seriously maps are just another lens on data so we are basically taking this spreadsheet that has a couple basic geo columns in it things like the name of the party and some people names what year, like really a basic spreadsheet and we jump over to so this is hold on no cheating I am going to start to tell them a lot this is totally a desktop running application I can go in you can see I am working on a couple different maps here I can actually go in and create a new map I will just call it Drupalcon NDI and there it is here you see I have some CSS like language in the side and I have a fully interactive map here so very quickly I make some adjustments and I can change the color of my map, nothing is really special about change the color what is exciting here is actually going in and building out the map with your own data so I can go in and add certain data you can see here is my desktop I can actually go in to my documents, it is my map box folder there is some data and here is this org parties spreadsheet that I was just looking at so I add that, cool great I save in style and there we go I now see where everybody is on the map that is still not incredibly still little I am not trying to show violence I am trying to show friends let me change a couple of superficial points this stuff really matters design there is no such thing as neutral data visualization so be specific with your colors you can make some incredibly ugly maps I think we can do that together today okay so I now have created dots on a map this is definitely not the future of data visualization but a lot of tools already allow you to do this what gets exciting is starting to take control of your data here I can go into the same spreadsheet I was just looking at here is my region column here is the party organization list column here is the number of organizations what is interesting about the number of organizations what was the story I wanted to tell how many people are working where so let me actually look at this column I can see that minimum there is one person per region maximum there are 15 so what I can do here is very quickly actually start so what Eric is doing here is basically creating a couple of very simple rules to say hey if the number of organizations is larger than one make the dot a little bit larger it's just going to go through a couple of categories here and you make like larger dots as the number of organizations is larger that's one of the things that's specific about this language that we call cargo that we've created actually for this specific purpose it's very CSS like when I work with it usually and I have a couple of things off the top of my head but there's a really great inline search that you can crack open and you know use it as like a little cheat sheet obviously you can't you can not only create like dot maps we've seen a couple of like what we call choropleth maps like these shaded maps you can create them with title as well this takes a couple of different steps here sorry oh sorry yeah thank you so much yeah so what I was saying is that you can not only create dot maps but also what we call choropleth maps like those shaded maps that we've seen before for instance in the case of the NPR census map these maps are done in a very similar way there's a couple of more steps involved the place to hit up for really getting the details on that is mapbox.com slash help or again if you really want to do more hands on here like tomorrow at one o'clock we're going to do this buff now this Cardo C-A-R-T-O okay so we're going to keep taking breaks like this for another two minutes as you can see I'm making progress here right I can now actually see density points of where my partners are in country I want to quickly walk through what that code looks like so people in the back can see it can people in the back see that kind of good good alright so first I'm calling my spreadsheet I'm saying give everything a dot that's three pixels wide give it this beautiful shade of green I want a little ring around it too that's also a shade of green when I have a lot of dots I want them to be able to overlap and then I'm looking at the column in the spreadsheet this numOrgs column and saying anything greater than or equal to one or less than five give a marker you know make a dot of three right make it and then anything greater than five but less than ten let's make that 10 pixels and 18 this is pretty basic right where do the where do the pop-ups come from hold on so if people have some questions as we're going to do this I want to actually do this for like another three minutes to actually show how rich some of this can be and Alex can just keep talking about something cool questions you have to right now you actually have to categorize that through what would you asking right wouldn't it be great if I could just create a rule that says like take like the scale of the data times two doesn't work quite yet we're working on that something that you know it's by the way it's open source so feel free to get involved if you feel like it you know absolutely another question yeah I have a question about the data source your data come from the Red Shield, the CSV file it's possible to use a database data very good question we support a couple of like a couple of data sources CSV is a very common one GeoJSON would be another very common one we support SQLite SQLite is incredibly powerful for doing like mid-sized GeoData stuff if you work with QGIS you may have used it and it's so nice because it's like a self-contained database file that you just can pass around and everybody can just open it works like a database we also support Postgres and PostGIS which becomes very interesting when you want to do more heavy lifting stuff like for instance let's say you would like to theme a map made of open street map data thank you GML, no any other questions okay the question was how would the plug this into Drupal how would I make this feed up of data from Drupal very good question I'm going to answer this in the end it's actually going to be part of the talk over here yeah exactly like a Google spreadsheet yep currently goes down to zoom level 22 I don't actually remember offhand how that is but this could be rooms in a building yeah zoom level 22 is very high if you think of Google Maps which has very high zoom level of support and it goes down to 18 22 is very high also like if you decided to just use this like you know off-site of like the mapping path almost like you know render all kinds of like shape files this is by the way a data format that I forgot to mention before we also natively support Esri shape files in Talmud one last question here the gentleman right next to the microphone you mean like the actual base map that you want oh yeah yes oh good actually I think are you going to show opportunity nation that shows blank spots nobody can show it cool let's go back to the code for a quick sec I've done a couple things here I've actually kept my number filters and my width points I added something for hold on let me show you what I did right look now I actually have the number of organizations per point that was an extra five lines of code now I am scaling the text also based on the number and I added in some details about the text what font I wanted it to use, what column I wanted to look at I also cheated a little and changed the colors a little back to blue added a little bit of macro opacity like I want to start tweaking this out I want it to look good but now I'm only seeing data points I still don't have a lot on this map so let me actually walk through what it's like to add interactivity partners on the ground so what Eric's doing here is he's adding first just a legend but now the actual interactivity works a lot if you've ever worked with views we're using something that you know on tokens in Drupal it works a little bit similar like you just have like a text field that you can fill with tokens that you would like to use when you hover over an element on the map and those tokens are for your convenience just like they're on the bottom of the page what's a little bit hard to see here in the back the tokens that are listed out here are just the headers of my csv file and once you paste them into like the field up on top here you'll get pretty much what you would expect when you hover over an element on the map the tokens will be replaced with the information that sits with this element what's really cool is that we have a way of putting this interactivity into into tiles into what we call UTF-8 grid tiles that we then only deliver to the browser once you start interacting with those tiles meaning you know this is how we actually pull off the trick of like putting a lot a lot of data onto a map and this is really one of the things that you would want to think of about using Tile Mill and Mapbox is hey I have so much data on the map I actually cannot do that with you know DOM elements on my open layers map this is like a little bit where we're coming from back then like we started to do maps where we had just too much information where our browsers would just not be able to cope with that amount of dots on the map or with those amounts of polygons on the map so what you do is you go back to the tile level right? so now I've made all my points scaled with the number in there and interactive where now as I mouse over I actually get the name in this particular district there are 15 partners and I can click to actually see more data in the full list so now I've built a fully interactive map here I can I have my map layer actually I can want to be able to put this on any map I'm going to go in I'm going to focus on the actual map because now I want to put this live on my website that looks good looks good give it a title ndi partners so what's going on right now is like we upload this directly into a hosting solution and the reason why we have removed the map from the background here is because once we host our map we can combine that with any other map that's hosted on mapbox.com hosting what tile mill just did there was it rendered out all of those actual tiles and all of that interactivity and publish it directly up to the cloud into my account so I'm currently logged in you can now see my map so I can go and say hey we've got a blog post to get out about I want to turn on bandwidth detection good let me hit save let me now actually go over to my different layers here I can go into my account here and actually jump into my maps you can see there's the ndi partners that I just uploaded great let me actually go in and add some context to this I can go over to the mapbox account where there are a bunch of layers actually open here and I can scroll down and in this case I can grab mapbox streets which is a world-based layer alternative I can quickly drag the data on top of the map that always helps and now I can zoom in it maps looking good let me hit save on that I can go back to my grab that, grab my embed go to my there's Eric grabs your day embed iframe you can also overlay your data over you know a google map or a map quest map we've used here is like our own street map from mapbox streets and I've now published live from a spreadsheet to my website and a little over 10 minutes you can immediately get a sense of how easy this is going to be to actually integrate into Drupal and Alex will now speak to some of those finder points cool so there's basically two ways and it came up before in a question here there's basically two ways you want to think about integrating mapbox maps with Drupal and one is I can just use like those mapbox maps as a base layer and then I put my dots on it like the old fashioned way like with open layers and with browser side DOM elements or like leaflet whatever it is but I really just use like the base layer here or I do a data layer a little bit of how what Eric just showed in tile mode so this would be an example here of a classic sort of base layer usage of mapbox maps we use in this case here this is Denver we're using here the mapbox streets base layer zoom level 0 to 17 open street map data and we're using in this case I've used leaflet to put a dot on the map and this could be many dots but you know as I hinted at earlier if this is going to be a lot of dots the browser is just going to complain about it we're going to hit a certain wall and this is where you would want to start thinking about using mapbox as a data layer this is where we have the interactivity embedded interactivity and you can go like in lockstep with the visualization that you have on the map just like we showed this on the NPR census map and for that interactivity I mean you've now seen numbers you've seen names on hover you've seen graphs on hover but these could also be videos these could be images like you could be pulling anything into these interactive points and we'll actually show some what it's like to actually drop in images of what could happen tomorrow at 1 o'clock in room 502 so if you're interested in more like hey how do I integrate this here with Drupal and what else can I be doing with those maps just drop by tomorrow at 1 o'clock now again right this is basically the question of like hey do I want to have about hundreds to thousands of data items on my map or do I want to have like thousands to millions on there the Google fashion way like I hinted at before would be like you know you grab a mapbox module to get it with it and you configure open layers I know it's always a little bit like paint but it works if you install the mapbox module you have like a mapbox layer you create that layer and this is where I did not do a screenshot from you create that layer and you configure it basically with the map ID that you've created on mapbox those things where you just grab like the street level layer that we've shown you before and add that here and then you start to place those data elements on the map and this is you know part of your question that you asked before right this is one way of putting data that lives in Drupal onto the map now the other way would be to do it exactly like that Gary showed before and obviously there would be some sort of step involved in between where you get the data out of Drupal and you would import it into a tile model and then you would render a map you would upload it and if you use interaction you want to be thinking about using WaxJS this is a wrapper library that we provide that we provide for libraries like leaflet, openlayers, modest maps that does a couple of things but most importantly it makes it really easy for you to leverage this interactivity that's sitting in those maps because openlayers or leaflet or modest maps are not going to pick up on that interactivity that we deliver from hosting to you by itself so you want to be thinking of using this as something that we're going to be talking about a little bit more tomorrow to give you a quick idea of what it would look like to use WaxJS this is sort of the minimum code that is involved in embedding a WaxJS map directly why would you do that as opposed to just grabbing the iframe that Eric just did like two minutes ago the reason is because you have much more direct impact on the map here you can do neat stuff like oh let me pan around the user as he's like visiting the map remember like the Horn of Africa map remember the zooms and pans that we did on there as you clicked around this is all stuff that we did with WaxJS and very simple WaxJS plugins more on that again tomorrow in over 5-2 now aside from data integration I want to point out quickly two more things that are interesting to think about what can it do between Drupal and Mapbox here the one is there's a very powerful Mapbox API that allows you to create maps and galleries of maps on Mapbox hosting you can do neat stuff like oh let me show for this user all the maps that the user has on Mapbox hosting and in fact there is a module that comes out the other day called SlashMaps that does exactly that it just expects your Mapbox user account and shows all the maps that you have in there you can do neat stuff like just like listing but you can also do neat stuff like oh let me just pull down the thumbnails here so one thing that could be interesting to check out another thing that is interesting to check out is hey how do I get my data out of Drupal a little bit easier into TileMil something that we do quite often probably not as much with Drupal but with all kinds of other management systems out there is let us create a data download from this website that you can just grab drop into TileMil and render a map from this can get very easy because TileMil supports remote data sources so what you can do is once your website, imagine it's a Drupal website exposes like let's say all the projects that a certain organization has all over the world exposes them as a data file you can just put the URL of the data file into TileMil and start rendering that there right on top of that you can automate the process once you have your data file in TileMil you still have the manual process of hey let me go and now render and upload that map just what we did before you can't automate all that from the command line as TileMil has a command line interface it would look a little bit like that for instance this would be the commands involved in rendering and uploading a map there would be a couple of more parameters that you would add like you would say which project you want to render, you would say what user you want to upload to but this is basically how it works right and now given the fact that you can just run TileMil in the cloud like on an internet connected server you can imagine that you can actually start automating this process and in fact this is what we have set up a couple of times for clients this is not productized in any way from us right now but like nothing stops you from doing this yourself just use TileMil as something that you run from the command line and that you run from your server again like if you're interested in diving deeper into all of that this is where we want to do I think what's important is that everything you've seen to date is free and open source I want to now jump over so like literally even the cloud stuff that I pushed up to I mean those are, that was like you can have a free account setup like the first paid account starts at $500 it goes up to $50 this is a classic utility I mean we're in the business of selling ball bearings here that are transparent technology to power your maps on your site and you integrate them that's like how our business model works I don't want, but I do now want to actually transition over to talk a little bit more about our API but that API is also exposed from the free accounts so I think a lot of this is really important that everybody realizes the open source elements here even though we've packaged it up tightly most of the time so we're from the internews here excellent so we've done a bunch of work with internews an incredible an incredible media organization they're doing a significant amount of work right now in Afghanistan they were brought in by USAID one of the largest media development programs in Afghanistan recently there's a real problem with trying to do media development I mean they literally stand up everything from radio towers to actually help the radio stations figure out their business model to train journalists a lot of this stuff falls down when your journalists are getting attacked it's really hard to try to create a kind of open free media environment so we partnered with internews to help tell a better story of what's actually happening in country here literally taking a spreadsheet much like you just saw and in this case visualizing over the years where there were attacks against journalists this is a basic one page HTML site, these are Google charts all dynamically rendered from the data download that we have here are the maps just pulling from the map box hosting you can see here we've got some JavaScript that allows us to filter out different layers that we've made so you can think in Tylenol I exported out like nine different layers as I click on different points I can actually filter out my JavaScript listing again there's no CMA, there's no database behind the site I can turn on more complex data stuff so how many map layers are here so we at least have two we've got a dot layer and we've got a terrain layer what you're seeing here is that we're actually compositing these down on the fly into one single image this is one of the real power benefits of map box hosting we're using Node.js for very fast dynamic map compositing so I can go to something like this let's turn on security instance for 2011 let's just turn on 2011 data any other mapping application, what would you have you would have three callouts go out you would have one to the base layer you would have one to the actual dot and then you had one to the shaded polygon you've all seen this, the data gets painted on top of the map that's not what's happening here because of compositing can you show how you would remove a layer it's all restfully managed throughout the API this is a little bit of a ridiculous URL for anybody to want to read but I'm going to delete a section and then I'll blow it up of what I delete I just knocked out the security instance and recomposited it on the fly that's what I deleted from the center of the URL that means actually from your Drupal site or whether you're doing a static site you can actually programmatically call against all the different maps that you're seeing, so when you see us actually start adding different map layers right, you actually start treating your data like Legos, you just get to stack them up so if you're working for a specific story and you want to have a couple maps ready to go and then hey wait the situation just changed I just need to change one simple layer of data you just go through the UI, the same UI you saw me dragging and stacking the Romanian dots on top of Mapbox Streets and put them on top this really matters for a low bandwidth environment it also matters for mobile environments because mobile environments are low bandwidth environment Eric and can we have also look at the UTF-8 grid with Intrack TV let's do two things here okay back to another another basic let me actually show a big dot okay, right another basic basic tile again we're just in the business of making custom tiles, right? look at the end of this tile, it's a JPEG watch this we're going to add 70 to the end parameter it's going to now change the quality down to 70 you guys know the difference when you export something out via Photoshop, the difference between like 90, 80%, 70 this stuff can get a lot smaller look at the noise around some of the labels see that's the distortion factor that we just placed by doing that but that map is going to render a lot faster and you can build in this automatic bandwidth detection actually into your map we launched this map with the inter-news actually in couple like literally like there like four years ago we were trying to build these rich visualization tools and they just weren't loading, when we were in country with Chris here with NDI in 2009 for the Afghanistan election we were literally trying to set up local map servers and copy over 2.5 million map tiles to have these maps load fast now you've got one single file and on top of that you actually don't even need to run it locally because of the actual speed compositing happening here so to Alex's question about UTF, I want to actually, but all this activity here, like how is that working? Let me actually jump over to White House example first and I know we only have five more minutes so White House here the White House has been looking to cut costs, they've been actually looking at US federal access properties in this case you're seeing over 15,000 access properties have you ever seen a map load this fast that's fully interactive right? well, based on a couple of the tricks that you've seen based on a couple of the tricks that you've seen you know how we're doing it we're baking this all into images we've now reduced the problem here from 15,000 images 15,000 dots to 15 images and they're all interactive and the way they're all interactive let's go back to the Afghanistan example is that behind each tile is another tile of ASCII art that's actually a UTF-8 grid literally showing the same kind of dots here and that's actually calling out the interactivity code that's only triggered based on collision detection we're basically running a pattern of 4x4 grid over each tile that allows us to do collision detection that allows us to actually show where we are and know when to trigger the interactivity so back to the White House example not only have we reduced the problem from 15,000 down to 15 we're only triggering the interactivity when you mouse over a specific tile it lazily loads and gets that little piece of JSON with it would you add anything to that? cool so this is a preview of some of the stuff that's possible until the end of the day on Thursday we're hanging out with our friends at phase 2 that are gracious enough to throw us passes here and to let us sit at their tables so stop by we'd love to get into the weeds about your data about telling stories I know there are a lot of shops here that are thinking about breaking into this and it's really hard to think about how you actually price for stuff like this we were able to bootstrap Mapbox fully through consulting work by development I'll be happy to share how we price overlays how we price actual base maps how many hours go into this to really help people in this room create business models whether you're a shop or whether you're an organization looking at sources to get a sense of what the costs will look like so I encourage you to stop by after I'll be happy to give you a card and Jeff Michalis there we go Jeff also on the Mapbox team if anybody wants to get some of the cloud servers and the performance stuff we'll be happy to talk about that I would also love to show off Mapbox streets and also show if we're getting some real traction there we launched it four weeks ago with worldwide coverage three weeks ago four square left Google Maps for Mapbox streets and we're seeing a lot of other people start making the move the reason I'm dropping that name is because our cloud servers can absolutely scale a lot of stuff about how that's working so we'll be around all week it's wonderful to be back with everybody thank you