Maps are critical in humanitarian emergencies. They reveal buildings hardest hit in an earthquake, identify safe routes for relief supplies, and streamline damage assessments.

To support these life-saving missions, Mapbox is now free for humanitarian response.

As the international community gathers for the World Humanitarian Summit, we’re making it easier to share post-event satellite and drone imagery, build maps of critical infrastructure and displaced populations, publish web and mobile maps for low-bandwidth environments, and take maps entirely offline. Meeting humanitarian needs is more challenging than ever; making maps and sharing geospatial data shouldn’t be.

Learn more at mapbox.com/humanitarian and drop me a line @mikel to talk about using Mapbox tools for humanitarian response.

We recently updated Mapbox Streets and Mapbox Outdoors, our two general use maps. While they’re designed to be optimized across a variety of devices, screen types, and environments, mobile use cases are increasingly important. When designing maps for mobile, we take into account material considerations, like smaller viewports and a wider variety of physical environments. We also take into account user behavior, such as faster, more fluid map manipulation (zooming, panning, tilting), and the need for faster visual processing speeds when on the move.

Designing for mobile touches all aspects of cartography, but I want to take a closer look at two very visual facets: color systems and iconography.

Defining a color system

Smaller viewports mean you see a lot less context at one time. A larger proportion of map features and labels are also cut off at screen edges, obscuring them and making them less recognizable. A systematic color scheme can help reduce ambiguity.

Unifying features through color relationships

Both Mapbox Streets and Mapbox Outdoors use around a dozen unique hues (what we normally think of as “color”), but a variety of shades and tints.

Many conceptually similar features share the same hue value, to reinforce their meaning and create a more cohesive map. For example, many features related to navigation and transportation share the same blue hue: rail labels, highway shields, ferry routes, and even road casings.

Creating visual depth

More saturated colors jump to the foreground while less saturated colors sink into the background. Maps that have more visual depth – a greater contrast between foreground and background – tend to look less abstract, since the delineation of different features makes them more readily understandable.

For example, landuse and landcover areas on Mapbox Streets and Mapbox Outdoors sit on two visual planes: water bodies and parks are more saturated and closer to the foreground while the rest are closer to the background.

Some landuse areas like schools, hospitals, and airports are less saturated at low-to-mid zoom levels, but become more saturated at high zoom levels to create more visual contrast with buildings.

Refining icons

These global maps include a lot of icons, mainly divided into three categories: transit icons, highway shields, and points of interest (POI) icons. We’ve redesigned all three icon sets to be precise and comprehensible because at-a-glance legibility matters – especially when you’re looking at a map on the go.

Creating visual hierarchy

To better differentiate between types of icons, we made transit icons and highway shields more visually prominent, and POI icons less prominent. Since POI icons tend to be denser than other types of icons, making them more subtle reduces clutter.

Compared to the previous version of Mapbox Streets, these redesigned maps have POI icons with smaller footprints: we removed the background shape on all POI icons, and completely redesigned the icon for non-categorized POIs to be an unobtrusive dot. While colors are dark and saturated for legibility, they’re close in hue to the landuse and building features behind them. This helps them recede into the background compared to highway shields and transit icons.

Designing crisp icons

We designed all three icon sets on a pixel grid, allowing these tiny images to look sharp at any screen resolution.

Adapting transit logos and highway shields

For select cities and countries, our maps feature local public transit icons and highway shields. These help orient the user by visually connecting the map to their environment – particularly useful for on-the-ground navigation on mobile devices.

Both of these icon sets are based on symbols originally designed at much larger scales, which means that simply resizing existing images would result in blurry, illegible icons. Instead, we redrew every symbol, simplifying the details and exaggerating the form. Our biggest challenge was balancing good pixel-alignment with an accurate representation of the original symbol.

Designing information-dense POI icons

Mapbox Streets and Mapbox Outdoor POI icons are based on our newly redesigned Maki icon set and styled using our newly launched Maki icon editor. To be instantly recognizable at their tiny size, our POI icons are as simple as possible in concept and shape, with distinct silhouettes.

Take a closer look at Mapbox Streets and Mapbox Outdoors!

Open source geospatial tools should play well together.

It’s always been possible to use Mapbox with OpenLayers. Check out our documentation for various versions and this example dropping the revamped Mapbox Streets into OpenLayers 3:

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        tileSize: [512, 512],
        url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/{z}/{x}/{y}?access_token=<your access token here>'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

You can also use Mapbox maps in QGIS and GeoNode by modifying map settings. This example adds a Mapbox basemap to GeoNode by creating a MAP_BASELAYER in your local_settings.py file:

{"source":{"ptype":"gxp_olsource"},"type":"OpenLayers.Layer.XYZ","args":["Mapbox Satellite",["https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=<your access token here>"],{"transitionEffect":"resize","attribution":"© Mapbox © OpenStreetMap © DigitalGlobe"}],"visibility":True,"fixed":True,"group":"background"},

In June we’ll add the ability to use Mapbox Studio styles in Boundless tools without code modifications or plugins. Here’s a preview of Mapbox Satellite in QGIS.

Check out our integrations with Tableau, ArcGIS Online, and the CartoDB Editor, and keep an eye on @Mapbox and the blog for new tools to help your maps travel well.

We have been mapping turn lanes in many cities in the United States to improve navigation data present in OpenStreetMap. Adding turn lanes requires splitting existing roads at the exact point where a lane begins, and adding appropriate tags. To help the team with this task, we have developed the Knife tool, a plugin for the Java OpenStreetMap Editor (JOSM), that will split ways with a single click.

The Knife tool is much faster compared to using the default split action in JOSM. The Knife tool intelligently determines which way to split at intersections, and automatically selects the way that may get turn lane tags.

Using the Knife tool

First, download the Java archive file and copy it to your JOSM plugin folder. Next, activate the plugin from JOSM Preferences > Plugins > auto_tools and then restart JOSM. Now you can use the shortcut T to split ways by a single click.

The Knife tool at work

At Mapbox, we are constantly trying to improve OpenStreetMap tools to make mapping easier and faster. Give the Knife tool a spin and let me or Ruben know if you have any questions.

Tappsi just launched their taxi-hailing app on iOS and Android using our mobile SDK. Available in Colombia, Peru and Ecuador, the app allows you to find and book taxis with the tap of a button.

Tappsi designed two different map styles in Mapbox Studio, one for requesting a taxi during the day and one for requesting a taxi at night. Download Tappsi on iOS or Android to see what’s new.

Drop me a note at zach@mapbox.com or say hello on Twitter if you want to talk mobile maps!

Redesigned to complement our constantly improving Satellite and Streets data, we optimized Mapbox Satellite Streets for mobile in two ways: with stronger hierarchies and feature sets for road networks – including global highway shields, motorway exits, and transit stations – and easier to locate landmarks and points of interest.

Stronger visual hierarchy for road networks

We designed a color-coded visual hierarchy for Mapbox Streets’ improved road classifications to emphasize national, state, and county US highway system distinctions. The accompanying redesigned highway shield iconography system allows for quick road system identification.

On higher zooms, auto, and non-auto ferry routes, as well as foot and cycle pathways, have been considered in this redesign, adding detail while blending smoothly with satellite imagery.

Landmarks for better location awareness

Our newly designed, pixel perfect iconography amplifies Mapbox Streets’ improved landmark data, aiding mobile navigation uses by allowing landmarks and POIs to stand out against the map.

Get started now

Explore Mapbox Satellite Streets further, and start building with it today!

In Mapbox Studio you can replace the default source layer of POI data provided by OpenStreetMap with your own! Under the tilesets tab there’s an option to upload several different file types, which are converted to Vector Tiles and ready to add to any Studio map you create. Below we’ll walk through creating a custom POI layer using a snapshot of Chicago restaurants from Foursquare’s API.

Prepping the data

Foursquare’s API returns a JSON response comprised of POI coordinates and parameters. We’ll need to take that response and format its structure as GeoJSON before we upload to Studio. Converting this data also gives us the opportunity to filter unnecessary field values and format them so they are easier to manage when filtering by a POI type in Studio.

Design

With formatted data uploaded as a tileset, We create a new style and add it as a source layer. We want to style each marker by restaurant type so we’ll creating multiple layers that reference the source layer and apply filters that target the field value type. Along with filtering by type, we’ll also filter by ‘checkinsCount’ value, or number of daily visitors a restaurant receives, and assign an icon to represent more popular venues.

With your new style and custom layer in place you’re ready to use the Map ID of your published style with Mapbox GL JS to share a fast interactive map. Check out the links below for more instruction on how to build and display your own custom POI layer:

• Creating custom icons
• Adding custom data in Studio
• Interacting with Vector Tiles in Mapbox GL JS

Mapbox GL Native now has a layer forYocto, a tool for creating embedded Linux distributions. Yocto supports many CPU architectures and development boards like the Intel-based Minnowboard and any hacker’s favorite ARM-based Raspberry Pi.

If you own a Raspberry Pi, you can now use Mapbox vector maps with OpenGL acceleration on a Qt/QtQuick application using our Yocto layer.

Reach out on Twitter if you want to talk vector maps for embedded devices!

We just put 7.5 cm (3 inch) resolution UAV imagery on our satellite map near Batticaloa, Sri Lanka. The data is sharp enough to see individual tree leaves, roof tiles, and signs of homes rebuilt by the World Bank’s Northeast Housing Reconstruction Program (NEHRP):

The imagery is from UAVs flown by the Sri Lankan Government Disaster Management Center and the Survey Department of Sri Lanka, as part of a World Bank–supported project to proactively understand risk in flood prone regions. The project, which we mentioned last month, is especially timely as Sri Lanka responds to serious flooding.

The UAVs collect a level of detail that’s unusual to see on maps anywhere in the world – we had to remove some checks in our code to roll out zoom level 22 imagery. With that change, we put these pixels through the same pipeline that we use for everything from user uploads to Landsat-live. There’s no special internal publishing API: we use the same one that you do as a developer on our platform.

Farm animals rest in a backyard pasture.

Outrigger canoes are popular boats for fishing in the lagoon.

Goats eat in a backyard pasture, rocks are piled at the edge of an orchard for a construction project, and “NEHRP” is visible on repaired roofs.

High resolution imagery affords more detail for tracing in OpenStreetMap, and better imagery will result in a higher quality map for all. This particular area is under-traced; now, we have the detail necessary to straighten roads, add houses, and even map individual trees.

Here’s me adding a few houses via the iD editor for OpenStreetMap. You can help trace, too!

Imagery this detailed (and beautiful) is taking off across the remote sensing community. We think that’s great. We’re looking forward to putting more ultra high-res pixels on our maps as they’re collected all over the world. If you want to talk about UAV imagery (or anything else), ping me on Twitter.

We’re excited to welcome Matt Ficke to Mapbox! Matt is joining our geocoding team, working from the D.C. garage to ship features, launch countries and hunt down open data to power it all.

Matt comes to us via ElasticM2M, where he built software for automotive GPS applications. He’s also a James Beard-nominated bartender from his time running the Columbia Room and a talented cyclist (albeit one who is occasionally dazed post-race). Welcome, Matt!

There are three new features that make editing OpenStreetMap with iD faster than ever. The best part – iD is open source software, and these features were all contributed by volunteers over the past few months. Mappers use iD and give great feedback every day, driving the developer community to build new features, which result in even better OpenStreetMap data, and more mappers using iD. Repeat and improve!

1. Background Swap

Satellite imagery sources differ by age, quality, and seasonality, and sometimes it’s useful to map against multiple backgrounds.

iD now remembers the last two background imagery layers used while editing, and you can switch between them with ⌘B (Mac) or Ctrl-B (Windows).

Thanks Rodolphe Pelloux-Prayer!

2. Spacebar Drawing

Map even faster with Spacebar Drawing. Tap the spacebar to place points on the map. And you can hold down the spacebar to draw smooth curves with the mouse.

Thanks Brandon Reavis!

3. Delete with Lasso tool

Sometimes you have more points in the geometry of a line than necessary. Remove those extra points quickly with the lasso tool. Shift-click and drag to draw a lasso around extra points, then delete them.

Thanks Kushan Joshi!

OpenStreetMap’s active open source community is the key to making software like iD better.

Check out iD on Github to contribute code, make suggestions, or report an issue.

And follow me on Twitter for the latest news about iD.

We recently updated Mapbox Light and Dark, our maps for data visualizations and overlays. In the most recent round of design updates, we’ve made some significant improvements for mobile use. Today, we are going to focus on how we overhauled our color systems for both maps.

In redesigning Mapbox Light and Dark, we knew we wanted to update both color schemes to increase contrast and improve legibility of the map’s larger background features like parks, water, buildings, and land use. The unique demands of mobile usage – a smaller screen, less surrounding context – only underscored the need for easy differentiation of features.

Both maps had always used monochrome palettes, but we decided that adding a very small amount of color could provide the added clarity necessary for mobile viewing. We were initially wary of this strategy, afraid that the addition of color might impose too strong a color system and distract from the map’s shared mission of complementing overlaid data. However, by employing the lightest possible touch – the amount of saturation is always very light – we have been able to provide a greater degree of clarity without pushing these maps into the foreground.

Compare the two approaches in the following images. On the top, the new Mapbox Light, along with a selection of colors pulled out of the map. Underneath it is a version of the exact same map, had it been designed with a set of completely desaturated tones. The monochrome version is not terrible, but the new version clearly provides a greater sense of depth and better distinguish San Francisco’s various parks, land uses and water bodies from one another.

We optimized the new Mapbox Light and Dark for mobile, but these improvements look great and deliver the same benefits across all devices, screen types, and environments. Explore Mapbox them both further, and start building with Light and Dark today!

Joel Theodros has joined the Mapbox team in San Francisco! Joel works with Enterprise customers, putting together agreements and connecting customers with the tools and technology they need to bring Mapbox into their applications.

Joel comes to Mapbox from Dropbox in Dublin, where he helped grow Dropbox for Business across Europe. Welcome to the team, Joel!

Mapbox Drive is the first lane guidance map designed for car companies to control the in-car experience. Built specifically for semi-autonomous driving, ride sharing, and connected cars, the map is updated live from our network of sensors. From designing the map to customizing the navigation, we're building the platform for you to own every aspect of the relationship with the driver.

We're turning phones, cars, and other devices into a network of real-time sensors. Our Mobile SDK collects billions of points that let us see every street, analyze the speed of traffic, and connect the entire road network. Last week alone we collected and processed over 100 million miles of sensor data into our maps. Anonymized and aggregated data preserves privacy while allowing us to quickly detect road changes.

We've built the data processing pipeline to filter our fire hose of sensors into accurate traffic, directions, and lane guidance maps. The updated map is delivered over the air to the connected car, using our lane trajectories like rails built into the road, guiding the vehicle and smoothly changing lanes.

Customizable design

Using Mapbox Studio you can now customize the dash experience.

Every map is designed perfectly for each in-car hardware display, from the cockpit to the console. Using video game technology, the driver experiences the map at 60 frames per second, just like maps feel on a mobile phone.

A flexible and fast platform

Mapbox Drive is a platform for you to design the dashboard for the driver and own the data from your fleet. The platform can power traffic-aware turn-by-turn navigation, guide drivers with beautiful maps, find destinations with instant search, integrate seamlessly with mobile devices, and enable semi-autonomous driving.

Directions: Turn-by-turn text and voice guidance. Routing tuned to real-world traffic conditions based on mobile telemetry data. Real-time coverage of over tens of million miles of road per day.

Maps: Beautiful streets and satellite maps with global coverage. Latest traffic and terrain with your custom data layers. Live updates to map and traffic data using super lightweight vector maps for fast online and offline rendering.

Mobile: Seamless integration of mobile map design and routing behavior with dashboard maps.

Own your data: Analyze fleet data to improve your drivers' experience and build your own data.

Search: Addresses and points of interest around the world. Responsive type-ahead geocoding for fast routing and guidance assistance.

Autonomous: Road and lane centerlines, built from telemetry data to improve guidance and support autonomous and semi-autonomous driving.

Open Source

We’re building this all in the open on Github, from our iOS and Android SDKs, to Mapbox GL Native Qt support, vector tile specifications, and our OSRM routing engine. We’re also improving open data in OpenStreetMap.

We regularly use Notes on OpenStreetMap to share and solve problems on the map. With Notes, anyone can quickly point out errors or omissions in the map and ask for verification from local contributors.

Whether you are a new user or a power mapper, here are tips to leverage the power of Notes on OpenStreetMap.

Help resolve Notes

To get started, take a look at open Notes in an area familiar to you. Go to OpenStreetMap.org and enable the Map Notes overlay, and you will see unresolved Notes in your area.

Finding notes on OpenStreetMap.

Red markers are currently unresolved Notes. Click a marker to display the details of the Note on the left panel. If you can fix the problem, edit the data using your favorite OpenStreetMap editor. Once you resolve a Note, add a comment and mark Comment & Resolve. The marker will turn green to show that it has resolved.

Resolve notes in your local area.

Add a Note

When you are unable to reliably verify a problem based on Bing or Mapbox Satellite imagery or other sources, or are unsure how to fully map the feature, add a Note to discuss the feature in question with the community. Mappers with local knowledge in the area can review your Note, and make sure that OpenStreetMap data matches the on-the-ground reality.

Add a note on OpenStreetMap - you can also do this using the JOSM editor.

Click the Add a note to the map icon. Move the marker precisely to the location of concern, and type up a relevant comment or question that explains the issue. Give other mappers a clear understanding of the problem, so they can take action and provide the best possible update to the map.

Now that you are familiar with Notes, try it out, and help improve the data on OpenStreetMap. If you are new to the OpenStreetMap project, take a look at our OpenStreetMap 101 series to learn how to get started.

Hit me up on Twitter for any questions or for sharing interesting stories related to your Notes.

We’re thrilled to welcome Maanya Umashaanker to the data team! Maanya joins us to improve OpenStreetMap and other datasets using satellite imagery, probe data, and analyzing customer feedback.

Maanya holds a master’s degree in Geo-informatics from Visvesvaraya Technological University. Before joining Mapbox, she worked as a Senior Research Fellow at the Indian Institute of Science in Bangalore studying the evolution of glacial lakes in the Indian Himalayas. She has also worked as a Project Associate at IIT Madras to optimize power consumption and improve the battery backup of Aakash Tablets.

Welcome Maanya!

We are excited to welcome Manohar to Mapbox. Manohar joins us to improve OpenStreetMap and other datasets using a combination of satellite imagery and analysing customer feedback.

Manohar studied Geoinformatics at Andhra University, and later graduated from Universität Stuttgart with a master’s degree in Geomatics Engineering. As part of his thesis, he worked on developing content-based image retrieval methods.

Welcome Manohar!

The annual Esri User Conference is coming up at the end of the month, and we can’t wait to see you there. We’ll be hanging out on the USS Midway, one of the longest-serving aircraft carriers in the US Navy. It’s now berthed in San Diego and home to 29 restored aircrafts. Join us on Tuesday, June 28th at 7 pm on the flight deck for drinks, live music, and a proper San Diego fish taco.

We’ll also be in the area Monday, June 27th — Wednesday, June 29th meeting with partners and talking about a new set of features that easily connect the Mapbox and ArcGIS platforms.

If you are in San Diego and want to meet, shoot me an email at hannah@mapbox.com. See you there!

The latest Mapbox GL JS release (v0.19.0) includes data-driven styling support for fill-color and fill-outline-color. Data-driven styling opens up advanced data vizualization and map design techniques.

Below is a choropleth map that uses fill-color to visualize median income in every county in the United States. Notice how smoothly the map moves, how the map responds visually to mouse hovering, and how the sidebar is populated with map data.

The data visualization uses property functions to assign a fill-color value to an area based on a particular data value:

'fill-color':{property:'median-income',stops:[[20000,'#fff'],[120000,'#f00']]}

Check out this Mapbox GL JS example to see property functions for fill-color in action.

Make a map!

We would love to see the maps you’re building with data-driven styling! If you have something to share, tweet at @Mapbox.

Xinnong Yang is joining Mapbox to lead business development in China. Based in Shanghai he will work on expanding our sales and partnerships with Chinese and international customers. Xinnong comes with years of experience building customer relationships and implementing complex location based projects with Versalinks, Autodesk, Trimble, Esri, and deCarta.

Get in touch with Xinnong!

杨莘农先生将任职Mapbox中国区业务开发总监。位于上海，他将致力于开拓Mapbox在中国的销售市场和发展与国际客户的合作伙伴关系。杨莘农先生有多年建立客户关系和开发LBS等大型复杂系统平台的经历。他曾在ESRI，Autodesk，Trimble，deCarta等公司担任重要职务。

联系杨莘农先生。