Remixing the Mapzen Icon Library

We’ve updated the Mapzen Icon Library to allow you to import standalone Mapzen icons into your own custom Tangram map, and to remix icons between Mapzen basemap styles. Always wondered what Walkabout icons would look like on Refill? With our new icon imports that’s easy. Or use our standalone PNG sprites to build in your favorite mapping library. Let’s dive into how…

Mix and Match Icons and Mapzen Basemap Styles

Mix and match Mapzen icons with Mapzen basemap styles. It’s simple! See the first example below, with Tron icons on Purple-Green Refill.

Tron Icons on Purple-Green Refill

Tron Icons on Purple-Green Refill

In your Tangram scene, simply import the Refill house style then add the purple-green color theme and the label level of your choice. The last line imports Tron icons.

import:
    - https://mapzen.com/carto/refill-style/9/refill-style.zip
    - https://mapzen.com/carto/refill-style/9/themes/color-purple-green.zip
    - https://mapzen.com/carto/refill-style/9/themes/label-10.zip
    - https://mapzen.com/carto/tron-style/5/themes/tron-icons.zip

 

Bubble Wrap Icons on Pink-Yellow Refill

Bubble Wrap Icons on Pink-Yellow Refill

import:
    - https://mapzen.com/carto/refill-style/9/refill-style.zip
    - https://mapzen.com/carto/refill-style/9/themes/color-pink-yellow.zip
    - https://mapzen.com/carto/refill-style/9/themes/label-10.zip
    - https://mapzen.com/carto/bubble-wrap-style/8/themes/bubble-wrap-icons.zip

 

Walkabout Icons on Blue-Gray Refill

Walkabout Icons on Blue-Gray Refill

import:
    - https://mapzen.com/carto/refill-style/9/refill-style.zip
    - https://mapzen.com/carto/refill-style/9/themes/color-blue-gray.zip
    - https://mapzen.com/carto/refill-style/9/themes/label-10.zip
    - https://mapzen.com/carto/walkabout-style/6/themes/walkabout-icons.zip

 

Add Icon by Name

To add specific icons, add the name into the filter and call mapzen_icon_library when you draw. In this case, we’re filtering restaurants in London.

Tron Icons on Inverted Refill

import:
    - https://mapzen.com/carto/refill-style/9/refill-style.zip
    - https://mapzen.com/carto/refill-style/9/themes/color-inverted.zip
    - https://mapzen.com/carto/tron-style/5/themes/tron-icons.zip

layers:
    my_pois:
        data: { source: mapzen, layer: pois }
        filter: { kind: restaurant }
        draw:
            mapzen_icon_library:
                text:
                    visible: false

 

 

Customize Icon Colors

Customize icon colors like in the example below. Here, Walkabout icons are shaded yellow and pink. Specify the color of your choice within the shader colorized_icons in u_tint.

Customize Color of Walkabout Icons on Blue Refill

import:
    - https://mapzen.com/carto/refill-style/9/refill-style.zip
    - https://mapzen.com/carto/refill-style/9/themes/label-11.zip
    - https://mapzen.com/carto/walkabout-style/6/themes/walkabout-icons.zip
    - https://mapzen.com/carto/refill-style/9/themes/color-blue.zip

styles:
    colorized_icons:
        shaders:
            uniforms:
                u_tint: [0.925,0.090,0.094]

 

Use Icons Independently

In Tangram

Create your own custom map and use Mapzen icons. This example uses Tron icons on a custom map of building footprints drawn with blue lines in a Tangram scene.

Create your own map and use Mapzen icons

import:
    - https://mapzen.com/carto/tron-style/5/themes/tron-icons.zip

sources:
    mapzen:
        type: TopoJSON
        url: https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson

layers:
    my_earth:
        data: { source: mapzen, layer: earth }
        draw:
            polygons:
                order: 0
                color: [0.000, 0.000, 0.000, 1.00]

    my_buildings:
        data: { source: mapzen, layer: buildings }
        filter: { $zoom: { min: 13 } }
        draw:
            lines:
                order: 4
                width: 2px
                color: [0.192, 0.118, 0.612, 1.00]

    my_pois:
        data: { source: mapzen, layer: pois }
        draw:
            mapzen_icon_library:
                text:
                    visible: false

Sprites on their own

The Mapzen Icon Library is available for use in your favorite mapping or graphics software as individual sprite images. (Currently only png format at 2x resolution is supported.)

  • https://mapzen.com/carto/bubble-wrap-style/8/icons/{resolution}/{sprite}.{format}
  • https://mapzen.com/carto/cinnabar-style/8/icons/{resolution}/{sprite}.{format}
  • https://mapzen.com/carto/refill-style/9/icons/{resolution}/{sprite}.{format}
  • https://mapzen.com/carto/tron-style/5/icons/{resolution}/{sprite}.{format}
  • https://mapzen.com/carto/walkabout-style/6/icons/{resolution}/{sprite}.{format}
  • https://mapzen.com/carto/sdk-default-style/1/icons/{resolution}/{sprite}.{format}

For example:

Load the adit sprite in the Bubble Wrap style at 2x in png format:

https://mapzen.com/carto/bubble-wrap-style/8/icons/2x/adit.png

Bubble Wrap adit

See our Icon Library documentation for more information, and let us know what you make!