Refill Themes - Part 1

We’re excited to introduce you to Refill themes! See all the variations below:

 

The island of Mallorca

Mallorca in black and white themes in Refill Mallorca in one color themes in Refill Mallorca in two color themes in Refill

The first row above displays variations on black and white, starting with high-contrast, original black (Refill’s default), and gray. High-Contrast is basic and minimal, and great for printing. For data visualization purposes we now have gray and several other muted color themes. On the second row is a single color series in blue, sepia, and pink. The last row displays our new two-color series in pink-yellow, brown-orange, and blue-gray.

We’ve also introduced three dark three variations in our Part 2 blog post.

 

 

The Pantheon in Rome

The Pantheon in black and white themes in Refill The Pantheon in one color themes in Refill The Pantheon in two color themes in Refill

 

 

Mingzhu Roundabout in Pudong

Mingzhu Roundabout in Pudong in black and white themes in Refill Mingzhu Roundabout in Pudong in one color themes in Refill Mingzhu Roundabout in Pudong in two color themes in Refill

 

 

Turn 3D buildings ON and OFF

3D buildings on and off in Refill

 

 

Gardens by the Bay in Singapore

Gardens by the Bay in Singapore in black and white themes in Refill Gardens by the Bay in Singapore in one color themes in Refill Gardens by the Bay in Singapore in two color themes in Refill

 

( These maps are interactive! Open full screen ➹ )

Let there be color

It’s easy to set a theme color after importing Refill in Tangram – just import the basemap and add a few lines! The Cartography docs include the following examples.

NOTE: Order matters when importing Tangram YAML files – first import the basemap style, then import themes. You’ll also need to fully qualify the URL for each import as imports are relative to the Tangram scene file’s base URL (not the first import’s base URL).

Set the required Mapzen API key to access vector tiles and import one of the theme colors:

Example Tangram YAML usage:

import:
    # basemap style
    - https://mapzen.com/carto/refill-style/7/refill-style.zip
    # recolor basemap style with a theme color
    - https://mapzen.com/carto/refill-style/7/themes/pink-yellow.zip
    # other imports to taste...

global:
    sdk_mapzen_api_key: mapzen-xxxxxx
    # are 3d buildings casting too dark a shadow on your map?
    # show 2d building footprints instead (optional)
    sdk_building_extrude: false

NOTE: As Mapzen’s basemaps are still in active development we recommend peggging an import to a specific MAJOR version, eg: 7, so you enjoy any minor and patch updates but are ensured of stable named scene elements.

Example Tangram JS usage:

var layer = Tangram.leafletLayer({
        scene: {
          import: [
            'https://mapzen.com/carto/refill-style/7/refill-style.zip',
            'https://mapzen.com/carto/refill-style/7/themes/pink-yellow.zip'],
          global: { 'sdk_mapzen_api_key': 'mapzen-xxxxxx', 'sdk_building_extrude': 'false' } },
        attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a>, &copy; OSM contributors'
    });

If you’re using mapzen.js:

var map = L.Mapzen.map('map', {
  center: [40.8041, -124.1506],
  zoom: 15,
  maxZoom: 20,
  tangramOptions: {
    scene: {
      import: [
        'https://mapzen.com/carto/refill-style/7/refill-style.zip',
        'https://mapzen.com/carto/refill-style/7/themes/pink-yellow.zip'],
      global: { 'sdk_mapzen_api_key': 'mapzen-xxxxxx', 'sdk_building_extrude': 'false' }
    } }
});

Tangram ES and Mapzen Android and iOS SDK support is coming soon.

Happy mapping!