MapBox - Development Seed The latest developments in our open source mapping stack. en Support Development Seed's Knight News Challenge Submission <p>Development Seed is applying for the Knight News Challenge with a <a href="">plan to create new, user-friendly contribution tools for OpenStreetMap</a>. We'd like to do for community open data what <a href="">TileMill</a>, a previous <a href="">Knight news project</a>, has done for map design and publishing. Check out <a href="">our brief submission</a>, and if you want to see these tools funded, like it - every like counts in the voting process.</p> <p><a href="">OpenStreetMap</a> proves that citizens make maps of their surroundings with greater detail and focus than any company ever could. It's the dataset that we chose for <a href="">MapBox Streets</a>, and that humanitarian groups like the <a href="">Humanitarian OpenStreetMap Team</a> base their important work around.</p> <p>OpenStreetMap has already moved incredibly far based on the work of volunteers, large companies, and the open source community working together. Its tools are made not only for simple road corrections, but for the community itself to map cities from scratch, validate that data, and distribute it on a massive scale.</p> <p>However, there's much further to go. Due to the recent news of large switches like <a href="">foursquare</a> and <a href="">Apple</a>, and coverage in <a href="">The New York Times</a> and <a href="">The Guardian</a>, <a href="">OpenStreetMap garners more attention than ever</a>.</p> <p>Our proposal to build new tools around OpenStreetMap targets this wave of contributors as well as the long-term viability of the project: the transition from <a href="">mapping cities from scratch</a> to the maintenance, validation, and improvement of local data, <em>by locals</em>.</p> <p>We are proposing three new open source tools for OpenStreetMap - a simplified editor, a geo aware task tracker, and a tiled geo data delivery system. The three tools together are designed to lower the threshold for first time contributors, to facilitate coordination within the OpenStreetMap community, and to make OpenStreetMap data easier to consume by providing a bandwidth optimized data delivery system. The proposed plan with a budget of $910,000 intends to concentrate serious resources on these three key areas of the OpenStreetMap infrastructure to provide polished and solid foundations for OpenStreetMap's growth.</p> <h2>Simplified editor</h2> <p>There is a clear need for a simplified web-based editor that focuses on the most common OpenStreetMap tasks - an editor that guides contributor's first steps and helps advanced users be efficient, precise, and focused. The editor should be simple to deploy and define a plugin system so that it can be tuned for specialized use cases like satellite tracing, street name entry, or validating large-scale changes.</p> <p>In its generalized form this editor could be the default experience for - if it earns the broad consent of the OpenStreetMap community - but it could be equally useful as a platform for mapping parties and large scale team mapping efforts like the ones led by the Humanitarian OpenStreetMap team <a href="">in Indonesia</a> right now.</p> <p>We propose to use a similar architecture like TileMill, an application that can be equally run offline on the desktop or online from a web server.</p> <p>This work is not without precedent. The <a href="">Potlatch project</a>, for instance, has served as OpenStreetMap's web editor for years and has benefited from hundreds of hours of improvements by skilled contributors. Our work aims to build tools within and with the existing community of developers, and to push them to completion so there's a tangible improvement in the experience of a user initially going to, clicking edit, and adding their own knowledge to the map.</p> <h2>Geo aware task tracker</h2> <p>There is a real opportunity to broaden the OpenStreetMap community by tapping into contributors who are not able to actually add or modify geo data, but who are very well in a position to describe missing or wrong geographic information. OpenStreetMap, like any other worldwide map, is incomplete and imperfect, and so it needs a strong system to monitor, prioritize, and address problems - especially as the number of people using and participating skyrockets.</p> <p>We propose a nimble geo aware task tracker that helps coordinate tasks around OpenStreetMap data with direct referencing of nodes and geographic areas, task packaging for team mapping efforts, and an easy to use submission form that allows newcomers to provide productive input.</p> <p>Tools like the <a href="">OSM Tasking Manager</a> or <a href="">OpenStreetBugs</a> lead the way here and cover some of the functionality we propose, but we believe there is an opportunity to take coordination to the next level and radically lower the barrier of entry to the OpenStreetMap project by providing a really polished management tool for geo tasks.</p> <h2>Data delivery system</h2> <p>Processing OpenStreetMap data today takes an individual skilled enough to set up a local <a href="">PostGIS</a> database and <a href="">TileMill</a>, if not a more involved <a href="">Mapnik</a> setup. If OpenStreetMap data itself could be delivered in a tiled fashion by a remote server - just like the rendered tiles - a map renderer, on a server or in a browser, could plug directly into a dataserver, avoiding the slow, complex, and manual data conversion process.</p> <p>While this is a low level component, we view this as a huge step towards better leveraging OpenStreetMap's core strength - its availability as open data.</p> <h2>Next steps and your support</h2> <p>In the happy case of an awarded grant, we are looking forward to further refine directions with our OpenStreetMap colleagues. Feedback is more than welcome at this point. We're excited to see this conversation has already started with <a href="">Kate Chapman's</a> post yesterday on <a href="">All I Want for OpenStreetMap is Simple</a> and <a href="!/mikel">Mikel Maron's</a> today on <a href="">All I Want for OpenStreetMap is...Social and Attention</a>.</p> <p>If you like where this is going, show us some like-love on the <a href="">Knight tumblr</a> :) Every like, comment, and reblog counts for the decision that judges will be making next week.</p> 2012-03-30T00:00:00+00:00 Development Seed Announcing the MapBox Blog <p>As you've seen from the <a href="">amount of mapping posts</a> on this blog, we're ramping up our investment in <a href="">MapBox</a> - our <a href="">open source mapping tools</a> backed by a <a href="">cloud platform for sharing and embedding custom maps</a> and <a href="">beautiful worldwide maps</a>. To capture this momentum and communicate about MapBox news, we just launched the <a href="">MapBox Blog</a> over at Follow us there or via <a href="">RSS</a> and <a href="">Twitter</a>.</p> <p><img src="" alt="Announcing the MapBox Blog" /></p> <p>Moving forward, all MapBox news will be posted on instead of here. So if you're following us on Twitter <a href="">@developmentseed</a>, now would be a good time to follow <a href="">@mapbox</a> too. Of course we will continue posting here on <a href=""></a> about our <a href="/projects">data visualization and open data strategy projects</a>, <a href="">Node.js development</a>, and <a href="">local technology events</a>.</p> 2012-01-30T00:00:00+00:00 Development Seed A Google Maps Alternative: Switch to MapBox <p>We just launched <a href=""></a>, a walk-through showing how MapBox is much more than just a mapping API. Particularly when combined with open source libraries like <a href="">Leaflet</a>, MapBox provides an incredibly powerful alternative to big traditional providers. The goal of /switch is to show how you can get up and running with an open mapping stack supported by a scalable cloud infrastructure.</p> <p>In addition to featuring the open source wins of the MapBox Platform, the campaign also highlights some price comparisons. Specifically we're looking at Google Map's new <a href="">price increase for high-end users</a>, which for many businesses that depend on maps, are potentially debilitating. While we continue to look at Google Maps as a powerful integration point for MapBox, and something we continue to support for <a href="">layering under custom maps</a>, some organizations need to exit Google maps all together to save resources and are looking for viable alternatives. With MapBox, you have options.</p> <p>To be clear, though, we are not trying to make a one-to-one comparison. MapBox doesn't have its own satellites orbiting or cars roaming cities. We are not in the business of managing routing information to provide driving directions nor do we currently have the geocoding infrastructure that Google does. But we are in the business of making fast and beautiful maps, and for many organizations incredible base maps at a <a href="">fair and flexible price</a> makes MapBox a <a href="">real alternative to Google Maps</a>. Check out our <a href="">new custom OpenStreetMap base maps</a> that we're launching later this month.</p> <p>Read more about how to <a href="">switch to MapBox</a> and <a href="">reach out</a> to us if you want to talk about custom pricing packages or longer term contracts.</p> 2012-01-20T00:00:00+00:00 Development Seed Mapnik Creator Artem Pavlenko Joins the Team <p><a href="">Artem Pavlenko</a>, the creator of <a href="">Mapnik</a> - the amazing map renderer at the heart of many open source mapping tools ranging from our map design studio <a href="">TileMill</a> to huge live updating datasets like <a href="">OpenStreetMap</a> - has joined the <a href="">MapBox</a> team. He comes on board after playing a critical role in the launch of MapQuest Open, which is based on open source Mapnik and OpenStreetMap data.</p> <p>Artem is a incredible addition as we further <a href="">grow the MapBox platform this year</a>. Most recently he has been working with <a href="">Dane</a> porting <a href="">TileMill to Windows</a>.</p> <p>Artem will continue to lead Mapnik's core development - in fact his main work right now is focused on developing for Mapnik 3. All of this work will result in huge performance improvements for us, which will be critical as we build out <a href="">our world base maps</a> and further scale our platform. After years of coordinating together in the open source space, it is amazing to get to work together on the same team.</p> <p><img src="" alt="Welcome to the team Artem!" /></p> 2012-01-18T00:00:00+00:00 Development Seed Designing a Minimalist OpenStreetMap Baselayer for MapBox <p>I am designing a new minimal <a href="">OpenStreetMap</a> base map in <a href="">TileMill</a> to use with <a href="">MapBox hosting platform</a>'s map builder. The goal for the design is a general OpenStreetMap layer that can be used as a light, very subtle background for <a href="">compositing further data on top of</a>. Here is an early look at the features and design aspects I have been working on for the map.</p> <p><img src="" alt="Boston-Cambridge" /></p> <p>I used the <a href="">OSM Bright template</a> as a starting point for the design and removed all color, choosing to limit the palette to light grays. For simplicity, most land use and land cover area types have been dropped, however wooded areas and parks remain and are indicated with subtle textures instead of color.</p> <h3>Label improvements</h3> <p>For city labels I'm making use of the 'simple' label placement logic new to <a href="">Mapnik 2</a>. With this method you can specify multiple placements for the renderer to attempt, and the label will be rendered in the first one where it fits. The result is more cities end up being labelled at low scales.</p> <p><img src="" alt="U.S. Northeast city labels" /> <em>Improved label placement in the Northeast United States.</em></p> <p>I've also created shield styles to show route numbers for major highways like I-95 at mid-level scales.</p> <h3>Road improvements</h3> <p>The style now includes more types of roads. Tracks have been added, as have pedestrian routes, bike paths, and bridleways, which are shown as dotted lines. Roads without general public access (for example private roads) are shown faded out.</p> <p>The rendering of overlaying tunnels, streets, and bridges has also greatly improved, with most overlapping lines separated and stacked in the proper order.</p> <p><img src="" alt="Example Boston bridges" /> <em>Overlapping bridges in Boston</em></p> <p>The tunnel and bridge improvements are one of the more significant changes. The method I used was inspired by the bridge handling in <a href="!/michalmigurski">Michael Migurski</a>'s excellent <a href="">High Road project</a>. The method involves pulling multiple copies of the same bridge or tunnel segment from the database in order to render the casing and fill. Road casing is something I normally handle in Carto with <a href="">multiple symbolizers on the same object</a>. But in the case of bridges where you are dealing with potentially many overlapping layers, it's easier to control the rendering order with PostgreSQL's <code>ORDER BY</code> than it is with Carto attachments. Some modifications to the ImpOSM import mapping were required in order to bring in the <code>layer</code> tag value from the OpenStreetMap data.</p> <p>At first glance it might seem like I've removed the outlines from standard roads. What I've actually done is made the casing the same color as the land. Rather than a standard outline, this provides a pseudo-knockout border when roads pass over tunnels or land cover textures.</p> <p><img src="" alt="Example Chicago trails" /> <em>Trails cutting a path through a wooded area in Chicago.</em></p> <p>This border is slightly wider trails, cycleways, and railways. These features are represented by thinner dashed lines, and a wider outline give them some breathing rooms from any background texture and also makes for nice-looking bridges.</p> <h3>Coming soon: OSM Bright</h3> <p>Many of the adjustments that I've made for this minimal style are things that can be pulled back into the OSM Bright template project. I'll be working on doing this in the near future as I wrap up work on the minimal design. Keep an eye <a href="">on GitHub</a> for these improvements as well as our blog for information about when the minimal design will become available on MapBox.</p> <h3>MapBox for design</h3> <p>Try using <a href="">TileMill</a> to style your own data or pull in extracts from OpenStreetMap. If you are new, check out our documentation on <a href=""></a> and follow us on Twitter <a href="!/mapbox">@MapBox</a> - you can also <a href=";id=6cbe531fd0">sign up to our email newsletter</a> for updates every few weeks. When you’re ready to share your maps, check out <a href="">MapBox plans starting at just $5 a month</a>.</p> 2012-01-17T00:00:00+00:00 Development Seed TileMill Coming to Windows <p>We're now only weeks away from launching version 0.9.0 of <a href="">MapBox's</a> open source map design studio <a href="">TileMill</a>, which <a href=""><strong>will run natively on Windows</strong></a> for the first time. This means that TileMill will now be a one-click install on three major computing platforms: Windows, Mac OS X, and Ubuntu Linux.</p> <p><a href=""><img src="" alt="" /></a> <em>TileMill running natively in Windows 7.</em></p> <p>The goal here is top notch performance. With a native port to Windows nothing can stand in the way of the blazing rendering speeds that TileMill is capable of when given full reign of the hardware. Watch the preview video of TileMill 0.9.0 on <strong><a href=""></a></strong> and sign up to be notified when it's ready for download.</p> <p>Based on operating system usage data, the TileMill community will be growing very soon:</p> <p><img src=",s,FFFFFF00&chds=0,682656&chxs=0,333333,10&chxt=x&chs=500x300&cht=p&chco=56a7ca|70b5d2|8ac2da|d1cdce|d9d6d7|e1dfdf|e9e7e8|f1f0f1|faf9f9|ffffff&chd=t:34.18,10.75,32.80,8.41,5.11,1.53,1.95,0.15,0.54,3.93&chl=Windows+7+(34.18%)|Windows+Vista+(10.75%)|Windows+XP+(32.80%)|OS+X+(8.41%)|iOS+(5.11%)|GNU+Linux+(1.53%)|Android+(1.95%)|Symbian+(0.15%)|Black-berry+OS+(0.54%)|other+(3.93%)&chds=a&chma=0,0,40,40" /></p> <p><em><a href="">Windows User Base (Oct. 2011), Source: Wikimedia (Oct. 2011)</a></em></p> <h2>Node gains Windows support</h2> <p>TileMill is written in pure javascript using <a href="">Node.js</a>. Node has been cross-platform from the start, supporting a range of open source and commercial operating systems. But Windows was not originally on the list because the asynchronous networking at the core of Node (libev/libeio) only worked on UNIX systems. This meant TileMill could never support Windows natively.</p> <p>But six months ago, the Node team announced that they would begin work on a Windows port with <a href="">Microsoft's direct help</a> with the explicit target of easy installation and high performance. The first stable release of Node that <a href="">included Windows support</a> landed in November. I'll be talking more about this at <a href="">Monday's Node.js meetup</a> in Washington, DC.</p> <h2>TileMill ported to Windows</h2> <p>There were four main tasks on the road to a Windows version of TileMill:</p> <ol> <li>Porting custom node C++ modules we've written for TileMill like <a href="">node-sqlite3</a>, <a href="">node-zipfile</a>, and <a href="">node-mapnik</a> to leverage the new Node cross-platform asynchronous networking library, <a href="">libuv</a>.</li> <li>Building the latest Mapnik 2 development code and all its dependencies on Windows using a toolchain compatible with what the Node team is using (Visual Studio 2010).</li> <li>Enhancing TileMill to use fully cross platform approaches to filesystem handling.</li> <li>Designing a build system that can be semi-automated to make frequent releases sustainable.</li> </ol> <p>We are excited that since late November, with the expert help from lead Mapnik developer <a href="!/mapnik">Artem Pavlenko</a>, we have achieved these tasks. <a href="">Sign up for updates on our progress</a> and to be one of the first users of TileMill on Windows.</p> 2012-01-13T00:00:00+00:00 Development Seed StreetEasy Makes the Switch to MapBox from Google <p><a href=""></a> just switched to <a href=""> hosting</a>, setting them up to save $250,000 this year compared to paying <a href="">Google's new 2012 map API fees</a>. More than just being a huge cost savings, the map they designed in house using <a href="">OpenStreetMap</a> data in <a href="">TileMill</a> and integrated on their site using <a href="">Leaflet</a> just looks sick and gives them nice editorial control over everything from neighborhood boundaries to what labels show up where, details that matter when your product (real estate) is all about location. With <a href="">MapBox hosting's compositing</a>, they can add additional map layers without redoing their base map or seeing a performance hit. <a href="!/sd">Sebastian Delmont</a>, who leads the technical team at StreetEasy just <a href="">blogged the details about the switch in "Good bye, Google Maps… thanks for all the fish"</a>. I wanted to highlight a couple key excerpts, which hint to the much larger trend of a convergence of open data, open source, and a large field of mapping providers. This ain't 2005 any more.</p> <blockquote><p>StreetEasy decided to build our own maps using, among other tools, OpenStreetMap, TileMill, MapBox and Leaflet, instead of paying hundreds of thousands of dollars per year to Google. And yes, the money pushed us into doing it, but we're happier with the result because we now control the contents of our maps. <a href="">more</a></p></blockquote> <p><em>...</em></p> <blockquote><p>We did the math and came up with numbers that reminded me of Oracle licensing in 1999. Six, seven, eight hundred thousand dollars. We met with Google salespeople, expecting to negotiate better terms, and they were nice, and they offered us discounts, but only to about half of what we've calculated. <a href="">more</a></p> <p>In our opinion, their price was off by an order of magnitude. It's very, very hard to work out a $2 CPM cost in any site's business model, when most of the time, if you're lucky, you're making $1 CPM off your pages. And yes, StreetEasy does much better than that, and it would not have bankrupted us, but it would have also meant giving away a significant chunk of our profits. <a href="">more</a></p></blockquote> <p>Pricing wise we think this will cost StreetEasy around $1,000 a month hosting with MapBox. They are set up with a <a href="">$499 Premium account</a> and are using the <a href="">new pricing add-ons that we just rolled out</a>. This is more than just talking about gig transfer, this is about <a href="">compositing</a>, <a href="">analytics</a>, and <a href="">simple API integration</a>, and here they are on <a href="">MapBox</a>.</p> <p><img src="" alt="A look at StreetEasy's main base layer in MapBox's analytics." /> <em>A look at <a href="">StreetEasy's main NYC base layer</a> in MapBox's analytics.</em></p> <p>The pricing conversation part is big, but what is bigger is how hot this map looks and how much that matters. Beautiful maps matter. It matters to both StreetEasy and it matters in general and our bet is that once people realize how easy it is going to be to make custom maps with <a href="">TileMill</a> and awesome open data sites like <a href="">OpenStreetMap</a> there is going to be a larger paradigm shift. As Sebastian said, "I think 2012 is going to be the year of the Open Map. And I'm happy to be part of the front lines." And StreetEasy is not alone. This move follows on the heels of Neil Sweeney's post on Fubra making the move to <a href="">"Google Maps Free Alternatives"</a> and more recently Ed Freyfogle from Nestoria blogging on <a href="">"Why (and how) we've switched away from Google Maps"</a> and in general fresh excitement around OpenStreetMap just rocking, like MIT's post on <a href="">"'Wikipedia of Maps' Challenges Google"</a>. Just today <a href="!/sean_larkin">Sean Larkin</a> from <a href="">ThinkShout</a>, a creative open source team that does a lot of environmental work out in Portland captured what this shift means for even small NGOs.</p> <blockquote><p>While beautiful maps have been a staple of the web for the last decade, development of highly-customized maps historically has been expensive and has required a very specialized skill set and tools...Fortunately, the advent of HTML5, CSS3, jQuery, and other modern web technologies has paved the way for new, open source, cross-platform compliant mapping technologies to develop stylish and interactive maps. <a href="">more</a></p></blockquote> <p>This market here could be huge. <a href="">Google has been saying that they are only going to be charging 0.38% of users</a> that are over their TOS limits - but that is still <a href="">4,000 people based on estimates</a> from <a href="">, which has tracked 1 million sites using Google maps</a>. Market wise this breaks down to: 19.7% news/media, 14% businesses, 10% shopping, 8% travel and 5% government.</p> <p>Like I said last week when <a href="">I blogged about our investment priorities for the year</a>, 2012 is going to be awesome.</p> 2012-01-12T00:00:00+00:00 Development Seed Announcing New MapBox Add-on Packages for Power Users <p>In addition to <a href="">'s</a> growing customer base, our users' hosted maps are scaling in popularity and complexity. Today we're announcing aggressive pricing to add more storage and transfer bandwidth to your <a href="">MapBox Premium</a> account. The idea is to provide simple, transparent pricing add-on packages on demand, with no long term commitments. This flexibly and scalability lets your account grow and change just like your business, in affordable $50 increments that you can turn on or off on a monthly basis.</p> <p><img src="" alt="" /></p> <p>MapBox accounts include ample storage for you to share interactive data visualizations and custom base layers that you create with your own data. Now as your storage needs grow, you can add additional packs of 10GB for just $50 each per month.</p> <p>When your map embeds go viral or you integrate them into a website or mobile app with high traffic, you can affordably scale up your MapBox hosting account by adding extra sets of transfer bandwidth at just $50 a month per 50GB. You get the ability to host custom interactive web maps at a fraction of what large search engine companies charge.</p> <p>Increase your storage and bandwidth amounts by going to the Account tab in <a href="">MapBox Hosting</a>, and scale up or down as your needs change.</p> <h2>Extremely competitive pricing</h2> <p>MapBox's sole business is to help you design and share fast, beautiful interactive maps for the web and mobile devices. As a result, we built a <a href="">rock-solid hosting infrastructure</a> that can scale for the most popular sites online at an incredibly affordable price. Concretely, 1,000 additional map views beyond your account's included transfer bandwidth will cost you about 32 cents. <a href="">Google charges $4.00 for each additional 1,000 map views</a> for stock public maps, and more for <a href="">Premier accounts</a>. That's a <strong>savings of over 12 times with MapBox</strong>, let alone all the additional features you get like <a href="">compositing</a>, <a href="">analytics</a>, <a href="">embed widgets</a>, web-based and <a href="">offline mobile</a> support, and <a href="">complete design control</a> using your own data. And there is no long-term contract to sign &mdash; just scale up or down your storage and bandwidth allotments monthly as your needs change.</p> <h2>Committed to open source and open data</h2> <p>In additional to fair pricing, MapBox comes with no <a href="">restrictions</a> on how and where you share your maps. You can make custom maps using your own data in both public and private applications at no additional cost. <a href="">TileMill</a>, our map design studio, is completely free and <a href="">open source</a>, so there is no additional cost for using one of our base maps or designing your own from scratch.</p> <p>We are also committed to providing <a href="">the best data for maps</a> by supporting the <a href="">OpenStreetMap community</a>. You can add an <a href="">OpenStreetMap layer</a> under your own maps for street level detail. Our <a href="">MapBox world maps</a> feature <a href="">clean world maps</a> for data overlays as well as <a href="">satellite</a> and <a href="">terrain</a> imagery from <a href="">public sources</a> like <a href="">NASA</a> and <a href="">Natural Earth</a>.</p> <h2>Make the switch to MapBox</h2> <p>It's easy to migrate your mapping stack to MapBox. Check out our <a href="">extensive documentation at</a> to get familiar with our services and the <a href="">MapBox API</a>. We offer our <a href="">premium subscribers</a> 24-hour turn around on any questions and can help you prepare for a migration to MapBox - just post a note at <a href=""></a>. Learn more about our <a href="">Premium services</a>, and <a href="">take the tour</a>. If you have questions about what kind of hosting will suit your needs or want to get on the phone to learn more, just <a href="">contact our team</a>.</p> 2012-01-09T00:00:00+00:00 Development Seed Major MapBox Investments Coming In 2012 <p>We could not be more excited to kick off 2012. This year will be huge for us in nearly every way as we further grow the <a href="">MapBox</a> platform to let anyone make fast, beautiful, interactive web maps using their own data. We've expanded <a href="">our team</a> with some amazing new talent and put together an incredible roadmap of new features and services. This year we will release <a href="">TileMill</a> on Windows, enable live updates for maps, produce beautiful world maps using the best open data available from <a href="">OpenStreetMap</a> and other public sources, and ship a blazingly fast hardware appliance for power users. After a year of rapid development and expansion, MapBox is a faster, more beautiful, and well priced alternative to traditional web mapping services.</p> <h2>Staying focused on speed and beautiful design</h2> <p>Speed and beautiful design are at the heart of MapBox. Beautiful maps start with a flexible, easy to use design studio. <a href="">TileMill</a> is cartography for the web, from the ground up. Working with familiar <a href="">CSS-like styling</a> and a layers interface, TileMill lets you produce completely custom world maps, highly-detailed street maps, geographic data visualizations, and everything in between. MapBox maps made with TileMill can show custom styles or data for each zoom level and have interactive overlays and actions. This year, we will finish TileMill 1.0 to stabilize new features with an extensible plug-in system.</p> <p>In addition to great design, speed and usability are essential to successful web maps. <a href="">MapBox Hosting</a> is like YouTube for maps with deep level application integration. Your maps are <a href="">sharable by URL or embed code</a>. We have an advanced API to integrate your maps with any website or application. You can <a href="">stack up layers of maps to create a composite</a> &mdash; this makes it really easy to add on your custom data layer of shaded areas or location points on top of a pre-made base map. We provide <a href="">detailed analytics</a> on how and when your maps are being viewed. And all of this is built into an <a href="">ultra-fast, highly-available, and scalable cloud hosting environment</a>.</p> <p>For <a href="">offline map use, we have a free iPad app</a> so you can take your maps with you, whether you need to work in areas without connectivity or just want a really elegant presentation tool.</p> <p>This is the core MapBox platform. Design, share, and interact with fast, beautiful custom web maps. We believe that the web is meant to be interactive and maps should be immersive and unique, not static or stock.</p> <p>We appreciate greatly the support of our clients in this first year too, many of whom share their maps publicly on <a href="">MapBox Hosting</a>.</p> <h2>Big investment plans for 2012</h2> <p>In the first half of this new year, MapBox will further scale investing in the core platform and deliver several new features and services that shatter the standards of web mapping.</p> <h3>TileMill for Windows</h3> <p>Just two months ago, <a href="">after Node.js added native Windows support</a>, we started testing and porting TileMill to a native Windows application. We plan to release a beta version this quarter. Having TileMill as a one click installer for Windows will dramatically grow our base of users. We have staffed up in the past two months to help support the influx of new mappers, and are spending January doing a clean-up and rewrite of our <a href="">core documentation</a>. We are thrilled to open MapBox to PC users. If you are interested in testing out TileMill on Windows, <a href="">sign up to be notified as soon as we launch!</a></p> <h3>Live map updates</h3> <p>Part of the reason MapBox maps are so fast is that they store all of the geographic data in their final format. We have been carefully developing a way to preserve this speed while allowing changes in data to automatically update maps. We are close to launching on demand map updates on the MapBox platform. From being able to detect changes in a Google spreadsheet to querying databases and APIs, we will be releasing a new version of TileMill that lets you plug into more remote data sources and upload the updated maps directly to your MapBox Hosting account when data changes. Again, all of this is going to happen in TileMill and will be a simple add on service to our <a href="">existing hosting plans</a>. We are still working out pricing, but plan on this being affordable enough for <a href="">small NGOs</a> and scalable for <a href="">large sites that we hope will start hosting with MapBox</a>. Sign up for the <a href="">newsletter to hear the latest and be an early TileMill tester when we launch</a>.</p> <h3>Custom world maps</h3> <p>We want MapBox to be the best option for organizations seeking an alternative to <a href="">Google Maps and its new and expensive usage fees</a>. We already offer faster maps with radically flexible design control. To close the last gap, we are currently designing several global base layers all using <a href="">OpenStreetMap</a> and other open data. We are specifically targeting media organizations, which have highly integrated Google Maps in their websites, but anyone will be able to leverage these maps. Designing custom OSM base maps is <a href="">not an original idea</a>, and there are clearly <a href="">more and more beautiful base maps coming out each day</a>. Awesome companies like MapQuest are already aggressively playing in this space, offering <a href="">no preset limits on their free API</a>, which we already make available in <a href="">MapBox Hosting's street level map feature</a>. We are focused on design flexibility and making it easier for people to work with this data in a performant way. We will be blogging more details about this in the coming weeks and will share some of our designs then. If you are thinking about switching from Google maps and want an early preview of where we are going, please email us at to set up a time to talk.</p> <h3>Hardware for power users</h3> <p><img src="" alt="Team meeting on the MapBox Appliance design" /></p> <p>Built for speed and designed for helping teams collaborate, the MapBox Appliance is a fully supported, pre-configured map generation and sharing server. It's designed for a range of use-cases - from powering teams in an office working on large projects in need of the fastest map generation possible, to field sites in need of a portable appliance for mapping on-the-ground with low or no internet connectivity.</p> <p>We will blog more details later this month, when we plan on sharing the first designs publicly. Once we publish final support and pricing options, we will start taking pre-orders for shipping in April.</p> <h2>Creative, disruptive mapping</h2> <p>MapBox's ultimate goal is to build a sustainable space for being creatively disruptive. Further development on TileMill and MapBox Hosting, shipping hardware, and maintaining dynamic world base layers are all huge undertakings, and together they will blow the doors off of the web mapping space. We could not be happier with the progress we've made over the last year building the MapBox platform. We can't wait to begin work on these new initiatives and look forward to seeing the ground-breaking new visualizations our clients create this year.</p> <p>To learn more about MapBox <a href="">take the tour</a>, follow us on Twitter <a href="">@MapBox</a>, and sign up to our <a href="">email newsletter</a> for updates every few weeks.</p> 2012-01-02T00:00:00+00:00 Development Seed New Status Site for MapBox Hosting <p>Check out our new status site - <a href=""></a> - for <a href="">MapBox Hosting</a>. The site monitors for any disruptions across our entire service, allowing MapBox users to quickly and clearly learn about any problems.</p> <p>The site will be used in conjunction with our <a href="">@MapBox Twitter account</a> to increase transparency about any problems that arise and the steps our team is taking to correct them quickly. The site is hosted with <a href="">GitHub pages</a>, separate from our other infrastructure, so it can reliably remain online through outages that could cause some parts of our site to be unavailable.</p> <p>The page is designed to inform you about the overall system status at first glance. When the header is green, everything is normal and your maps are being delivered at high speed. A yellow header indicates a minor service disruption. Non-critical parts of the service may be delayed or unavailable, but all maps are still online. A red header indicates a major service disruption that may be affecting our ability to deliver maps. If the header is ever yellow or red, it means our team is working hard to bring the service back to full operation as quickly as possible. We'll post technical details about the outage and what our team is doing to resolve it to the incident log.</p> <p><img src="" alt="MapBox Status Site" /></p> <p>If you ever have trouble reaching the MapBox service, check the <a href="">status site</a> first. If there isn't anything posted, the site provides instructions on how to report outages to our team by sending an email to, which gets routed into a system that notifies us of critical issues immediately. If the problem isn't an emergency, you can start a discussion with our support team at <a href=""></a>.</p> <p>We're dedicated to maintaining high availability on MapBox Hosting, and this site will help us proactively communicate with customers in the event of a problem.</p> <p>Not a MapBox subscriber? <a href="">Sign up</a> to start hosting your custom maps or <a href="">take the MapBox tour</a> to learn how it works.</p> 2011-12-19T00:00:00+00:00 Development Seed MapBox for iPad 1.7 Released <p>The latest version of our <a href="">MapBox for iPad</a> app has hit the iOS App Store! This release has both visible and under-the-hood changes that I'd like to highlight in more detail.</p> <h3>Legend support</h3> <p>The biggest new feature is map legend support. <a href="">TileMill</a>, our map design studio, supports HTML-based legends when creating maps, and our <a href="">Wax library</a> makes it easy to display legends on <a href="">MapBox Hosting</a> and self-hosted <a href="">TileStream</a> servers. Now the iPad joins the club with first-class support for viewing multiple map legends when working with layers.</p> <p><img src="" alt="MapBox for iPad now supports map layer legends" /></p> <p>Legends stack on top of each other in the same order that their corresponding map layers are stacked, allowing for rearrangement to suit a particular presentation. Additionally, the entire legend interface can be collapsed with a simple left swipe on the content, and the state is remembered between launches of the app.</p> <p>We spent a lot of time refining successive variations of the legend presentation interface, ultimately arriving at what we think is the best possible approach - simple, lightweight, and without extraneous user interface elements. In short, the interface <em>is</em> the legend, and nothing more.</p> <h3>Templating changes</h3> <p>Following up on our release a few weeks ago of <a href="">Mustache-based tooltip templating in TileMill</a>, we've brought this to MapBox for iPad as well. Generally, you won't be creating these templates manually, but if you do, be sure to see the <a href="">TileMill manual</a> section on project settings. The main advantage here is that the HTML in tooltips and legends is sanitized for security reasons, which mostly impacts map embeds and other uses on the web. However, the iPad needs to display these, too, and does in fact render them as HTML in the app.</p> <h3>iCloud backup management</h3> <p>Last month we blogged about <a href="">Apple's issue, then resolution, with developers and iCloud backups</a>. The latest version of MapBox for iPad now supports Apple's new setting, as of iOS 5.0.1, for excluding files from cloud-based device backups. If you have a large amount of maps and other data in your MapBox app, you might want to visit the Settings app and tell MapBox not to backup your documents to iCloud in order to save some cloud storage space.</p> <h3>Other tweaks</h3> <p>We made a variety of other small changes and fixes to the app as well:</p> <ul> <li>Network-based tile images are no longer cached by default, which improves performance in most cases. This can be changed in a new setting.</li> <li>Removed (obsolete) layer type indication in MapBox Hosting previews.</li> <li>Fixed a bug where browsing MapBox Hosting albums could show empty account names in certain situations.</li> <li>Fixed a bug where entering an empty custom TileStream server name would erroneously validate as reachable.</li> <li>Made some slight usability tweaks to the map snapshot save interface.</li> <li>Added a setting to enter a custom MapBox Hosting server for debugging purposes.</li> </ul> <p>Lastly, this version of the app now requires iOS 5 at a minimum. Since all iPads, first- or second-generation, can run iOS 5 and can ugprade for free, we decided to streamline development and take advantage of the latest technologies developed by Apple by dropping support for iOS 4.</p> <p>As always, you can <a href="">download MapBox for iPad</a> from the App Store for free, and you can connect with us on Twitter at <a href="">@MapBox</a>.</p> 2011-12-13T00:00:00+00:00 Development Seed TileMill 0.7.2 Released: Save and Style, Improved Autocompletion, Performance <p>The recent <a href="">TileMill 0.7.2</a> release adds new features to the map design tool that make it easier to get started making maps quickly. There's a new 'Save &amp; Style' button that lets you add a new layer and style it automatically. TileMill now saves projects automatically allowing for new data to appear instantly on the map, making TileMill an even better tool for quickly exploring new datasets. Finally, we've written elegant default styles that serve as great examples for learning Carto, the TileMill stylesheet language. This video walks through these new features.</p> <iframe src=";byline=0&amp;color=d04003" width="500" height="281" frameborder="0" > </iframe> <p>We've made the TileMill workflow smoother in other areas as well. Choosing a file for a new layer now automatically fills out the required <code>id</code> field with an appropriate name. The Carto tab-based autocompletion we announced in <a href="">TileMill 0.7.0</a> has been expanded to include smart completion of variables, properties, keywords, and selectors - and completing all of them in context-sensitive ways. To help figure out what properties describe, we've added tooltips to the style editor so hovering over <code>raster-mode</code> will show its documentation.</p> <p>For advanced mapmakers, there are some more improvements. Default projects now use <a href="">Natural Earth</a> 1.4 data, so they correctly represent South Sudanese borders, and tweaks in the color palette and validation code have made basic TileMill functionality like project listing and editing large stylesheets faster than ever.</p> <p><a href="">Download the new version of TileMill</a> to start using these new features to design your custom maps, and take a look at the <a href="">full changelog</a>. We're looking forward to hearing questions, feedback, and bugs at <a href=""></a>.</p> 2011-12-12T00:00:00+00:00 Development Seed Getting Around the Same Table <p>It was awesome to see so many people involved in <a href="">Desarrollando Latino América hackathons</a> last weekend, which simultaneously took place across six countries in Latin America. I was in <a href="">Mexico City's sprint</a> along with 50+ folks who camped out at <a href="">CitiVox</a>'s office, many of them for the full 30 hour sprint. While I was officially there to judge the apps, I spent the full two days hanging out with everyone, moving around from table to table and seeing what all the build teams were doing.</p> <p><img src="" alt="Innku working with maps" /><br/> <em>Talking about the MapBox API and integration for their <a href="">CrossMatch app</a>. The Innku team would ultimately win the apps competition.</em></p> <p>Sitting around the table together and just being in the same room is a big deal. This builds community and capacity, which is the real value of these kinds of events. Just watching how other teams overheard what folks were working on - like "Oh, you are using Wax with Modest or Leaflet?" - and seeing cross team collaboration shows how being in the same room together and learning from each other creates an environment to co-create. In addition to tech folks learning from tech folks, in the case of Mexico there was an exciting mix of NGOs and tech folks. Tech folks learned more context about the open data space while NGOs got to see how good tech teams build and launch.</p> <p>As the open data space gains fans we need to start taking a critical look at who is really using open data in their operations and then look at ways to grow this base. Our work especially in the international development space continues to show that there are not enough NGOs using open data. This is a real lost opportunity. We can do better development through better data and I am again and again seeing that the first step needs to be more data capacity and more technical knowledge. It is not always sexy work nor as easy as just running an apps competition, but has real potential to help us grow a base of real data users.</p> 2011-12-09T00:00:00+00:00 Development Seed Using Maps to Assess the Global Malaria Burden <p>I just got back from the <a href="">American Society of Tropical Medicine and Hygiene annual meeting</a> where I presented prior research on <a href="">mapping insecticide-treated bednets and community coverage</a> in western Kenya. To show where bednets are really needed in Kenya and globally, I created a quick visualization to of the global malaria burden around the world.</p> <iframe width='500' height='300' frameBorder='0' src=''> </iframe> <p>Mapping like this should be a component of all research reports and in any public dissemination of results and data as it quickly and accurately communicates findings. It was good to see the wide variety of data visualizations utilized by scientists and practitioners at ASTMH to report their latest findings and evaluations of programs. The <a href="">temperature and precipitation maps released last week by the World Bank</a> have shown that data visualization can be highly interactive, graphically appealing, and extremely fast (and if you make maps read <a href="">AJ's great post on design decisions</a>). Reporting research models, results, or evaluations using new data visualizations can generate new ways of thinking and can broaden the reach of the report.</p> <p>In the malaria map I made, I took an open data set - made publicly available by the <a href="">Malaria Atlas Project</a> - used PostGIS to categorize the data into four scale groups, and created a custom style using <a href="">TileMill</a>, our open-source map design studio. In addition to designing the map in TileMill, the interactive and embed functions are provided by <a href="">MapBox Hosting</a>.</p> <iframe width='500' height='300' frameBorder='0' src=''> </iframe> <p>A global map like this gives users the ability zoom in - and then grab it and embed it elsewhere - on regional views like the one above, but still have the capability to zoom out and see a global extent.</p> <p>To give TileMill a try for making maps like this, you can download it for free <a href="">here</a>, and find support and documentation on how to use it at <a href=""></a>.</p> 2011-12-08T00:00:00+00:00 Development Seed Design Decisions for Mapping Temperature and Precipitation at Durban <p>The primary focus of the temperature and precipitation maps <a href="">launched by the World Bank on Friday at the COP-17 meetings in Durban</a> is of course the data being visualized. In the case of <a href=""></a>, this is the projected global temperature change by the end of this century.</p> <iframe src=",worldbank-climate.wbc-borders,worldbank-climate.wbc-borders/mm/zoompan,tooltips,legend,bwdetect.html#2/18.915040730394445/-11.136890071079224" frameborder="0" width="500" height="500"> </iframe> <p> <em>Temperature change in 2100 assuming a world with a continuously increasing global population and regionally oriented economic growth (scenario A2).</em></p> <p>The maps are designed to be highly interactive, allowing users to hover over different parts of the world to get a more detailed look at the yearly annual trends. To achieve this we're using the Google API to generate line graphs on the fly from data stored in the map. Check out our <a href="">tutorial</a> to try this on your own maps.</p> <p>In this post I'll outline some of the design decisions I made with the maps on this site and some tips for approaching similar maps when designing maps with <a href="">TileMill</a>. This is especially actionable since the World Bank opened up a significant amount of the data we used to make these maps in <a href="">the site's /open section</a>.</p> <h2>Data layer as the base layer</h2> <p>The data layers are 2x2 degree grids covering land and ocean. We decided to provide only minimal geopolitical context - an overlay of coastlines and international borders, which are composited on top of the data. With this approach, the data takes the spotlight with full opacity and rich, bold colors. Compared to the traditional mashup approach of transparent overlays on a more complex baselayer, we have a much cleaner result. We are also keeping things modular - any changes that need to be made to the borders style happen in one place instead of a dozen.</p> <h2>Coloring a changing planet</h2> <p>Both the temperature and precipitation maps show projected <em>change</em> in median measurements, so I chose a diverging color scale where white indicates no change and the darkest colors indicate the most change. For temperature this diverging scale ended up being completely one-sided - there is no grid cell where the climate models project a decrease. For precipitation, darker shades of blue indicate areas projected to receive more precipitation, and darker shades of yellow indicate areas projected to receive less.</p> <p><img src="" alt="Projected precipitation and temperature change color schemes" /> <em>Color schemes used to show projected precipitation change (left) and temperature change (right).</em></p> <p>The color scales I have chosen shift hue somewhat, but the primary contrast between steps is in the brightness of the color. I find maps like this to be more readable when brightness change is used in this way because the darker areas immediately stand out - and the darker areas are the ones we want to draw attention to. Compare the above designs to a version where only hue shift is used as a differentiator.</p> <p><img src="" alt="The color scheme with variation in hue only" /></p> <h2>Scale appropriate datasources</h2> <p>The transparent context overlay contains coastlines and lakes from <a href="">Natural Earth</a> and international land borders from the World Bank. Natural Earth data is distributed at three scales: 1:110 million, 1:50 million, and 1:10 million. I used all three scales at appropriate zoom levels in order to avoid detailed areas of coastline clustering into dark blobs. I'm also showing large lakes depending on zoom level according to their Natural Earth assigned Scale Rank - smaller lakes are hidden at lower zoom levels.</p> <p><img src="" alt="Comparison of 50M and 10M lines at zoom level" /></p> <h2>Patterns</h2> <p>Our data layers cover both land and ocean. We want to show these numbers equally, but still orient the viewer as to where land and water are. This can get a bit confusing if we're overlaying lines alone, so I made a series of buffers around the land layer and applied a semi-transparent wavy pattern fill to illustrate which side of the coastline is water and which is land.</p> <p><img src="" alt="Coastline pattern" /></p> <p>A piece of advice of using patterns with TileMill - make sure the pixel dimensions of your pattern can evenly divide 256, the size of a single tile. Then use the <code>polygon-pattern-alignment: global;</code> Carto style to ensure that patterns in different geometries will line up with each other. Example: a pattern image with pixel dimensions of 64x32 will tile neatly.</p> <p><img src="" alt="Illustration of pattern tiling" /></p> <p>A few of the maps patterns were also used to indicate other information on top of the base maps. In this example, we are showing the regular temperature baselayer with an overlay of solid and striped white masking out certain areas. Areas where more color shows through indicate areas with higher percentages of cropland cover.</p> <p><img src="" alt="Screenshot of the croplands map" /></p> <h2>Do it yourself with TileMill</h2> <p>All of these climate maps from the World Bank were designed in <a href="">TileMill</a>, our <a href="">open-source</a> map design studio. <a href="">MapBox Hosting</a> and <a href="">Wax</a> provide the compositing and interactive elements of the maps. For further details on using TileMill to make your own maps, check out our full <a href="">documentation</a>.</p> 2011-12-06T00:00:00+00:00 Development Seed New MapBox Hosting Plans Starting at $5 a Month <p>We're excited to announce new <a href="">MapBox Hosting</a> plans starting at just $5 a month. Our team has been working non-stop to improve the features, scalability, and ease of use of our service, and we're thrilled that our tools are now affordable for anyone making maps.</p> <p><img src="" alt="Premium" /></p> <h2>New plans and upgrades</h2> <p>We have <a href="">four plans</a> to choose from:</p> <table><tbody> <tr> <th></th> <th class='new'>Basic <em>new</em><br/>$5/mo</th> <th>Standard<br/>$49/mo</th> <th>Plus<br/>$149/mo</th> <th class='premium'>Premium<br/>$499/mo</th> </tr> <tr> <td>Storage</td> <td class='new'>250 MB</td> <td>3 GB</td> <td>10 GB</td> <td class='premium'>30+ GB</td> </tr> <tr> <td>Transfer</td> <td class='new'>2.5 GB</td> <td>15 GB</td> <td>50 GB</td> <td class='premium'>250+ GB</td> </tr> <tr> <td>Support</td> <td class='new'>Online</td> <td>Online</td> <td>Online</td> <td class='premium'>Dedicated</td> </tr> <tr> <td>Analytics</td> <td class='new'>No</td> <td>Yes</td> <td>Yes</td> <td class='premium'>Yes</td> </tr> <tr> <td>Maps</td> <td class='new'>MapBox logo</td> <td>Branding-free</td> <td>Branding-free</td> <td class='premium'>Branding-free</td> </tr> </tbody></table> <p><strong>Basic</strong> is perfect if you're getting into mapping and want to host a handful of maps to show off on your blog or small website.</p> <p><strong>Standard</strong> is our workhorse plan for hosting dozens of maps that need to integrate into your websites and applications. We've upgraded this plan for existing customers from <em>1 GB to 3 GB of storage</em> and <em>10 GB to 15 GB of transfer</em>.</p> <p><strong>Plus</strong> works well for organizations that need a boost in storage and transfer as they scale up their mapping operations. You'll have plenty of room to grow.</p> <p><strong>Premium</strong> is for big maps and big traffic. In addition to massive storage and transfer, Premium accounts get dedicated support from our MapBox team, data and design help, 24/7 monitoring, <a href="">and more</a>.</p> <p>If you're not sure of which plan to pick, our <a href="">Plans + Pricing</a> page has a calculator to help you find a plan that fits your needs.</p> <h2>MapBox is map hosting done right</h2> <p>We've been working hard to make MapBox the best way to host tile-based maps on the web, and we're excited to share our progress with you.</p> <p><strong>Direct uploads from TileMill to free hosting</strong></p> <p>Our map design tool <a href="">TileMill</a> has gotten easier to use and more powerful over the last few releases. One of the newest additions is <em>direct upload</em>. Use our one-click upload to get your map online after you're finished designing. If you don't have an account, we'll host it free for seven days, no strings attached.</p> <p><img src="" alt="Uploads" /></p> <p><strong>Dynamic compositing</strong></p> <p>We introduced <a href="">dynamic map compositing</a> this June and were stoked about its potential to make maps faster and more beautiful. Since then our users have pushed it beyond our expectations creating stunning layered maps with great performance. The latest adjustment to our map builder makes it easy to leverage our library of terrain layers, political boundaries, and clean baselayers as starting points for your own custom maps.</p> <p><img src="" alt="Compositing" /></p> <p><strong>Detailed analytics</strong></p> <p>We track every tile request that comes into our system to find out who is looking at your map and from where. Our map statistics page shows you a beautiful report with a timeline, referrers, country origins, and a heat map that shows you exactly where your users are looking.</p> <p><img src="" alt="Analytics" /></p> <p><strong>Embed anywhere</strong></p> <p>Our robust map embeds make putting a map on your website as easy as copying and pasting a snippet of HTML. And all of our maps are mobile ready so your map looks great on your computer and your iPad.</p> <p><img src="" alt="Embeds" /></p> <p>There's much more - take a <a href="">tour of MapBox</a> to catch up on our latest work.</p> <h2>Get started today</h2> <p>If you're making tile-based maps using TileMill or other tools, we think MapBox is the best hosting solution available. We rely on MapBox Hosting every day for our work and we hope you will too.</p> 2011-12-05T00:00:00+00:00 Development Seed Two New Mexico Maps for Desarrollando América Latina Hackathon <p><em>Este artículo está disponible en español <a href="">aquí</a>.</em></p> <p>Today kicks off the <a href="">Mexico City Desarrollando América Latina hackathon</a>, which is part of a wider six country event aimed to develop new applications improving cities in Latin America. <a href="">Eric</a> is in the city to judge applications for the final prize and hang out with the <a href="">Citivox's</a> team, who is hosting the Hackathon at their offices.</p> <p>To ensure that we had some good baselayer maps - made from all open data - we created two maps of Mexico for developers to build off of in the competition.</p> <h3>Mexico City Street Level</h3> <p>The first is of street data in Mexico City made using <a href="">OpenStreetMap</a> data. Developers can display other data sets on this map to show anything from <a href="">bus routes</a> to crime reports to locations of health centers.</p> <iframe width='500' height='300' frameBorder='0' src=''> </iframe> <h3>Provinces, cities, and towns</h3> <p>The second map is of the borders of provinces, cities, and towns in the country, showing different borders depending on the zoom level. This type of map works well to display data such as demographic information or education data like you can see on our <a href="">education achievement maps of Peru</a>.</p> <iframe width='500' height='300' frameBorder='0' src=''> </iframe> <h2>How to use these maps</h2> <p>To start you'll want to create your own map layers of the data you'd like to display using the open source map design tool <a href="">TileMill</a>, which Eric will be helping people using it at the event. You can use the <a href="">Mexico DF Street map</a> or the <a href="">Mexico Borders</a> map as a base for your layers.The MapBox Hosting compositing API allows you to layer multiple tile images by joining tileset ids with commas in the url, such as the example below which combines the "mexico-borders" and "mexico_df" maps:</p> <pre><code>,mapbox.mexico_df.html#10.00/19.4627/-99.0723 </code></pre> <p>More details on this are on MapBox's <a href="">API reference page</a> in the <a href="">map builder documentation</a>.</p> <h2>Open data and open source</h2> <p>Both the Mexico City street map and the Mexico border map were made using open data from <a href="">OpenStreetMap</a> downloaded from <a href="">CloudMade</a> and <a href="">Natural Earth</a>. This data was processed with <a href="">ImpOSM</a> and <a href="">PostGIS</a>, both of which are open source. The maps were then styled in <a href="">TileMill</a> with <a href="">OSM-bright stylesheets</a>, which let us start right away with a beautiful map. Colors were then muted to create a very clean, simple feel that will complement any data placed on top of the maps.</p> <p>To get started making maps <a href="">download TileMill</a> and check out <a href="">documentation</a> on how to use it.</p> <p>We're excited to see what developers will build with these maps and tools at the hackathon and encourage folks to post screenshots of maps to <a href="">@mapbox</a> throughout the day. Look for Eric at the event and on twitter at <a href="">@ericg</a> to talk more about maps, or jump in the #mapbox IRC channel where <a href="">@ianshward</a> and <a href="">@rub21tk</a> will be answering questions on TileMill questions.</p> 2011-12-03T00:00:00+00:00 Development Seed Mapping Peruvian Education Data for Desarrollando América Latina <p>Over the last few days we have <a href="">packaged education data from the 2007 Peru Census</a> ahead this weekend's <a href="">Desarrollando America Latina hackathon</a> in Lima to make it easier for participants to make maps with it. This data is now ready to be used, and you can download shapefiles from <a href=""></a>. The ID's used for each state, province, and district can be copied and pasted into results for other Census questions, which will save data processing and cleaning time this weekend.</p> <p>To give you a sense of what is possible we started playing with the data ourselves. <a href="">Ruben</a> pulled data answering the question "what was the highest level of school you achieved" and used it to construct choropleth maps of responses from Peru's 26 states, 195 provinces, and 1841 districts. There were eight possible responses to the Census question, ranging from no education, to completion of primary and secondary school, to completion of the university. We aggregated this raw data to create three maps showing completion of primary education, secondary education, and university, which are all available on <a href=""></a>.</p> <p><img src="" alt="Mapping Peru's education data" /></p> <p>The site is actually made up of nine separate maps grouped together in sets of three to create three composited maps, with raw maps <a href="">available on MapBox Hosting</a>. Each map shows state data on the lowest zoom. As you zoom in, province data is shown and finally district data. Each composite map consists of one map each for state, province, and district level results. Each of the three pre-composite maps is designed to only show data at certain zoom levels. We used three maps for each composite so we could change the data shown on the map and in the tooltips at different zoom levels.</p> <p>For example, this map shows the percentage of people who completed the university in Peru's different provinces, with the darker color representing higher numbers.</p> <iframe width='550' height='400' frameBorder='0' src=''> </iframe> <p>If you're at <a href="">Desarrollando America Latina</a> in Lima tomorrow, look for <a href="">myself</a> and <a href="">Ruben</a> to talk about map design. We'll have a TileMill appliance for people to use and will be on hand to help install TileMill on personal computers and provide some quick training to help people get started using it.</p> <p>Big thanks to <a href="">Ian Villeda</a> + <a href="">AJ</a> for their help with map design and the development of the microsite built on <a href="">Wax</a>.</p> 2011-12-02T09:00:00+00:00 Development Seed Mapping Transit Data in Ayacucho, Peru <p>We created a <a href="">map of the public bus routes</a> in Ayacucho, Peru, as part of our larger partnership with the city government to help them open up their data. We're excited to share this map at the <a href="">Desarrollando América Latina Hackathon this weekend</a> in Lima and talk about the street data and the process working with the Municipality. Ideally the pattern for opening street data can be repeated in other cities in Peru, and it will be great to share the technical and procedural details with participants at the event.</p> <p>Previously, this transit data only existed in AutoCAD files, accessible to only a handful of people. Now it is publicly available in open formats ready to be used in maps like this and for any other purpose. The bus route map shows where bus traffic is, what streets have the most, and what parts of the city are not served. Streets that in the past just felt heavy with bus traffic are now clearly identified as such and visible on the map. While this map shows data from 2009, we plan to map the latest route data as soon as it is published allowing for a comparison of traffic patterns and bus growth over recent years.</p> <iframe width='500' height='300' frameBorder='0' src=',zoompan,zoomwheel,legend,tooltips,zoombox,attribution.html#16/-13.159262044769351/-74.22483001327514'> </iframe> <p>It was possible for us to make this map because the local government - the Municipality of Huamanga Province - had already opened up their street data, putting it into the global street database <a href=";lon=-74.2132&amp;zoom=14&amp;layers=M">OpenStreetMap</a>. Much of this work was led by <a href="!/Rub21tk">Ruben Lopez</a>, who is working as a dedicated open data apprentice for the Municipality and closely with our team as well. You can see from this before and after shot of the OpenStreetMap database that the city government's data contribution is substantial.</p> <p><img src="" alt="Growth of road data on OpenStreetMap after the Ayacucho city government's release" /></p> <p>Opening up basic street data on OpenStreetMap creates countless opportunities for releasing further data. Looking at just transit data, it's now possible to assess city traffic, identify where traffic lights are needed, and simply show tourists how to get to the best local restaurants. New information can be cataloged, such as intersections with heavy pedestrian traffic, allowing city planners to better direct changes and new traffic and pedestrian signals.</p> <p>We made the bus route map with the open source map design tool <a href="">TileMill</a> and are hosting it online with <a href="">MapBox Hosting</a>. If you'd like to play around with TileMill, you can download it here and find documentation and support at <a href=""></a>.</p> <p>We'll continue to work with the city government in Ayacucho and with Ruben to help guide their open data strategy and look forward to making more maps of it as its released. If you're at <a href="">Desarrollando América Latina</a> this weekend, come talk to us about how we worked with the city government to open up data and mapped it with TileMill.</p> 2011-11-30T00:00:00+00:00 Development Seed Mapping and Data Internship: Winter 2012 <p>We are looking for a mapping and data intern to join <a href="">our team</a> this winter. This internship will focus on designing maps in <a href="">TileMill</a> and researching, cleaning, and processing large data sets. All of this work will be tightly integrated into our <a href="">data projects</a>, and your work will help some of the incredible organizations we partner with.</p> <p>Over the past three months, our projects have ranged from mapping <a href="">disaster risk and vulnerability in the Pacific Rim</a> to <a href="">documenting the famine in the Horn of Africa</a>. In addition to our international development work, we work on data projects domestically. We recently worked with <a href="">NPR</a> to <a href="">map Latino population changes between the 2000 and 2010 census</a> and launched the <a href="">Opportunity Index</a> to <a href="">visualize socioeconomic data across the United States</a>.</p> <p><img src="" alt="" /> <em>Wrapping up a TileMill feature request meeting in early November with the Development Seed production team.</em></p> <p>Our focus this winter will be similar as we expand our work with international development and humanitarian relief organizations, as well as gear up for mapping the U.S. 2012 elections.</p> <p>We're looking for a student (who is taking classes at night) or a recent graduate who is excited about GIS, data visualizations, and international aid and wants to learn first hand ways that technology can help solve real-world problems. The organizations we partner with rely on accurate and well presented data to conduct the critical work they do every day. This internship provides a great opportunity for the right candidate to participate in generating real products that will be used in decision making on the ground. Over the course of the winter, the intern will gain experience in applied GIS and data work, designing maps using <a href="">TileMill</a>, project management, and research.</p> <h3>Key responsibilities will include:</h3> <ul> <li>Design maps using <a href="">TileMill</a> <em>Read about the <a href="">latest 0.7 release</a>.</em></li> <li>Clean and process large data sets</li> <li>Research GIS and demographic data</li> <li>Strategize visualization options for projects</li> <li>Write short briefs on development situations and the availability of geospatial data for select countries</li> </ul> <h3>We're looking for someone who:</h3> <ul> <li>Is excited about GIS and geospatial data visualization. A significant background in GIS is not required. We are looking for someone who grasps the basics and willing to work with us to learn more.</li> <li>Has an eye for beautiful maps.</li> <li>Is creative, resourceful, and able to take ownership over tasks assigned to them.</li> <li>Has an understanding of the situations in which international development or humanitarian relief groups work.</li> <li>Wants to work closely with a passionate team to build amazing tools.</li> <li>Likes a fierce game of <a href="">f</a><a href="">o</a><a href="">o</a><a href="">s</a><a href="">b</a><a href="">a</a><a href="">l</a><a href="">l</a>.</li> </ul> <h3>How to apply</h3> <p>Email <a href=""></a> with the following information:</p> <ul> <li>A map made with <a href="">TileMill</a> and a few details about what you are trying to communicate with it, where the data is from, and why you chose it.</li> <li>A brief note about yourself.</li> <li>Your resume.</li> </ul> <p>This position is full time and located in Washington, DC. There will be a competitive monthly stipend.</p> 2011-11-25T14:00:00+00:00 Development Seed How To Add Images to Maps with TileMill's SVG Support <p>Image support in <a href="">TileMill</a>, our open source map design tool, allows you to add custom SVG markers for point data, letting you create unique aesthetics on maps like the one we made on <a href="">our homepage</a>. I recently started using this feature on project and wanted to demonstrate how adding SVG images works in the context of one of Thanksgiving's pressing issues - worldwide turkey production.</p> <iframe width='500' height='300' frameBorder='0' src=',zoompan,zoomwheel,legend,tooltips,zoombox,attribution.html#2/36.042735653846485/-40.107421875'> </iframe> <p>The data comes from the Food and Agriculture Organization's open data portal <a href="">FAOSTAT</a>, listing out the top 20 producers of turkeys in metric tons of turkey meat.</p> <p>To add images like this to your map the first step is to save them someplace in your file system that TileMill has access to. I find it easiest to keep images in a subfolder of the relevant TileMill project directory, which by default this is ~/Documents/MapBox/project/your-project-name. Create a folder there (let's call it: images), drop in your SVG file, and then head over TileMill.</p> <p>Next add a <code>point-file</code> style to your points layer that references the image:</p> <pre><code>#turkey { point-file: url(images/turkey.svg); } </code></pre> <p>You'll likely want your image to scale based on zoom level. Using the point-transform symbolizer, you can invoke any SVG transform function, including "scale". Don't forget to add quotes around your function - these are required by <a href="">Carto</a>, TileMill's map styling language.</p> <pre><code>#turkey { [zoom=3] { point-transform:"scale(.5)";} [zoom=4] { point-transform:"scale(1)";} [zoom=5] { point-transform:"scale(2)";} point-file: url(images/turkey.svg); } </code></pre> <p>Entering a value of <code>1</code> will display your image at it's original size, while a value of <code>0.5</code> will display an image at 50% of the images original dimensions. Entering only one value maintains your image's relative dimensions, but if you wanted to stretch your image by doubling the width while maintaing the same height, you could enter</p> <pre><code>point-transform:"scale(2,1)"; </code></pre> <p>where the first value multiplies the x dimension (width), and the second the y dimension (height).</p> <p>Suppose you have your point image correctly scaled, but it's is not quite in the right place. With CSV and GeoJSON support in the TileMill, it's not hard to go in and manually change coordinates, but this is clumsy and requires a lot of clicking. For an easier fix, we can turn again to the point-transform symbolizer, with which we can call the "translate" function.</p> <pre><code>point-transform:"translate(20,-40)" </code></pre> <p>This will move the image to the right 20 pixels and up 40 pixels.</p> <p>And you're done! You can <a href="">read more about SVG transforms on W3</a>, and find documentation on other map styling tricks in TileMill at <a href=""></a>.</p> <p>If you are experimenting with map making over the long holiday weekend, check out this week's <a href="">TileMill release</a>. It's now easy to share maps on <a href="">MapBox Hosting</a> in just a few clicks and the service is free for seven days, so give it a try. You can download TileMill <a href="">here</a>.</p> 2011-11-25T09:00:00+00:00 Development Seed TileMill 0.7.0 Released: Autocomplete and Direct Uploads to MapBox <p>We just released <a href="">TileMill 0.7.0</a>, which is now available for <a href="">download on</a>. This release has some incredible new features like autocomplete for <a href="">Carto</a> map stylesheets and direct upload of <a href="">MBTiles</a> to <a href="">MapBox Hosting</a>. It also includes usability enhancements, such as the ability to browse your entire filesystem for data, as well as major bug fixes for SQLite datasources.</p> <p>Watch this video for a walk through of the major additions to TileMill with this release.</p> <iframe src=";byline=0&amp;portrait=0" width="537" height="302" frameborder="0" > </iframe> <h2>Autocomplete</h2> <p>Autocomplete makes it easy for beginners to discover new Carto features and provides a speed boost for experts who already know the ropes. While typing a property name, variable, or value, press the <strong>tab key</strong> to receive suggestions based on what you've typed. Select a suggestion using the arrow keys and press <strong>Enter</strong> to accept the value. It's a good complement to the existing built-in Carto reference.</p> <p><img src="" alt="Carto autocomplete" /></p> <h2>Direct MBTiles upload to MapBox Hosting</h2> <p>TileMill allows you to export your interactive maps as self-contained MBTiles files. Now you can upload those maps to MapBox Hosting without leaving the application. Once they are uploaded you can copy them to your account and embed them on your website. If you don't have an account, you can host your map for free for up to 7 days. This is handy for sharing the maps you make with friends or Twitter followers.</p> <p><img src="" alt="Direct Upload to MapBox Hosting from TileMill" /></p> <h2>Usability and stability enhancements</h2> <p>TileMill 0.7.0 includes a few enhancements that improve usability and stability. The datasource file browser now allows you to browse any directory on your computer, not just the TileMill data folder. You can store data anywhere on your system, organized the way you want, and still easily add it to your TileMill projects with a few clicks.</p> <p>TileMill allows you to add interactive tooltips that appear when you hover over certain regions. The custom token system has now been replaced with the popular <a href="">Mustache</a> template language. Existing projects will be migrated to the new language automatically when you save them, but be sure use tokens like <code>{{page.code1}}</code> instead of <code>[this]</code> on future projects. The new template system is critical because it restricts unsafe HTML and JavaScript. There's documentation on adding interactive tooltips to maps in the <a href="">TileMill manual</a>.</p> <p>Finally TileMill's backend rendering engine <a href="">Mapnik</a> received some bug fixes that make SQLite datasources more stable, add compatibility with PostGIS 2.x, and add support for rendering SVG icons when using marker symbolization on point datasources.</p> <p><a href="">Download the new version of TileMill</a> to start using these new features to design your custom maps, and take a look at the <a href="">full changelog</a>. We're looking forward to hearing questions, feedback, and bugs at <a href=""></a>.</p> 2011-11-22T00:00:00+00:00 Development Seed Sharing Risks and Coordination Maps of the Pacific Rim <p>The <a href="">mapping platform for the the Pacific Rim Coordination Center (PRCC)</a> that just <a href="">launched at the APEC Leaders Meeting</a> is designed to help communicate where disaster preparedness projects are currently taking place in the context of current and historical disasters. Ultimately better decision making happens when data and information are evaluated in the context of the situation, but getting all this information together remains complicated. PRCC's goal is to create a decentralized network of public and private partners working together, with open information sharing serving as the primary coordination method.</p> <p>Using open data and open standards is key for coordinating and decentralizing information between partners, as is bringing this information into a common operating picture like on the main PRCC site, <a href=""></a>.</p> <p><img src="" alt="Dedicated /open page advocates using data outside of the PRCC site" /></p> <p>To help with information sharing the PRCC data site has a dedicated open data section - <a href="">/open</a> - where all data and maps used on the platform are available to access, use, and download. Data is available in multiple formats (shapefiles and CSVs). All maps can be embedded into any other website with just a few clicks (look how <a href="">ReliefWeb embedded Thailand's flooding vulnerability map</a>). And the site's open API allows full access to all the maps on the site.</p> <p>The best way to see what is possible from the map's API is to look at the main site: <a href=""></a>, which is entirely built off the API. (We <a href="">dogfood</a> everything.)</p> <p><img src="" alt="Map of disaster resiliency programs operating in the Pacific Rim by USAID and the private sector" /></p> <p>The PRCC platform visualizes data on three issues: disaster preparedness projects, the risk and vulnerability of specific countries, and 20 years of historical data of crises that have hit the region. This data is visualized through detailed country maps, with the three unique data sets served as different map layers. The initial map you see on the site is one of the entire region, showing where USAID and private sector disaster preparedness and relief projects are taking place and the amount of overall funding.</p> <p>You can then drill down to look at the data on a country level, seeing a country's risks and projects operating there, as well as the extent of a crisis over an extended time period. For example, the Thailand map below shows a time progression of the worsening floods in the region and what areas are most affected.</p> <p><img src="" alt="Scrolling look at flooding in Thailand since it's start three years ago" /></p> <p>Vietnam is another good example of needing to overlay complex data sets to get a more comprehensive picture. The most frequently occurring disasters in the country are tropical storms and floods. As we focus in on Vietnam, you can see the estimated storm risk along the coast as well as browse where the most significant storms over the last 20 years have made landfall. Alongside the disaster data, you can view the project level information within the country to see where projects are operating in the context of past disasters. And you can view all risk and vulnerability data layers together in the maps tab to see a holistic view of the country's overall disaster resiliency. This maps layer switcher allows any user to analyze disaster risk data for any country.</p> <p><img src="" alt="Significant storms to hit Vietnam in past 20 years + all three data layers on same country map of Vietnam" /></p> <h2>Technology</h2> <p>To match the goals of the PRCC, is built entirely on open source tools. We designed the maps in <a href="">TileMill</a>, including using it to add interactivity to them. After downloading the data in multiple formats, we used QGIS and a PostGIS database to load the data into TileMill. Maps were rendered into the <a href="">MBTiles</a> file format. Using <a href="">MapBox Hosting</a>, we uploaded the maps and <a href="">integrated them</a> into the site with the <a href="">MapBox Hosting API</a>.</p> <p>The website itself is just two HTML pages and JavaScript libraries. Everything besides the maps is hosted on <a href="">GitHub Pages</a> using <a href="">Jekyll</a>, similar to how we <a href="">host this blog</a>. Keeping the site lean with no CMS or database allowed us to create an incredibly fast browsing experience and ensure the data could be easily accessible in any bandwidth environment.</p> <p>To see this in action check out <a href=""></a>.</p> 2011-11-21T00:00:00+00:00 Development Seed Improving Disaster Preparedness Coordination Along the Pacific Rim <p>In partnership with <a href="">USAID</a> and the <a href="">U.S. Chamber of Commerce</a>, we just launched the <a href="">Pacific Rim Coordination Center (PRCC)</a> at the annual <a href="">APEC Leaders Meeting</a>. The PRCC maps preparedness projects, visualizing these projects alongside risk and vulnerability data and recent historical events.</p> <p><img src="" alt="Pacific Rim Coordination Center (PRCC)" /> <em>An example of the maps on <a href=""></a> visualizing tropical cyclones in the region.</em></p> <p>These three layers of data &mdash; projects, risk, and vulnerability, and 20 years of historical data &mdash; provide context for decisions makers from corporations and the government to see where there are gaps in disaster preparedness and coordinate together to address them. Right now the PRCC's main focus is collecting more project data to be able to conduct a comprehensive analysis.</p> <p>Secretary Clinton announced the PRCC platform in her remarks at the <a href="">high-level policy dialogue on disaster resilience</a>:</p> <blockquote><p> "I applaud today’s launch of the <a href="">Pacific Rim Coordination Center</a>. This is a partnership between the U.S. Chamber of Commerce and USAID that creates an online platform with open data and social networking and informational tools that citizens and officials can use to save lives."</p></blockquote> <p><img src="" alt="Secretary Clinton announcing the PRCC platform in her remarks at the high-level policy dialogue on disaster resilience" /> <em>You can read more on the Secretary's announcement by in the AFP story on <a href="">"US offers disaster help to Asia-Pacific"</a>)</em></p> <p>The live site was officially presented to the APEC delegates by <a href="">Nancy Lindborg</a>, USAID’s Assistant Administrator for the Bureau for Democracy, Conflict and Humanitarian Assistance.</p> <p><img src="" alt="Nancy Lindborg, USAID’s Assistant Administrator, presenting PRCC to the APEC delegates." /></p> <blockquote><p>"We overlay these projects in the context of visualizing risk and vulnerability and recent historical events. It ultimately will enable organizations to make more data-driven decisions."</p></blockquote> <p>Al Martinez-Fonts, Vice President of the U.S. Chamber of Commerce joined the Assistant Administrator in walking though the maps for the delegates, specifically focusing on why this partnership is important from the private sectors perspective, noting:</p> <blockquote><p>"I’ve learned that while we’re all in this together, we don’t always do the best job of building the right relationships before a disaster strikes. We’re too often silo-ed, even within sectors and organizations... With USAID, we’re trying to do a better job of communicating and coordinating the types of data and information that are needed in this resiliency work."</p></blockquote> <p>CCTV (<a href="">China Network Television)</a> correspondent Daniel Ryntjes had the TV exclusive for on the launch:</p> <iframe width="550" height="420" src=""> </iframe> <p>We will be blog more details around the maps and the technology later this week.</p> 2011-11-13T00:00:00+00:00 Development Seed Apple Resolves Issues With Offline Caches in iOS <p>As a follow-up to <a href="">our post last month</a> about iOS 5's new cache cleaning policy, I wanted to take a moment to recognize Apple's release of iOS 5.0.1 yesterday for iPhones and iPads. It looks like Apple has definitively addressed the issue, which we're quite happy about, and think this change will benefit users of our <a href="">MapBox for iPad app</a> as well as all apps on the platform.</p> <p>The core of the issue was that with the release of iOS 5, which allows backup of devices to iCloud, Apple also instituted a policy of more aggressively clearing out files on the system from so-called "temporary" areas, while also putting the squeeze on developers and apps using the "non-temporary" areas to store large amounts of data.</p> <p>One of our app's core features is the ability to store large and complex maps for offline use using the <a href="">MBTiles format</a>. Individual maps can run in the gigabytes of size, but while we want them to not be sporadically deleted when the system is running low on space, we also don't necessarily want users to have to fill their iCloud accounts with large backups of the maps.</p> <center><img src=""></center> <p>iOS 5.0.1 provides a setting that can be attached to each and every file, as well as folders, allowing for exclusion from iCloud backups. <a href="">Apple's documentation</a> of the feature says:</p> <blockquote><p>Starting in iOS 5.0.1 a new "do not back up" file attribute has been introduced allowing developers to clearly specify which files should be backed up, which files are local caches only and subject to purge, and which files should not be backed up but should also not be purged. In addition, setting this attribute on a folder will prevent the folder and all of its contents from being backed up.</p></blockquote> <p>MapBox for iPad will feature a preference for this setting in the next version, in development now and due out soon.</p> <p>Thanks Apple, for listening to developers in a speedy fashion and adding this functionality. We think everyone will benefit from it, not just offline map users and developers.</p> 2011-11-11T00:00:00+00:00 Development Seed Mapping Opportunity in the United States with Opportunity Nation <p>In partnership with <a href="">Opportunity Nation</a>, we developed a new data site that explores the impact of socio-economic factors on communities across the United States, <a href=""></a>. Mapping the potential opportunity for prosperity in various counties and states across the country creates a clearer picture of where improvement can be made and areas that should be targeted.</p> <h2>Background on the Opportunity Index</h2> <p>The premise of the Opportunity Index starts with three things that affect a person's chances of prosperity in life:</p> <ul> <li>Family environment (active, economically stable parents)</li> <li>Personal characteristics (motivation, drive, ability to adapt and learn new skills)</li> <li>Social environment (availability of jobs, safety, education, healthy environment)</li> </ul> <p>The first of these is straight-up chance, and the second may vary largely based on the other two. So those interested in improving the lives of other people often focus on the third category. Nearly all of the factors in our social environment are human-made and alterable.</p> <p><img src="" alt="Index map" /></p> <p>The <a href="">Opportunity Index</a> attempts to measure the social environment, or access to opportunity of people living in states and counties across the United States. It catalogs 13 different aspects of each state and county, such as unemployment and graduation rates, access to healthy food, and violent crime. These indicators fall into three broad categories: economy, education, and community. The index has a score for each of these categories, as well as an aggregate Opportunity Score.</p> <h2>Visualizing the data</h2> <p>The Opportunity Index is now available as an interactive <a href="">data site</a> that exposes county and state profiles through national maps. Initially, we compare the three scores and overall opportunity through choropleth maps. The full profile of indicators that make up these scores are available by clicking on a county or state on the map. We computed a regional average to expose anomalies&mdash;consider conditions in the Bronx versus its adjacent counties.</p> <p><img src="" alt="Profile of Bronx, NY comparing it to regional averages" /></p> <p>Moreover, counties and states can be compared to each other directly. You can also find any address's profile by entering a full street address, a county and state, or a ZIP Code in the search, which is generously made available by <a href="">OpenStreetMap's Nominatim</a> search via <a href="">MapQuest Open</a>. Finally, each profile is designed with a print style-sheet, so profiles can be used for offline advocacy.</p> <h2>The technology</h2> <p>We wanted to make it incredibly quick to browse the map and toggle better profiles. We also wanted to make sure the Opportunity Index works well on tablets. Both speed and touch controls are native features of <a href="">MapBox</a>, so this was easy to do for the maps. We started with a spreadsheet of all the individual scores for each county and state, by each indicator. Then we loaded this into a PostGIS database to calculate the adjacent county scores and join the spreadsheet to shapefiles from the U.S. Census. Using <a href="">TileMill</a>, we designed the choropleth maps for each score and programmed the <a href="">interactivity</a> you see on the embeddable map. Once the maps are rendered to <a href="">MBTiles</a> and uploaded to <a href="">MapBox Hosting</a>, we're able to use the <a href="">MapBox Hosting API</a> to <a href="">integrate them</a> into the Index.</p> <p>The website itself is just one HTML page and a bunch of JSON documents. The whole application is hosted on <a href="">GitHub Pages</a> using <a href="">Jekyll</a>, as we do for <a href="">this blog</a> and many of our other projects. Reducing the website to its least common denominator - mark-up, styles, data, and scripts - keeps the whole experience incredibly fast. There is no database or CMS to slow things down. See for yourself by clicking through the <a href="">Index</a> (hint: you can press 'esc' to close profile pages). We converted the spreadsheet from CSV to JSON documents for each county and state and calculated adjacent indicator values using a Ruby script, so all data is pre-calculated.</p> <p>For more information about Opportunity Index, check out the 'About' and 'Methods and Sources' sections. To get started designing your own fast maps for free, check out <a href="">MapBox</a>.</p> 2011-11-07T00:00:00+00:00 Development Seed MapBox Plugin for Wordpress <p>The new <a href="">MapBox plugin for Wordpress</a> makes it quick and easy to embed maps from <a href="">MapBox Hosting</a> into a <a href="">Wordpress</a> site. Whether you design your own custom maps in <a href="">TileMill</a> and host them with our easy to use map hosting service, or use existing map layers from the open source <a href="">tileset library</a>, the MapBox plugin makes it easy get maps onto your Wordpress site.</p> <p>If you already have a Wordpress site, you can install the plugin as usual. Once you've done so, you can embed MapBox maps into your site using one of two ways - either by using the <code>mapbox</code> <a href="">shortcode</a> or by copying, pasting, and embedding the code directly from MapBox Hosting into the editor. For this second option, simply visit <a href="">MapBox Hosting</a> and select the map you want to embed from your own collection or from the hundreds of publicly available maps. Click the "embed" button on the map to reveal the embed panel, and adjust the map so it appears exactly as you want it to embed on your site. You can adjust the height and width of the map, as well as select which controls and other options you want to include in your embed.</p> <p><img src="" alt="Embed options led you adjust the view, size, and controls on your map" /></p> <p>When you're happy with the way the map looks, just copy the 'embed code'. On your WordPress site, add a new post or edit an existing one, and switch the editor to "HTML" mode. Paste the embed code where you'd like the map. Save, then view your post and enjoy the map!</p> <p><img src="" alt="A look at your embedded map on a Wordpress site" /></p> <p>When you save the post, the MapBox plugin converts the embed code into a Wordpress shortcode. This <code>mapbox</code> shortcode can take several options, all of which are optional, that you can tweak to make small changes to the embedded map. The full list of options is explained on the <a href="">plugin page</a>.</p> <p>To get started making your own custom maps, download the open source map-making tool <a href="">TileMill</a>, which allows you to either host your maps with <a href="">MapBox Hosting</a> or on your own. Documentation and support for both are available at <a href=""></a>.</p> 2011-11-02T00:00:00+00:00 Development Seed Map Interactivity Library for iOS Released <p>We've just open sourced code that brings embedded interactivity to maps on the iPhone and iPad. The code is available in <a href="">our interactivity branch</a> of the <a href="">Route-Me mapping library for iOS</a>. We will maintain this branch as a separate sub-project so you can easily merge it using GitHub's (and Git's) excellent branching and merging tools.</p> <p>If you are new to map interactivity, check out <a href="">Visible Map</a>, which demos the interactivity in our maps. Tom also has a <a href="">must-read post</a> talking about how UTFGrid works in plain English. Lastly, we've coded up an <a href="">example iPhone app</a> to show how easy it is to use.</p> <center><img src=""></center> <p>We hope iOS developers will take advantage of this library to make more interactive maps for use on the platform. <a href="">TileMill</a>, our open source map design studio, <a href="">allows you to make web-based interactive maps</a> and with the <a href="">MapBox iPad app</a> you can <a href="">use these maps offline and on mobile platforms</a>. And now with this code, and since all of this technology is open source, you can make apps yourself that have this interactivity built-in.</p> <p>The example app makes use of a subset of our beautiful <a href="">Geography Class</a> tile set, which is included in the both the sample code as well as every installation of TileMill. In a data file of just 29MB, we are able to pack in contextual data - in this case the country name and a flag image - for every pixel at every zoom level, making it available when used offline. The <a href="">main class in the app</a> is barely a page of code and covers displaying the map as well as responding to touches and displaying a popup in response.</p> <p>Open sourcing this code rounds out the contribution of all our map libraries as open source. iOS developers now have the ability to use <a href="">MBTiles</a> sets for offline use, <a href="">MapBox Hosting</a> sets from either our hosted service or your own installation of our open source tile hosting software, and full interactivity support for both types, local or remote.</p> 2011-11-01T13:00:00+00:00 Development Seed TileMill 0.6.0 Released with Improved CSV Support and Usability Enhancements <p>I'm pleased to announce another major release of the map design tool <a href="">TileMill</a>, which brings new support for CSV files, better desktop usability, and key stability fixes. You can download the <a href="">latest version here</a>.</p> <h2>Improved CSV support</h2> <p>The familiar file-based layer menu in TileMill now accepts tabular files (with the .csv, .tsv, or .txt extension) for direct rendering. CSV files can be read locally or via URL.</p> <p><img src="" alt="Loading a remote CSV" /></p> <p><em>If you would like to test rendering the above CSV file, download it <a href="">here</a>.</em></p> <p>Many programs can edit CSV files, but LibreOffice is great because it can edit tabular files directly without needing to export a copy. So a file like this can be opened in both LibreOffice for editing at the same time as it is being rendered in TileMill.</p> <p><img src="" alt="TileMill can render directly from tabular data." /></p> <p>Simply save the document in LibreOffice (using "Keep Current Format") and then re-save your TileMill project and the updates will be immediately visible in your map.</p> <p>This feature opens an exciting door to rendering data directly from common sources like <a href=";answer=69066">publicly published Google Docs spreadsheets</a> and emerging data sharing sites like <a href="">DataCouch</a>.</p> <p>This support is driven by the new ability for <a href="">CSV format detection and parsing in Mapnik</a>, the library used under the hood in TileMill for rendering. Because the CSV format is not <a href="">strictly defined</a>, Mapnik works to auto-detect various characteristics like the delimiter used to separate values (commas or tabs are currently supported), the type of newlines (unix, mac, or windows style), and the data types (integer, float, boolean, or string). Finally Mapnik detects fields containing coordinates using column headers, meaning any fields named x, lon, long, or containing the word longitude will be parsed as the x coordinate and fields named y, lat, or containing the word latitude will be parsed as the y coordinate. EPSG:4326/WGS84 is the assumed projection. If no coordinate fields can be detected, then the CSV is not considered valid. If you have CSV files with only addresses, then you should first <a href="">geocode them</a>.</p> <h2>Desktop usability enhancements</h2> <p>This release brings major new advances for desktop users of TileMill on Ubuntu and Mac OS X. The Mac OS X app now supports a clean one window interface, avoiding the need for a separate browser window. This feature leverages the latest support in Mac OS X for <a href="">WebKit</a>, the core technology behind Safari and Chrome. We've also focused on Mac OS X 10.7 Lion support and have added <a href="">fullscreen support</a>, which really lets you focus on map editing in a whole new way.</p> <p><img src="" alt="One window TileMill" /></p> <p>On Ubuntu, TileMill files are now kept in <code>~/Documents/MapBox</code> by default, you can start TileMill from the 'Graphics' section in the Applications menu or launcher, and the process runs as your current logged in user - which will make permissions simpler for sharing data. But for a headless Ubuntu server installation, you can continue using TileMill as a server process using upstart. See the upgrade notes for <a href="">more details</a>.</p> <h2>Other features and fixes</h2> <p>Additionally, in this release users will find:</p> <ul> <li>HTTPS support for remote datasources</li> <li>New support for exporting SVG format maps in addition to PNG, JPEG, and PDF.</li> <li>Several stability fixes for SQLite datasource (more are planned for the 0.6.1 release)</li> <li>Better support for detecting ESRI-variant shapefile projections</li> <li>Improved error feedback for layers that have unknown projections.</li> </ul> <p><a href="">Download the latest TileMill</a> release to check out these improvements, and as always, please post questions, feedback, and bugs to <a href=""></a>.</p> 2011-10-26T00:00:00+00:00 Development Seed The MapBox API <p>The <a href="">MapBox API</a> just got a fresh coat of paint and much-improved documentation to make it easier build new applications with fast, custom maps hosted with <a href="">MapBox</a>. To show it off I wrote a quick demo called <a href="">Scope</a> that uses the API in combination with <a href="">Easey</a> and <a href="">Modest Maps</a> to do a whole new kind of map browser for MapBox's maps.</p> <p>We've already used the API to build custom sites <a href="">for NPR</a>, the <a href="">World Food Programme</a>, and others, providing an established version <code></code> that will continue to work as development on the API continues. We've also added extensive documentation on how to work with the API.</p> <p><a href=""><img src="" alt="API Documentation" /></a></p> <p>So what does the API provide? One example is that you can grab a listing of your maps and information about each one as <a href="">TileJSON</a>, which you can then turn into an interactive map using <a href="">Wax</a>.</p> <p>For instance, here's the <a href="">Baltimore Retro</a> map <a href="">described by the API</a>:</p> <p>{% highlight js %}{ "id":"mapbox.baltimore-retro", "scheme":"xyz", "basename":"baltimore-retro.mbtiles", "filesize":446557184, "name":"Baltimore Retro", "type":"baselayer", "description":"", "version":"1.0.0", "formatter":null, "bounds":[ -76.74498303380417, 39.17336668704772, -76.49504406900537, 39.39976653736744 ], "minzoom":8, "maxzoom":17, "center":[ -76.62001355140478, 39.28656661220758, 12 ], "legend":null, "tiles":[ "{z}/{x}/{y}.png", "{z}/{x}/{y}.png", "{z}/{x}/{y}.png", "{z}/{x}/{y}.png" ], "download":"" } {% endhighlight %}</p> <p>It's super easy to use this with <a href="">Wax</a> and <a href="">Modest Maps</a>:</p> <p>{% highlight js %} wax.tilejson('' function(tilejson) { var map = new com.modestmaps.Map( 'map', new; }); {% endhighlight %}</p> <p>The API speaks <a href="">JSON</a>, a format that has parsers in nearly every programming environment and is especially friendly with Javascript. Every API endpoint is also accessible with <a href="">JSONP</a>, which lets you pull it from MapBox without the need for messy proxies or cross-domain restrictions. For Flash users, we provide a <code>crossdomain.xml</code> file as well, and for those on the cutting edge, the service supports <a href="">CORS</a>.</p> <p><a href=""><img src="" alt="MapBox Scope" /></a></p> <p><a href="">The API is open source</a> and is only <a href="">tied to MapBox's account in one place</a> - so everyone is welcome to tinker with changes or use it as their own map browser.</p> <p>While we're busy making <a href="">TileMill</a> and <a href="">MapBox Hosting</a> amazing, there's so much more that is still waiting to be built. Hopefully this API brings those ideas closer to reality.</p> 2011-10-21T00:00:00+00:00 Development Seed MapBox for iPad 1.6 Released <p>We're happy to announce <a href="">MapBox for iPad 1.6</a>, a major update to our mobile map-building toolset. While this version started out simply, we took several opportunities to make huge under-the-hood improvements along the way, making for a powerful redesign of layering as well as a number of performance improvements.</p> <p>The biggest change in this version is that we removed the distinction between base and overlay tileset layers, something that evolved in our other tools like <a href="">TileMill</a>. This brings all of our tools to the same level of flexibility, allowing any layers to be placed among any others without regard for author intent.</p> <p>Along with the removal of layer types, we've also made huge improvements to the way that layers are manipulated in the app. Chief among these is the ability to reorder any layer immediately by dragging its row in the layer list, without having to enter an editing mode first.</p> <p><img src="" alt="New and improved layer management in MapBox for iPad 1.6" /></p> <p>We've also reversed the ordering of map layers so that the layers nearer to the top of the list are likewise nearer to the top of the stacking order in the map view. This makes for very intuitive layer reordering.</p> <p>Since layer reordering is now much easier, we've also added the ability to switch between showing all map layers and just showing current active ones. This allows you to enable a number of layers, toggle to show only active ones, and then easily reorder them as you see fit without having to work around all of the layers in your library.</p> <p>On the data layer side of things, we've re-enabled reordering of GeoJSON, KML, and GeoRSS layers on the map. This includes path layers such as lines and polygons so that you can have complete control over their ordering to make the clearest visual possible.</p> <p>We've moved point clusters below all other data layers, plus we've added the often requested behavior of stacking clusters based on relative size, making larger clusters bottom-most.</p> <p>While we were working on data layers, we took advantage of some of the latest features of the <a href="">Route-Me map library</a> to add subtle shadows to paths, making for a much better-looking map.</p> <p>On top of all of these changes, we've made many bug fixes, speed improvements (including to map saving and loading), and behavior enhancements to the app. We hope that you enjoy them! You can <a href="">download the app</a> from the App Store immediately.</p> <p>As always, if you'd like to give us any feedback or have any questions, get in touch on <a href="">our support site</a> or on Twitter at <a href="">@MapBox</a>.</p> 2011-10-18T00:00:00+00:00 Development Seed Offline Maps and iOS 5's Cache Cleaning Policy <p>One of the flagship features of our <a href="">MapBox for iPad</a> app is the use of maps while in an offline environment. When we created the <a href="">MBTiles format</a> <a href="">over a year ago</a>, we solved a common problem of storing potentially millions of map tile images efficiently and conveniently for offline use.</p> <p>Our app stores tilesets that you sync (and soon, that you <a href="">download from in the app itself</a>) in the app's <em>Documents</em> folder, which is Apple's recommended place for this sort of data. According to Apple's <a href="">documentation</a> (free developer registration required):</p> <blockquote><p>Only documents and other data that is user-generated, or that cannot otherwise be recreated by your application, should be stored in the &lt;Application_Home&gt;/Documents directory ...</p></blockquote> <p>It goes on to mention the <em>Caches</em> folder as well:</p> <blockquote><p>Data that can be downloaded again or regenerated should be stored in the &lt;Application_Home&gt;/Library/Caches directory. Examples of files you should put in the Caches directory include database cache files and downloadable content, such as that used by magazine, newspaper, and map applications.</p></blockquote> <p>While the documentation mentions map applications, since our app is a tool for creating your own highly custom maps, as opposed to purchasing maps from a centralized source, we've always felt that <em>Documents</em> was the right place for this data. This is especially true when you consider that the main way that people get this data into and out of the application is through syncing with iTunes, which only exposes the <em>Documents</em> folder.</p> <p>Recently, Marco Arment of <a href="">Instapaper</a> fame <a href="">blogged about a change in Apple's 'cleaning' policy</a>:</p> <blockquote><p>In iOS 5, since iCloud backups are now possible, Apple has started cracking down on apps that store too much in any backed-up directory, such as Documents.</p></blockquote> <p>...</p> <blockquote><p>But in iOS 5, there’s an important change: Caches and tmp — the only two directories that aren’t backed up — are “cleaned” out when the device is low on space.</p></blockquote> <p>The end result here is bad news either way for users of iCloud and apps like ours. Either they take up much, if not all, of their cloud storage space storing map tilesets, or they have their data deleted at random times without advance notice.</p> <p>Marco summarizes the issue well at the end of his blog post:</p> <blockquote><p>There needs to be a file storage location that behaves the way Caches did before iOS 5: it’s not backed up to iTunes or iCloud, it’s not synced, but it’s also never deleted unless the app is deleted.</p></blockquote> <p>Here's another vote from us for that.</p> 2011-10-17T00:00:00+00:00 Development Seed Mapping a Google Doc Spreadsheet <p>Often one of the most complex tasks in a mapping project is preparing the data. Before designing the map, developing interactive overlays, or writing copy, the data needs to be in order. To make this process easier, we've developed an add-on script for <a href="">Google Docs Spreadsheets</a> that lets you geocode arbitrary addresses and export spreadsheets as GeoJSON, a file format that works in <a href="">TileMill</a>. With the <a href="">Geo for Google Docs</a> script, you can take a spreadsheet with addresses and turn it into an interactive map with just Google Docs and TileMill. Here's how.</p> <h2>Getting set up</h2> <p>First go to GitHub and <a href="">copy the source code</a> for the Geo for Google Docs script.</p> <p>Next, open your spreadsheet in Google Docs and select <code>Tools</code> > <code>Script Editor</code>. Erase the default <code>function myFunction() {}</code> in the code window, and paste in the source code you copied. Name the project 'Geo', <code>File</code> > <code>Save</code>, and close the window. Refresh your spreadsheet and you will see a new <code>Geo</code> menu next to <code>Help</code>.</p> <p>Now you're ready to use the Geo add-on. It has two simple features: geocode addresses and export as GeoJSON.</p> <h2>Geocoding arbitrary addresses</h2> <p>Say you've got a spreadsheet with a column for addresses. It could be a street address, a ZIP Code, a county or a state name - even a country code. To map this you need to find the geocodes, or longitude and latitude coordinates for these addresses. For locations that are more general, like "Canada", geocoding APIs usually return the coordinates of the centroid - the area's center point - or capital.</p> <p>After you've installed the Geo script in your spreadsheet, you can use the <a href="">MapQuest Nominatim</a> or <a href="">Yahoo PlaceFinder</a> services to get geocodes for your addresses. First select the cells with your address data. This could be one column or several. If you select multiple columns (such as 'Address', 'City', 'State') the columns with be joined together from left to right and sent to the geocoding service. You can also select just a few cells to geocode instead of a whole column. This is useful when you add new rows or update existing addresses and only want to geocode the new data.</p> <p>Once you've selected your address data, go to <code>Geo</code> > <code>Geocode Addresses</code>. If this is the first time you're using the script, you'll need to authorize it to access your spreadsheet and then go to <code>Geocode Addresses</code> again. Now all you need to do is set your preferred API (and enter an API key for Yahoo - an API key is not required for MapQuest), and click <code>Geocode</code>.</p> <p><img src="" alt="Geo menu with data in it" /></p> <p>You should now see three new columns added to your spreadsheet and coordinate data being entered into those. The third column is a response back from the geocoding service about the resolution of the geocode - something like 'residential' for street address, 'administrative' for state level match if your using MapQuest, or a numeric score if you're using Yahoo. This is particularly useful for checking the accuracy of your geocodes. For instance if you submit a country name and get back a 'residential' response, its likely that the geocoder could not figure out what to do with that address and that you should try to make it more specific, perhaps by using a three-digit code like 'USA' instead of 'United States'. If you find your geocodes are still inaccurate or slightly off, you can manually enter coordinates. Try using a service like <a href="">Get Lat Lon</a>. Also, we do not recommend you use this script for more than 1,000 geocodes at a time. For large datasets, <a href="">try Google Refine</a>, which we have successfully used for up to 30,000 addresses.</p> <p>Many web services exist for geocoding addresses. We use MapQuest's Nominatum search most often, as it is based on Open Street Map data and does not have a defined rate limit. We also use Yahoo PlaceFinder occasionally because it too has a generous rate limit and terms of service. We tend to avoid geocoders with expensive licensing, like the Google Maps API. Before using any geocoder, make sure to review its terms of service. If you'd like to add a new geocoder to this script, please <a href="">fork it on GitHub</a> and submit a pull request. General issues should be <a href="">reported on GitHub</a> as well.</p> <p>Now that your spreadsheet has geospatial data (coordinates), it's ready to be mapped.</p> <h2>Exporting to GeoJSON</h2> <p>To load your spreadsheet data into <a href="">TileMill</a> or another GIS application like <a href="">Quantum GIS</a>, save the data as a <a href="">GeoJSON</a> file. To do this with the Geo script, select all the data you want to export and go to <code>Geo</code> > <code>Export GeoJSON</code>. Select a column with unique content for each row, and specify the columns with your coordinates. Then click export and download the file.</p> <p>To use this in TileMill, copy the file to your <a href="">MapBox data directory</a>. Then open TileMill, add a new layer, and specify this file. Now you're ready to start designing your map. For more on that, see the <a href="">TileMill Manual</a> and <a href="">Support Forum</a>.</p> 2011-10-12T00:00:00+00:00 Development Seed Mapping Latinos in the United States with NPR <p>The Hispanic population in the United States has grown significantly in the past decade, with Latinos now making up every 1 in 6 residents. Much of the rapid growth - 118 counties have experienced a population change of more than 250%, four have experienced change of more than 1000% - is in the South and Midwest, areas that previously had low Hispanic populations. This morning NPR kicked off <a href="">a series chronicling this population change</a> and how its changing our overall makeup as a country and impacting towns across the United States. As part of its coverage, NPR is using an <a href="">interactive map of Census data</a> to show the story of population change.</p> <p><img src="" alt="Mapping the growing Hispanic population in the United States" /></p> <p>Using data from the 2000 and 2010 Census, the map shows where the Hispanic population is increasing, which is the case for 2,962 out of the 3,142 U.S. counties. The percentage of population change is shown via a color scale, with the darker orange and red depicting areas with the fastest growth. This is shown alongside race and ethnicity data, with all data coming from the Censuses. Users can view data on the state, county, and census tract level - allowing them to drill down to see which towns are experiencing the most change. For example, you can see that Luzerne County, PA - home to the towns Scranton and Wilkes Barre - is seeing its Latino population grow at 478.8%, while its non-Hispanic population has declined by 5.11%.</p> <iframe src=",,npr.usa-census-hispanic-PR-2-14,npr.usa-census-hispanic-state-2-5_npr,npr.usa-census-hispanic-county-6-9-v2,npr.usa-census-hispanic-tracts-contusa-z10-14,npr.usa-census-hispanic-tracts-ak-hi-z10-14,,tooltips,legend,bwdetect.html#7/41.37100000000001/-74.57400000000003" frameborder="0" width="500" height="400"> </iframe> <p>You can also opt to view population change on a whole, where you can see that Nevada, Arizona, and Utah are growing the fastest with total population growth of more than 20%, but are just in the mid range as far as increases in their Hispanic populations.</p> <iframe src=",,npr.usa-census-totpop-PR-2-14,npr.usa-census-totpop-state-2-5,npr.usa-census-totpop-county-6-9,npr.usa-census-totpop-tracts-conusa-10-14,npr.usa-census-totpop-tracts-ak-hi-10-14,,legend,bwdetect.html#4/39.62850636514826/-90.11440671795665" frameborder="0" width="500" height="400"> </iframe> <p>Additionally, NPR's map highlights five cities - Los Angeles, New York, Chicago, San Francisco, and Washington, DC - and zooms in from it's interactive homepage to show the stories of these cities, all with traditionally large Hispanic populations. Drilling into the census tract level reveals interesting stories. For example in Washington, DC, you see that the historically Hispanic neighborhoods Columbia Heights, Mt. Pleasant, and Adams Morgan all saw large decreases in Hispanic population while nearby suburban towns saw huge increases.</p> <iframe src=",,npr.usa-census-hispanic-PR-2-14,npr.usa-census-hispanic-state-2-5_npr,npr.usa-census-hispanic-county-6-9-v2,npr.usa-census-hispanic-tracts-contusa-z10-14,npr.usa-census-hispanic-tracts-ak-hi-z10-14,,tooltips,legend,bwdetect.html#11/38.89511885176609/-77.03640740007187" frameborder="0" width="500" height="400"> </iframe> <h2>Technology behind the map</h2> <p>This map was built using all open source tools and open data. We used Postgresql/PostGIS to handle the data, our map design studio <a href="">TileMill</a> to create the map, and the JavaScript libraries <a href="">Wax</a> and <a href="">Easey</a> to add interactivity to the map. The map itself is hosting on our <a href="">MapBox hosting service</a>.</p> <p>All data comes from the 2000 and 2010 U.S. Census. It was downloaded from the <a href="">Investigative Reporters and Editors Census data website</a> and combined with <a href="">Census Bureau shapefiles</a> in a Postgresql/PostGIS database. <a href="">Tilemill support for PostGIS</a> allowed for a full integration of multiple levels of census data into one complete map. The roughly 1GB of data is then displayed on the map and is openly available in <a href="">MBTiles format</a>. The map - and any view of it - can be downloaded into any website just by clicking on the scissors icon and copying and pasting that code.</p> <p>Throughout the week, NPR will be releasing stories on the changing Hispanic population. We highly recommend you read and listen to today's stories, <a href="">How Latinos Are Reshaping Communities</a>, <a href="">A Look At Iowa's First Majority Hispanic Town</a>, and <a href="">Young Hispanics To Keep Shaping U.S. Landscape</a>, and <a href="">follow the series</a>. You can explore the <a href="">interactive map</a> on the NPR website.</p> 2011-10-10T00:00:00+00:00 Development Seed MapBox for iPad 1.5.1 Released <p>We've just released <a href="">MapBox for iPad 1.5.1</a>, improving <a href="">GeoJSON support</a> and preparing the app for the imminent release of iOS 5. We've also fixed a couple of small bugs and adjusted the app to better reflect our <a href="!/MapBox/status/118743198137974786">renaming of TileStream Hosting to MapBox Hosting</a>.</p> <p>In this post I'll give some more details about the new GeoJSON features. With 1.5, we added support for <code>Point</code> and <code>LineString</code> elements, but now we've expanded that to include <code>Polygon</code> items, like the one in the image below. In addition, we've added support for all of the collections like <code>MultiPoint</code>, <code>MultiLineString</code>, <code>MultiPolygon</code>, and <code>GeometryCollection</code>. With these we've rounded out support for everything in the <a href="">GeoJSON spec</a>.</p> <p><img src="" alt="A look at Polygon support in the MapBox ipad app" /></p> <p>We are continuing development and testing of some new features, including <a href="">in-app MBTiles download support</a>. Stay tuned for a major release of MapBox for iPad soon! In the meantime, you can keep up with our work on Twitter by following <a href="">@MapBox</a> or starting a conversation at <a href=""></a>.</p> 2011-10-03T00:00:00+00:00 Development Seed Large Scale International Boundaries Released by State Department <p>Today the Department of State's Humanitarian Information Unit released a new data set, <a href="">Large Scale International Boundaries</a>, presenting it for the first time at the <a href="">Tech@State conference</a>. This is the most accurate and complete set of world boundary lines believed to be available. Most lines are accurate to within one kilometer, and no lines are known to exceed four kilometers of inaccuracy.</p> <p>From the Humanitarian Information Unit's description of the data:</p> <blockquote><p>The boundary line depiction research (“recovery” of the authoritative location of the line) has been done over the past decade or so by geographers at the State Department and colleagues from other agencies, and is based on modern imagery, elevation data, relevant maps, treaties, international arbitration and court rulings, and other sources.</p></blockquote> <p>The dataset is available immediately as a <a href="">public layer on TileStream</a>, and will by available on early next week. The layer is transparent and can be combined with other layers via the <a href="">TileStream</a> map builder. Here is is on top of World Blank Bright, a basic land area layer:</p> <div id='ts-embed-1316798749851-script'><script src=';size%5B%5D=536&amp;size%5B%5D=300&amp;center%5B%5D=26.56494140625&amp;center%5B%5D=17.72775860985218&amp;center%5B%5D=3&amp;;layers%5B%5D=hiu.lsib-dark-labelled&amp;options%5B%5D=zoompan&amp;options%5B%5D=zoomwheel&amp;options%5B%5D=zoombox&amp;options%5B%5D=attribution&amp;el=ts-embed-1316798749851'> </script></div> <p>The <a href="">MBTiles</a> map was designed and rendered with <a href="">TileMill</a>, our open source map design studio. In order to get great looking lines, we preprocessed the data to some extent before rendering. The lines were grouped and merged based on their properties in order to avoid potential rendering oddities, and also to reduce the amount of data in the database without losing any information relevant to the cartography. We also derived simplified geometries for small-scale resolutions.</p> <p>If you are a TileStream Hosting customer, this layer is available for you to use on your own maps right now via the <a href="">map builder</a> feature. Anyone is also free to download the MBTiles file for use with our <a href="">iPad App</a> or <a href="">other software that supports MBTiles</a>.</p> 2011-09-23T00:00:00+00:00 Development Seed Maps Abuses Around the World <p>This morning the U.S. Department of State's <a href=""></a> program released new visualizations of data contained within its <a href="">human rights reports</a>, one of the most important document tracking abuses reported around the world. The sad reality is that this is a long report, and released as a PDF document it's time consuming to read and make sense of. By releasing this data on maps, is able to hone in on specific human rights issues - like <a href="">Anti-semitism in Europe</a>, <a href="">Internet Freedoms in the Middle East and North Africa</a> and <a href="">Criminalization of Sexual Orientation and Gender Identity in South Asia</a> - and better call out, leverage, and communicate about this data.</p> <p><img src="" alt="Anti-semitism map on the homepage of" /></p> <p>The team will present these maps, their strategy around them, and their plans to visualize more data in online maps this afternoon at the <a href="">Tech@State data visualization conference</a>, in the <a href="">State Department and USAID Data Visualization Projects panel</a> at 1:00 pm. If you're attending Tech@State, be sure to stop into the session and read on for more details on how they took data previously released as text in a PDF and mapped it, and why.</p> <h2>Mapping paragraphs</h2> <p>A large portion of the information presented in these maps was originally communicated in paragraph form, meaning that specific data to map had to be identified and additional textual information presented elsewhere on the map. The <a href="">Anti-semitism in Europe</a> map does this in two ways. The first map view is of Europe as a whole, showing circles scaled to the aggregate instances of anti-semitism reported in each country. Users can click on these circles, bringing up a country overview with text describing the general status of anti-semitism within the country.</p> <p>The user can then drill down, revealing randomly placed dots that contain textual information on specific incidents that occurred within the country. This exposes a large amount of textual data - 49 countries in Europe with about 170 incidents comes to 220 paragraphs of text. In this way, the map quickly communicates where anti-semitism is a problem across Europe, and then lets users drill down to get more information and ultimately a description of each incident.</p> <div id='ts-embed-1316735017396-script'><script src=';size%5B%5D=520&amp;size%5B%5D=400&amp;center%5B%5D=18.54492187499997&amp;center%5B%5D=48.13676667969268&amp;center%5B%5D=3&amp;;layers%5B%5D=jewish_pop_europe_full&amp;;options%5B%5D=legend&amp;options%5B%5D=zoompan&amp;options%5B%5D=tooltips&amp;options%5B%5D=zoombox&amp;options%5B%5D=attribution&amp;el=ts-embed-1316735017396'> </script></div> <p>The maps on <a href="">Internet Freedom</a> and <a href="">Criminalization of Sexual Orientation and Gender Identity</a> both show data at the federal level, therefore making more sense to present the data as choropleths. Users can access similar country-level textual data in these maps by scrolling over a country to pull up an interactive text box.</p> <p><img src="" alt="Mapping internet freedom on Egypt" /> <em>A look at the country overview of Egypt showing government monitoring of the internet</em></p> <h2>What's next for</h2> <p>Human rights reports are filed annually for every member country of the United Nations. Currently, this data is locked away in lengthy PDFs. These three maps prove conceptually how this data can be communicated and shared quickly via online maps. As more information from these reports is released though online data visualizations, this information will be able to be shared, combined, and analyzed in a dramatically faster way.</p> <h2>Built with open source</h2> <p>These maps were created using the map design studio <a href="">TileMill</a>. They are hosted via <a href="">TileStream</a>, and are publicly available to use in <a href="">'s TileStream account</a>.</p> <p>Look for more maps being posted at soon, and if you're at Tech@State today stop in to their panel or look for Scott Jones to talk more about this initiative.</p> 2011-09-23T00:00:00+00:00 Development Seed Where Is the Hunger? <p>Today <a href=""></a> released an <a href="">interactive feature</a> using open data to walk through step-by-step how the famine has spread, what's causing it, and what world leaders are doing in response. This is part of a the much larger open data movement this past month as we've been working with USAID and the World Food Programme to process open data and show the impact and consequences of the famine in the Horn of Africa. 750,000 people's lives are threatened. This is the worst drought the region has had in 60 years. And it's complicated by civil conflict that limits access to much of the most-impacted regions by humanitarian organizations.</p> <p><img src="" alt="IDP camps in Mogadishu on 'Where is the Hunger?'" /></p> <p>'s "Where is the Hunger" is a highly interactive presentation that uses the <a href="">open data USAID Administrator Raj Shah released just this Monday</a> to make the agency's data more accessible and usable. Earlier this week USAID <a href="">featured these maps on their own FWD campaign site</a>, which is <a href="">raising awareness</a> about the famine by encouraging people to learn about the causes and response and pass on the information and opportunity to donate.</p> <p>Since this data is released in open formats, <a href="">including MBTiles and TMS tile server endpoints through TileStream</a> for the maps and as <a href="">raw data on</a>, organizations like ONE can quickly leverage it in their own work. This builds on what <a href="">WFP</a> and <a href="">InterAction</a> have been doing too. Both feature maps that pull directly from USAID data. Now as USAID updates its understanding of the crisis that new information is immediately shared to these other organizations. This is scalable to all of organizations doing complimentary work.</p> <p>We helped ONE craft this story using <a href="">MapBox</a>. Like all of our past projects, we used <a href="">TileMill</a> to design custom interactive maps and <a href="">TileStream</a> to host them in a fast, reliable cloud infrastructure. What's most exciting though, is how it's possible to tie these raw maps together into a tight story using javascript <a href="">libraries</a> like <a href="">Wax</a> and <a href="">Easey</a>.</p> <p>We're really excited to partner with ONE on this feature. Check it out at <a href="">Where is the Hunger?</a>.</p> 2011-09-22T00:00:00+00:00 Development Seed How Interactivity Works with UTFGrid <p>Adding interactivity to millions of objects on a map requires some tricks. <a href="">Tom stunningly visualized</a> the inner workings of <a href="">UTFGrid</a>, an encoding scheme that efficiently encodes interactivity data for map tiles that has made its way into all of our projects, including <a href="">TileMill</a>, <a href="">TileStream</a>, and <a href="">Wax</a>, in his Visible Map. This also lets you explore the stages <a href="">Wax</a> takes to retrieve the interactivity information associated with a pixel.</p> <p>While this is a good introduction to how UTFGrid brings interactivity to maps, in this post I'll give a behind the scenes look at some of the design decisions we made to best use interactivity in our map design and hosting services.</p> <h2>Tiling data</h2> <p>Once your map has millions of objects to interact with, it's no longer viable to have users download all of the data and cache it in the browser - it's way too big. Loading lots of data like this also means that the time required to do lookups increases in a linear way. This rules out vectors and polygons as data transfer means, as <a href="">Tom discussed in his Where 2.0 talk</a>.</p> <p>Luckily when you have millions of objects to show on a map, you can't interact with them all at once anyway. Users might zoom in, bringing the majority out of scope, or there might be more items than physical pixels in the map. Taking inspiration from Google Maps, we decided to send data in tiles. This makes it viable to add interactivity to millions of objects on the map while limiting the data the user has to download to the region that is actually being viewed.</p> <p><img src="" alt="A look at how we tile interactivity data" /></p> <h2>From polygons to grids</h2> <p>Even with tiled data requests, there are still a lot of points and polygons and querying in polygons is an expensive operation, one that must be done every time the users moves the mouse. Creating a lookup table for each pixel solves that problem and makes lookup time linear. But with this approach it's necessary to either calculate the lookup table in the browser, causing a significant initialization cost, or generate that table on the server and send it to the browser.</p> <p>While JavaScript is generally fast, it's still an interpreted language, and our maps will also be served on mobile devices where computing power is scarce. We want our maps to be as fast as possible, so we decided to generate them on the server. As it turns out, a two-dimensional lookup table is conceptually very similar to a plain image. However, we can't use the actual map image because compression artifacts, overlaid data, antialiased gradients, or text don't allow association of a pixel with a particular country. What we'd need is a plain image without antialiasing, with every feature having a different color. It turns out that <a href="">Mapnik</a> can do that thanks to <a href="">Dane's</a> amazing work, and <a href="">node-mapnik</a> now supports rendering those "grids".</p> <h2>(Ab)using UTF-8</h2> <p>Bringing the grid data to the client is still an issue. A 256x256 grid has 65,536 data points, requiring an efficient way to encode and decode it. As a first measure, we're reducing the 256x256 grid to just 64x64, exploiting the fact that interaction with a single pixel is pretty hard anyway, especially on mobile devices. We still need to encode 16,384 data points. Encoding the grid as an actual PNG image would leverage PNG's excellent zlib compression, however decoding the data in the browser is non-trivial because we'd have to paint the image to a canvas to access its pixels (or decode the PNG/zlib compression manually).</p> <p>The easiest way to get plain data to a browser is to encode it as JSON, and that's what we did. We encode the grid data into a JSON data structure by applying a couple of tricks. Each row is a string that contains one character for each column. Additionally, using JSON allows us to easily associate complex data structures with every pixel (or group of pixels when using a 64x64 grid).</p> <p>To associate data with each pixel, we just associate each feature in a grid tile with a number, starting with 0, and include a mapping of that number to the actual data. Using plain Unicode strings has the advantage that we can essentially encode that kind of binary data into JSON. With <a href="">UTF-8</a> as the transfer encoding, we get some additional benefits:</p> <ul> <li>Requires only one byte for the first 93 features (see below for why this is exactly 93)</li> <li>Automatically uses 2 and 3 bytes for each code point if required.</li> <li>Every browser supports UTF-8 decoding</li> </ul> <p>JavaScript uses <a href="">UCS-2</a> encoding internally, so strings can only contain Unicode code points from the <a href="">Basic Multilingual Plane</a> (the code point 0 through 65,535), but given that our tiles are only 256x256 with grids only being 64x64 by default, that's sufficient for our purposes.</p> <p>JSON strings need to escape the non-printable control character code points 0 through 31 as well as <code>"</code> and <code>\</code>, so we're just skipping those characters. Otherwise we'd end up with a bunch of literal ASCII <code>\u0000</code> (6 bytes instead of 1). Let's look at how we encode some characters:</p> <ul> <li><strong>0</strong>: This number is guaranteed to occur in every grid tile. Using this <a href="">algorithm</a>, we add 32 which results in code point <code>32</code> (<code>0x20</code>). Displayed in ASCII, this is a space character and the binary representation is <code>0010 0000</code>.</li> <li><strong>93</strong>: Adding 32 makes this number greater than 34 and 92, so we have to add an additional 2 to skip <code>"</code> and <code>\</code>, resulting in the code point 127 (<code>0x7f</code>). In binary, this is <code>0111 1111</code>.</li> <li><strong>94</strong>: This number is above UTF-8's 1 byte threshold. Expanding to 128 (<code>0x80</code>) requires encoding this as 2 bytes: <code>1100 0010 1000 0000</code>.</li> </ul> <p>When we do that with every pixel in the grid, we end up with something that looks like this:</p> <p><img src="" alt="A look at how we use UTF-8" /></p> <p>Interestingly, our end result basically looks like ASCII art. This makes visual validation and sanity checks very easy.</p> <p>We also observe that most of that data is very uniform, and gzipping the resulting JSON file typically results in grids that are typically just 1-3 KB. Decoding the grid in the browser is easy as well. We essentially just call <code>grid[row].charCodeAt(col)</code> to retrieve the Unicode code point and reverse the transformation to obtain the key for the associated data.</p> <p>If you're curious, have a look at the <a href="">specification</a> and be sure to check out <a href="">Tom's walk through of UTFGrid in Visible Maps</a>.</p> 2011-09-21T00:00:00+00:00 Development Seed Advancing Fast and Open Mapping Standards <p>Tomorrow I'm meeting with the <a href="">Open Geospatial Consortium (OGC)</a> to talk about the <a href="">MBTiles specification</a>, the format we use to store map tiles from <a href="">TileMill</a> and serve them from <a href="">TileStream</a>. It's a very simple specification built upon the open-source database <a href="">SQLite</a> and enhanced with <a href="">compression</a> behind the scenes.</p> <p>In the course of creating <a href="">MapBox</a>'s toolset of map tile servers, clients, styling tools and languages, and a whole lot more, we've written a lot of new code and designed short, compact new standards - of which MBTiles is just one. While using appropriate caution to avoid reinventing the wheel, we needed formats that would allow us quickly serve, share, and transfer thousands of map tiles.</p> <h2>Where these standards came from</h2> <p>With our map design studio TileMill, we needed a fast stylesheet language with error handling and other new features, so designed <a href="">Carto</a>, a riff off of <a href="">Cascadenik</a>. Carto is the language of TileMill styles, and in that purpose it works well. Similarly when we started to implement <a href="">map sharing in TileStream</a>, <a href="">TileJSON</a> was born. It's a format for describing tiled maps that you can also use to auto-configure maps in <a href="">Wax</a>.</p> <p>After struggling with file-based tilesets with <a href="">Maps on a Stick</a>, <a href="">Justin created MBTiles</a>, a format that stores tiles in <a href="">SQLite</a>, to support tilesets on the <a href="">MapBox iPad app</a>. MBTiles opened the door for better moving and managing of tilesets, supporting compression, and lots more.</p> <p>And so in the course of our rather fast development cycles, we've come up with several standards. They're in various states of standardization - MBTiles and TileJSON are well-described in specs while Carto's standardization has just begun. What we're doing is born of the web - using <a href="">JSON</a> in place of XML, and making performance a priority at every turn.</p> <h2>Where MBTiles, Carto, and TileJSON are headed</h2> <p>We want to work harder to make our work open and compatible. We also want to make it easier to combine maps and swap out parts of the stack as much as you want. We've made some progress here, with the <a href="">the MBTiles spec having been adopted by quite a few projects</a> so far, but there's more to do.</p> <p>The OGC is well known for popularizing WMS, WFS, and other well-established standards. The organization could take the role played by the <a href="">w3</a> or <a href="">WHATWG</a> in web standards for mapping technology. Right now the ecosystem is undecided - split between independent specifications like <a href="">GeoJSON</a>,standards that are managed by the OGC, and de-facto conventions like <a href="">OpenStreetMap's slippy map tilenames</a>.</p> <p>So there's a lot more to learn as far as standardization. We're trying to push the boundaries of mapping in the web space and elsewhere, but we don't want our tools to be the only choice, or anyone's data to be locked-in.</p> <p>For more background on the OGC and this meeting, <a href="">check out its website</a> and <a href="">the meeting schedule</a>.</p> 2011-09-20T00:00:00+00:00 Development Seed