We released new Mapbox Light and Dark maps last week as a part of our broader map redesign and relaunch. We have offered updates to Light and Dark in the past, but this iteration presented an opportunity to make larger changes to the pair.

Though much has changed about these maps, our fundamental goals for Light and Dark are not different from past versions: each remains a versatile map designed to complement a wide variety of visualizations and overlays. Thinking how we could improve the maps on these terms, however, has led to significant changes.

Feeling that the maps could provide better context to overlaid content, we have added data back into these versions of the map. Light and Dark benefit from the new data featured in all our redesigned maps, but we also returned data that had been previously removed. These are the most data dense versions of Mapbox Light and Dark we have ever offered, and we are excited to see how they add a new level of context to your projects.

We have also completely overhauled the color systems for both Light and Dark. Just as we knew these maps would benefit from additional data, we also wanted to use color to introduce a greater sense of depth. As their names suggest, these maps operate within relatively constrained color spaces, but we developed a palette of subtly saturated light and dark tones to differentiate land use, land cover, water, and building layers. The differences between each are subtle – overlaid data still stand out – but even slight variations in saturation and hue improve the legibility of each element and provide a richer context.

We approached Light and Dark’s redesign looking to bolster their role as underlays by adding more visual information and depth without distracting from their core mission. Explore Mapbox them both further, and start building with Light and Dark today!

For developers who have experience building web maps with Mapbox.js or Leaflet, switching old projects to use Mapbox GL JS can drastically improve the performance of your existing applications. Mapbox GL JS uses WebGL client-side rendering to display your maps, which results in faster loading, smoother transitions when zooming or panning, and greater flexibility to change map data and styles on the fly. These improvements make switching to Mapbox GL JS well worth the effort, so I recently converted Peter’sCourier demo from Mapbox.js to GL.

Here are some key tips to illustrate how you can make the switch with your projects!

Adding map layers and data

In the Courier demo, the pickup points for packages are stored as GeoJSON in the browser and constantly updated with new orders. In Mapbox.js, we added those points to the map using L.mapbox.featureLayer(), and with each update of the pickupPoints GeoJSON object we update the layer’s source using featureLayer().setGeoJSON():

varpickups=L.mapbox.featureLayer(pickupPoints).addTo(map);// when new pickups are addedpickups.setGeoJSON(pickupPoints);

In Mapbox GL JS, we first add a source to the map, and then create a new layer:

map.addSource('pickups',{type:'geojson',data:pickupPoints});map.addLayer({id:'pickups',source:'pickups',type:'symbol',layout:{'icon-image':'pickup'}});

When new data are added to the pickupPoints object, we update the new layer’s underlying source using setData() instead of updating the layer directly:

map.getSource('pickups').setData(pickupPoints);

Adding custom markers to Mapbox GL Maps

Because feature layers in Mapbox.js are DOM elements, it is possible to use any image file as a marker on the map. In Mapbox GL JS, however, markers are rendered by the GPU, not the browser, so any images you would like to use as markers have to be loaded into a sprite and referenced in your map’s style JSON.

You can add custom markers to a sprite in Mapbox Studio - this handy guide walks you through the whole process. Alternatively, you can use spritezero, our open-source sprite generator to build your sprite from the command line, or on the fly in your application.

Animations in Mapbox GL JS

We can animate DOM elements using CSS, which is how Peter animated the line of the couriers' paths to their destinations in the original Courier demo. Since we cannot use DOM manipulation, we’ll use the same setData() method on our GeoJSON source that we used in the above pickupPoints example, but this time we’ll use it in conjunction with Turf and the JavaScript method window.requestAnimationFrame just like this example.

functionanimateCourier(route,destination){// set animation speed at 60x real timevarspeed=60;varduration=route.duration;varpath=turf.linestring(route.geometry.coordinates);vardistance=turf.lineDistance(path);// get starting time of the animationvarstart=performance.now();functionanimate(timestamp){varcurrent_time=timestamp-start;// if the animation has reached its destination, // move the courier to the destination and end the animation loopif((current_time*speed)/(duration*1000)>=1){map.getSource('courier').setData(destination)}else{// find the current distance the courier has traveled along the pathvarcurrent_distance=current_time*speed)/(duration*1000)*distance;varwaypoint=turf.along(path,current_distance,"kilometers");map.getSource('courier').setData(waypoint);// continue the animation looprequestAnimationFrame(animate);}}animate(start);}

To learn more about Mapbox GL JS and how you can implement your projects with it, check out our Mapbox GL JS Fundamentals guide, or take a look at some of the examples.

Your maps are about to get faster thanks to some newly updated vector tiles and a soon-to-be-released version of Mapbox GL JS using Earcut.

Check out this side-by-side video of Mapbox GL JS 0.19-dev and 0.18 on an old laptop.

Stay tuned for an in-depth explanation of Earcut and these improvements.

Last week we launched a redesign of Mapbox Outdoors, our general use map tailored for hiking, biking, and the most adventurous use cases. It now incorporates more lightly styled road and transit details for navigational context, but remains focused on terrain and the most important outdoor features.

Beautiful mountains

From the highest summits to rolling hills, Mapbox Outdoors showcases the elevation of the land. At low and mid zoom levels, detailed hillshading describes the terrain without obscuring other important features, like place labels, administrative borders, and major road systems.

At high zoom levels, high-contrast contour lines and labels give more precise details about an ascent’s slope. Prominent mountain peak labels (with elevation) highlight these significant natural landmarks.

Natural features and green space

Mapbox Outdoors displays large parks, such as national parks, in a traditional tint band style to delineate park borders and more clearly reveal the features within the park.

We’ve designed this map with more differentiation between parks and other green space and landcover, such as golf courses, gardens, zoos, and woods.

Additional information for agricultural landuse adds context to otherwise sparse areas.

We’ve also highlighted other natural landcover and features – such as glaciers, wetlands, cliffs, and rivers – using unique colors and patterns.

Highly visible and distinct paths

Many outdoor activities take place along paths, not high-speed highways. We visually separated paths from other roads and brought them to the foreground, so path networks are obvious at a glance. Since not all paths are equally relevant for all activities, we created distinct styling for walking paths, cycleways, trails, stairs, tracks, and ski paths.

Points of interest for outdoor activities

Mapbox Outdoors features prioritized labels for outdoor amenities, such as public toilets, drinking fountains, and picnic sites. In addition, we’ve filtered out the clutter of smaller, less relevant POIs so you can focus on that bike path or park entrance – not every clothing store and dental office.

Explore Mapbox Outdoors further, and start building with it today!

Today is Bike to Work Day in D.C.! Using Mapbox cycling directions, we made a handy ride planner to plot your route, and highlight any of the 84 pit stops you might pass along the way. To customize your route, click and drag the endpoints below:

To build something similar for your application, check out our developer documentation.

Last week we launched rio-color– an open source Rasterio plugin for color adjustment of geospatial rasters. We’re using it as part of our production image processing chain to keep our satellite basemap looking great and running smoothly.

Rio-color exists for one reason: to correct and adjust colors of geospatial imagery. Satellite, UAV and aerial photography comes to us from dozens of different sources. The color balance differs depending on the weather, the air quality, the seasons, the time of day, the sensor used to take the image, and so on. All this imagery has to be adjusted to be accurate, consistent and visually appealing across the global basemap at all zoom levels.

Rio-color provides three basic color operations: sigmoidal contrast, gamma adjustment and saturation. These can be applied to an input raster dataset in various combinations to produce the desired color balance.

Sigmoidal adjustment can alter the contrast and brightness of an image in a way that matches human’s non-linear visual perception. It works well to increase contrast without blowing out the very dark shadows or already-bright parts of the image.

Gamma adjusts color values according to a power law, effectively brightening or darkening the midtones. It can be very effective in satellite imagery for reducing atmospheric haze in the blue and green bands.

Saturation can be thought of as the “colorfulness” of a pixel. Highly saturated colors are intense and almost cartoon-like, low saturation is more muted, closer to grayscale. You can adjust saturation independently of brightness and hue, but the data must be transformed out of the RGB color space.

These three operations can be composed to do most of the color manipulation necessary to make imagery look better, more realistic and more consistent across our basemap.

Rio-color was designed specifically for large remote sensing jobs where geospatial referencing, memory usage, concurrency, efficiency and scalability are critical. It is one of a growing number of Rasterio plugins, a suite of raster data processing modules using Rasterio as a common framework.

Camilla, Damon, Sean, and Virginia will be in Portland the week of May 30th for the PyCon conference, where they will be working on Rasterio plugins and other parts of the Python mapping stack. Stop by and say hello!

Next week a bunch of us will be in Portland, Oregon for PyCon and we’re excited to meet you there!

PyCon is the biggest annual meeting of the developers and users of the Python programming language. We’re attending to learn about new discoveries, experiences, and opportunities from the Python community and to share our own experience in provisioning servers, refining geocoding data, processing satellite imagery, and applying machine learning to color correction and support ticket prioritization.

One of the things that makes PyCon unique is that it is run by the Python community for the community. We’re helping out by volunteering and by sponsoring the development sprints which begin on Thursday, the day after the main conference activities. Several of us will be staying later in the PyCon week to sprint on Rasterio and other parts of the Python mapping software stack. I hope you’ll consider joining us if you have an interest in making maps with Python.

Find us at PyCon by the Mapbox rainbow stickers on our badges or ping us on Twitter to learn more about Mapbox, mapmaking with Python, and how we work: @bluebweee, @camillacaros, @dnomadb, and @sgillies.

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!