After releasing their wonderful City Guides app, National Geographic has started rolling MapBox into their web platform. The travels, tweets, and photographs of Andrew Evans, Digital Nomad, are posted in real-time on the map as he circles the globe.

We're excited to announce that Vladimir Agafonkin, the creator of Leaflet and lots of other great open-source mapping tools, has joined MapBox. Ever since we switched MapBox.js to Leaflet, we've been collaborating with Vladimir and become big fans of his work.

Vladimir has been involved in open source and OpenStreetMap for several years and has worked on everything from vector rendering to map editing and algorithmic challenges. He will be helping us build the future of interactive mapping tools, as well as maintaining Leaflet. In his free time, he's also the frontman of the excellent band Obiymy Doschu.

I'm on my way to Geneva for a technical workshop with the UN Environmental Program. In my talk I will be focusing on the role of open data solutions and maps as a framework to measure development, widen transparency and increase accountability. If you are in Geneva and want to know more, get in touch on Twitter: @brunosan.

What if the map on your iPhone was responsive, changing the shadows based on the time of day? We're experimenting with this new level of customizable maps. From planning a hike at a particular time to having the map auto adjust as you walk — we're playing with ways to dynamically adjust maps based on your environment.

Here's one of our little experiments that demonstrates this — dynamic hillshading, created with the power of your browser. It allows you to instantly adjust the position of the Sun and other parameters that affect how the terrain is illuminated.

It's a combination of focused technology —TileMill generates a map that encodes height into color, then Canvas interprets each tile and we dynamically compute shadows and highlights with Web Workers.

Hundreds of acoustic sensors are monitoring gunfire across DC. The full interactive map visualizing hotspots is now live on The Washington Post. The DC Police Department started using ShotSpotter 8 years to detect gunfire and has extended the live sensor network to cover roughly a third of the District.

Eden Halperin just joined the MapBox team in SF! Drawing from his background in interaction design, data visualization, and mobile product design, Eden will be jumping into his role as a designer with collaborative projects in OpenStreetMap, user experience design, and mobile interfaces.

Eden worked previously for Base CRM, focusing on product experience design, with a strong focus on mobile interaction and data visualization.

We just deployed a redesign of mapbox.com, with a new editor UI that's faster, easier to use, and more forward-thinking. The redesign is just the start of rethinking our entire .com experience. We've laid the groundwork for even bigger features, from a store for accessing third party data to the complete integration of TileMill and GeoJSON.io into the core of MapBox's web application.

What's new

Editor

Style your map, add markers, or search within the map using the cleaner editor interface.

Map management

Keep track of your activity, usage, and MapBox news all from the activity feed.

Map sharing

Easily share points of interest or hop to a different marker with our dynamic share page:

Mobile

Navigate the site, view your analytics and browse maps while on the go:

Our process

We're growing rapidly. This means radically scaling up the design tools on mapbox.com for the future. We began our redesign process a few months ago as an R&D sprint codenamed "spaceship". Our goal was to have total flexibility, meaning no technical constraints or legacy code, in order to rethink basic map interactions like searching, marker placement, and map sharing.

With nothing to hold us back, we focused on user interaction. We began asking questions like, "What's the most intuitive way to add a marker?", "What's easiest way to search for a city within the editor?", or "How can I style a map based on a only a few colors?"

One of the first things I sketched was a transition-driven, multi-step interface:

Our principles

After a few weeks sketching and debating, we stepped back and created some simple design principles before moving forward:

Interaction is the basic unit of design. Begin the design process by identifying the user's origin point, their goal, and the steps in between. A successful design makes every step along the way clear while keeping the user focused on their goal.

Transitional interfaces are easier to learn and more pleasant to use. Take advantage of animation and conditional visibility to guide users between steps and to add rhythm and momentum to interactions.

Interactions should be delightful and surprising. Design these interactions so that they're enjoyable to perform again and again. Minimize the effort required to complete tasks, enable users to recover from mistakes, and ensure that they receive feedback after taking any action.

Focus the user on one primary action at a time. Avoid sidebars, widgets, and multi-column layouts. Rather than confronting the user with a multitude of possibilities, use visual hierarchy to help users make meaningful decisions and allow actions to unfold across multiple steps. At the same time, be sure to make it easy for the user to move efficiently between primary actions in case they need to change gears.

As we continued to prototype the excitement grew, so we decided to go all-in and transition the R&D project into a full redesign. Young led the way, re-architecting the editor as a client-side app. In just a few days, we could save projects and make markers.

Redesigning the share page

The new share page is a prime example of how our design approach shifted.

The share page lets anyone browse maps designed with the web editor or TileMill. We needed to showcase a range of maps with this page: detailed marker maps, multi-layered data visualizations or custom base layers for more complex maps.

The old approach to sharing was static:

The old share page.

We started the redesign process by breaking down how users interact with it, then built an interface that guided them through those steps. By using transitions, we can introduce the map and provide a more immersive experience once the user begins interacting with the map. Additionally, we wrote rules to conditionally show or hide parts of the interface based the type of map. If the map has markers, then the page will display a marker list. But if the map does doesn't, the marker UI is hidden.

One state of the new share page.

Because the new share page had so many states, we prototyped these changes with workable code rather than making a dozen different mock-ups. Try out the new share page on my Minneapolis Places map.

Creating a framework

One of our goals throughout the redesign was to be as systematic as possible. We identified patterns that worked, stuck with them, and abstracted.

To make this easier, we developed a CSS framework called 'base' while we were designing. It allowed us to build more consistently and efficiently by sharing almost all our styling code across components. Read Tristen's blog post, Base: a styleguide and CSS framework for MapBox, for details.

Forward-thinking

We are going to be constantly improving the MapBox editor by monitoring the analytics and listening to your feedback. Our design team just doubled from three to six, so expect rapid improvements over the next few months. We're making the most useful, elegant map editor and publisher on the web, and this is just the beginning.

Start designing a new map, and let us know what you think on Twitter by mentioning @MapBox.

We just launched a complete redesign of mapbox.com. With it came an opportunity to re-think how we manage styles and assets across the components that make up mapbox.com. The goal is simple: if presentation should be consistent how much code can be shared? We should be able to easily make a change in one place and have it update the pieces that inherit it.

Enter base— an evolving styleguide and CSS framework we use internally to manage the many pieces that make mapbox.com. As a framework, base is small and well suited for our needs.

Composing with classes

Base works on an "as needed" basis. There are predefined rules for the consistent presentation of inline elements but widths & spacing, background fills, and colors are built using a combination of class names. It's what's styling our blog, so let's compose a simple example right here.

<divclass='clearfix space-bottom'><navclass='col6 margin3 keyline-all round'><ahref='#'class='col12 pad1 keyline-bottom'>Item one</a><ahref='#'class='col12 pad1 keyline-bottom'>Item two</a><ahref='#'class='col12 pad1'>Item three</a></nav></div>

And the end result.

With a little markup and class names, I've created a simple component with little effort. Here's a slightly more complex example.

<divclass='clearfix space-bottom'><navclass='col6 margin3 keyline-all round clearfix'><divclass='col12 clearfix keyline-bottom'><divclass='col2 pad1y pad2x center'><divclass='big icon check dot fill-green'></div></div><divclass='col10 pad2 pad1x '>Item one</div></div><divclass='col12 clearfix keyline-bottom'><divclass='col2 pad1y pad2x center'><divclass='big icon plus dot fill-light'></div></div><divclass='col10 pad2 pad1x quiet'>Item two</div></div><divclass='col12 clearfix'><divclass='col2 pad1y pad2x center'><divclass='big icon plus dot fill-light'></div></div><divclass='col10 pad2 pad1x quiet'>Item three</div></div></nav></div>

Mobile experience

We want the mobile experience on MapBox to be highly usable while eliminating desktop-centric interactions. Layout classes in base adapt to smaller screens by collapsing parent containers into a linear format. This linear layout has worked well for us. To manage other cases, there are mobile classes at our disposal as well.

Managing custom styes

Sometimes the design requirements for a page extend beyond what base provides us, like if we need custom graphic sprites. For these special cases our approach is to quarantine custom additions as much as possible to the page's directory. For sites using Jekyll, another technique is to include any <head> level styling or scripts to a head value in the YAML front matter.

---layout:defaulttitle:Terms of servicehead:|<style>.fancy-illustration { background:transparent url(/img/fancy-dancy.png) no-repeat 0 0; }</style>---

At the root template the following line is added before the <head> tag:

An evolving project

As we continue to grow, unifying our presentation and front end development is important. So far base has been working great for us, and we encourage you to borrow our ideas for your own development.

Our satellite team is growing. We just listed an opening for an image processing engineer, but this is part of a much bigger play as we expand our Cloudless Atlas and Satellite Live rolls out. We're growing and squarely focused on bringing more amazing people to our team in both San Francisco and Washington, DC. We are going to win with team. Drop us a line: jobs@mapbox.com

Lindsay Young has joined MapBox! She'll run logistics as part of our operations team, helping to support all of us in both the MapBox DC garage and our San Francisco office. She will be key as we scale our internal systems, and will also help with special projects like organizing upcoming conferences and events, planning office space improvements and renovations, and bringing new ideas on how to make working at MapBox more fun and productive.

Lindsay studied Middle East Studies at George Washington University. She also planned student alternative spring break programs to several South American cities and tracked operations of university dorms.

This weekend is Node Knockout 2013, the annual 48-hour Node.js hackathon, and we're giving each team 12 free months of MapBox so they can build awesome geo apps. Teams will get the details in an email when the competition starts. We'll be answering questions on support@mapbox.com and our public IRC room, #mapbox on Freenode. Just include NKO in the subject or let us know you're participating.

We're also throwing some cool stuff into the prize heap!

The winning team will get a Parrot AR.Drone 2.0 and full year of Premium MapBox service. We sincerely hope you hack the drone with nodecopter. Learn from our mistakes, and watch out for light posts.

The solo winner will get an Estes 1469 rocket, rated to 1,150 feet, and a year of Plus MapBox service. Winners in all other categories will get the Plus account and a pack of astronaut ice cream.

Good luck and make awesome stuff with maps.

Police.uk— the central gateway for citizens in England, Wales, and Northern Ireland to access street-level crime data — rolled out a new site powered by open data from data.police.uk and a new crime map that lets citizens search by neighborhood or crime type to see concentrations of police activity in the area. We love how you can draw your own polygon and view the monthly crime data within custom shapes. Check out the Leaflet.draw example code to add this feature to your maps with MapBox.js.

Next week Google Maps JavaScript API v2 will be deprecated, and apps will need to migrate to a new API to prevent old syntax from breaking. I've received many questions about migrating to MapBox, so here are two simple maps using MapBox.js and Google Maps API to give you a sense of how analogous these web mapping APIs are. Luckily these map frameworks have very similar concepts and conventions.

MapBox.js Demo

varexampleLoc=L.latLng(-25.363,131.0449);varmap=L.mapbox.map('map','examples.map-9ijuk24y').setView(exampleLoc,4);L.mapbox.markerLayer({type:'Feature',geometry:{type:'Point',coordinates:[131.044922,-25.363882]},properties:{title:'',description:'Hello, world!','marker-size':'large','marker-symbol':'star','marker-color':'#48a'}}).addTo(map);varcircle=L.circle(exampleLoc,400000,{color:'#FF0000',opacity:0.8,weight:3,fillColor:'#FF0000',fillOpacity:0.1}).addTo(map);varexampleGeoJson=L.geoJson(features).addTo(map);

Google Maps API v3 Demo

functioninitialize(){varexampleLoc=newgoogle.maps.LatLng(-25.363882,131.044922);varmap=newgoogle.maps.Map(document.getElementById('map-canvas'),{zoom:4,center:exampleLoc,disableDefaultUI:true,mapTypeId:google.maps.MapTypeId.ROADMAP});varinfowindow=newgoogle.maps.InfoWindow({content:'Hello, world!'});varmarker=newgoogle.maps.Marker({position:exampleLoc,map:map});google.maps.event.addListener(marker,'click',function(){infowindow.open(map,marker);});varcircle=newgoogle.maps.Circle({strokeColor:'#FF0000',strokeOpacity:0.8,strokeWeight:3,fillColor:'#FF0000',fillOpacity:0.1,map:map,center:exampleLoc,radius:400000});varexampleKml=newgoogle.maps.KmlLayer({url:'https://gist.github.com/rsudekum/531cb665aa8f7f3f0745/raw/d874f6ccea7d47105387f3ed7f7224eb44fb3c8e/demo.kml',clickable:false});exampleKml.setMap(map);}google.maps.event.addDomListener(window,'load',initialize);

Here's a quick reference table between the two APIs.

As you can see, MapBox.js and Google Maps API follow comparable naming patterns and provide the same basic functionality. If you're trying MapBox.js for the first time and need help, just post your questions on support.mapbox.com and we'll lend a hand.

Plus, this November we're offering a free month of MapBox at to all new subscribers. Use the promo code BEAUTIFULNOV2013 when you sign up to get a free standard plan for 1 month.

We are sending a team out to AWS re:Invent in Las Vegas this week for sessions and meetings about making maps fast with smart infrastructure, processing massive amounts of satellite imagery, and making open data accessible with cloud storage. Based on the success of last year's event, we are looking forward to walking away with some great ideas for 2014 and beyond. Be on the lookout for @willwhitedc, @ericg, @miccolis, @ianshward, @sonechristopher, and @hrwgc if you want to meet up.

We're offering a free month of MapBox Standard when you upgrade with coupon code REINVENTMAPS between now and the end of the year.

Photo Some rights reserved by Lightsurgery

We have designed a new streets and labels layer for our satellite and aerial imagery. Too often, the interests of legibility supersede imagery - resulting in strong, distracting halos or heavily desaturated satellite maps. Good labels imbue satellite imagery with familiarity and meaning without calling attention to themselves. Good labels will never be noticed by someone searching for their house on a photo taken from space.

Design

Subtle context meant designing nearly invisible features. We focused on ghosty label halos and road casings that appear as negative space - and only when roads pass above or beneath each other. We styled administrative boundaries with a light and dark stroke so that one line remains visible against backgrounds of varying lightness, but the other disappears into irrelevance. We dramatically reduced the palette to whites and dark grays allowing for contrast but letting features visible in the imagery speak for themselves.

All of these design considerations were also made with an eye towards customizability, since you can change the colors of MapBox Satellite. Users should be able to choose a unifying aesthetic when annotating satellite imagery - light roads and light labels or dark roads and dark labels, and then change the color of that layer based on their brand or site design. Users should be able to do so without ever worrying about compromises to legibility or the quality of their imagery.

Highlights

Central Mexico shows complex, contrasting patterns at this scale. In the southwest of this view, near Zitacuaro, are pockets of dense conifer forest where monarch butterflies migrate to spend the winter. Just south of the center is Mexico City, a sprawling urban area with pale rooftops, and to its north is semi-arid farmland. Along the coast, around Poza Rica, is a region of sparse, humid woodland. The labels remain legible but unobtrusive against each background.

In dense urban areas – like Cologne, Germany pictured above – we strike a similar balance. Cologne features a combination of twisting medieval street and huge post-WWII redevelopment, making it an interesting challenge for labeling. Our new system performs well, marking important streets and landmarks without drowning the scene in text.

Tennessee is full of gentle textures in our imagery. In the west, you can see the relatively low-lying areas that used to grow tobacco and increasingly grow corn and soybeans. The land rises to the east into the foothills of the Appalachians, where the Tennessee River and its tributaries form large lakes. We assume that someone who has chosen a satellite map wants to see these details, so the labels are conservative and do not overwhelm natural features.

To start customizing your own satellite layer, sign up for a basic account and head over to mapbox.com.

Say hello to MapBox.js v1.4.2, with refreshed and refined UI controls and sharing options. Our redesign of mapbox.com established consistent and strong styling concepts that we wanted to embrace in MapBox.js. We simplified the stylesheet, matched layout, border style and color properties to those defined in our styleguide, base. We also kept property selectors light to make it easier to override the default style with your own customizations.

Refined Dark Theme

The dark theme of our UI controls has a more refined look. You can use this special look for your own maps by adding a .dark class to your map container: <div id='map' class='dark'></div>. Check out what this looks like here.

New share action

What can we say? Maps are pinteresting, so we decided to include Pinterest as a way to share your maps. MapBox.js automatically grabs a snapshot of the map exactly where you were looking as a thumbnail image to share.

You can add the share UI to your own map by adding the control to your initialized map.

L.mapbox.map('map','examples.map-9ijuk24y')// Add share control.addControl(L.mapbox.shareControl());

Goodbye IE7

We've removed mapbox-ie.css: Internet Explorer less than IE8 will no longer be supported. We're focusing our efforts on providing exciting new features to MapBox.js for modern browsers, so stay tuned.

The Washington Post continues its recent trend of amazing map visualizations with a new piece on well-off zip codes, "A World Apart", built with MapBox.js.

Using data from the US Census, the Post has mapped the country's "Super Zips"— the most educated and prosperous areas. Unsurprisingly, most of these are clustered around metropolitan areas – the largest collection of which surrounds the Washington, D.C. region. Following the District are Manhattan, San Jose, Boston, and Oakland.

Visit the Washington Post to see how your zip code compares.

We've rolled out over a dozen new highly-requested Maki icons – our open source point-of-interest icons – in the last month, with several more in the pipeline. Our goal is to make Maki as easy as possible for anyone to use and help evolve.

The making of Maki icons

We manage the development of Maki in a GitHub repository, where anyone can request or contribute new icons. Once we've determined which new icon concept to bring into the Maki family, the next step is to research how best to illustrate the concept. New icons need to be uniquely identifiable, yet consistent with the rest of the system. Where appropriate, we base them on internationally-recognized symbols.

We often create our initial sketches on paper before translating the design into Inkscape, an open source vector graphics editor.

All Maki icons come in three sizes – 24px, 18px, and 12px, and we redraw them at each size to make them pixel-perfect.

When the three designs are finalized, we update our Maki .json file, and then run a shell script to generate the necessary sprites, CSS and individual .png files. All that's left now in the workflow is to submit a GitHub pull request for the new branch that includes our newly-designed icon. A Maki-savvy team member will review it before merging the updates into the live branch.

Instant gratification

Once a pull request has been merged, the new icon is immediately available for use on our mapbox.com editor to style markers. Try out our new icons on your next map!

All Maki files are also available for use on your own app, including the CSS for using Maki on a webpage and the JSON endpoint with metadata, tags, and more. Everything you need is in our repository, making it simple to incorporate Maki into your own project.

Contributing to Maki

If you're interested in contributing or suggesting new Maki icons, check out our documentation on GitHub. We always welcome new collaborators!

As Typhoon Haiyan made landfall in the Philippines the OpenStreetMap community was already adding new details to the map to help first responders. In the map below, all the brightly highlighted features—buildings in yellow, roads in red, and other shapes in blue—have been added or corrected on the map in just the past 5 days.

The progress of thevolunteers tracing satellite imagery of the affected areas is amazing, and this data is already helping Red Cross disaster workers deliver vital supplies.

The Humanitarian OpenStreetMap Team (HOT) provides several ways to get involved with the worldwide volunteer effort. If you already know the basics of tracing you can dive right in with the tasking manager. Many cities with active OSM communities are organizing group sessions, often with tutorials for beginners. If you’re in the DC area, come to the session on Saturday!

Megan Wanee has joined the team as Mission Control, a new position that's key to helping MapBox scale up. Megan is a writer, editor, and MacGyver-type who will be handling lots of roles at MapBox with the overall mission to keep things operating smoothly. She'll be running point on the day-to-day logistics of key team members, helping with communications and PR outreach, and working on strategic long-term projects. Just like NASA's Mission Control, Megan is ready to keep this spaceship hurling in the right direction.