icons.md

Icon Library

Mapzen basemap styles include custom icons to display points of interest on a map, ranging from airports to zoos. These can be used interchangeably between the different basemaps or in a custom Tangram map of your own.

The library has expanded to a several hundred icons. Most, but not all icons, are available in 4 or more styles.

There are no rights restrictions on the icons. The examples below are for Tangram but you are free to use the icons in your favorite mapping library or application. The original Illustrator vector artwork is also available.

Using built-in sprites

Icons can be added to a Tangram map using the sprites property of the mapzen_icon_library draw style.

By icon name

Import the Refill basemap style (which includes the Mapzen icon library) and draw user-provided points on the map using the library's zoo icon.

import:
    - https://mapzen.com/carto/refill-style/9/refill-style.zip

sources:
    my-source:
        type: GeoJSON
        url:  https://example.com/filename.geojson

layers:
    my-layer:
        data:
            source: my-source
        draw:
            mapzen_icon_library:
                sprite: zoo

Data-driven styling

Data-driven styling is supported when your data includes a kind property with values matched to the icon names in the table. Data is evaluated on a per-feature basis so you'll end up with a variety of icons shown on the map.

import:
    - https://mapzen.com/carto/refill-style/9/refill-style.zip

sources:
    my-source:
        type: GeoJSON
        url:  https://example.com/filename.geojson

layers:
    my-layer:
        data:
            source: my-source
        draw:
            mapzen_icon_library: {}

Bring your own classification

Sprites can be defined with a Javascript function that allows remapping property values to the named icons in the library.

import:
    - https://mapzen.com/carto/refill-style/9/refill-style.zip

sources:
    my-source:
        type: GeoJSON
        url:  https://example.com/filename.geojson

layers:
    my-layer:
        data:
            source: my-source
        draw:
            mapzen_icon_library:
                sprite: |
                    function() {
                        var class = feature.class;
                        var kind = class == 'my_airport'   ? 'airport'  :
                                   class == 'my_hospital'  ? 'hospital' :
                                   class == 'my_zoo'       ? 'zoo'      :
                                   'generic';
                        return kind;
                    }

Using Mapzen icons independently

Tangram

You can use the icons in the Mapzen icon library independent of Mapzen basemap styles by importing just the icon bundle into a Tangram scene.

• https://mapzen.com/carto/bubble-wrap-style/8/themes/bubble-wrap-icons.zip
• https://mapzen.com/carto/cinnabar-style/8/themes/cinnabar-icons.zip
• https://mapzen.com/carto/refill-style/9/themes/refill-icons.zip
• https://mapzen.com/carto/tron-style/5/themes/tron-icons.zip
• https://mapzen.com/carto/walkabout-style/6/themes/walkabout-icons.zip
• https://mapzen.com/carto/sdk-default-style/1/themes/sdk-default-icons.zip

For example:

import:
    - https://mapzen.com/carto/refill-style/9/themes/refill-icons.zip

sources:
    my-source:
        type: GeoJSON
        url:  https://example.com/filename.geojson

layers:
    my-layer:
        data:
            source: my-source
        draw:
            mapzen_icon_library:
                sprite: zoo

Sprites

The Mapzen Icon Library is available for use in your favorite mapping or graphics software as individual sprite images.

Currently only 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

Customize icon colors

You can customize the icon colors by changing the global color of colorized-icons in styles. Assign the color in the global u_tint. If you would like to color the badge fill area, assign the color in the draw layer. See below:

import:
    - https://mapzen.com/carto/refill-style/9/themes/refill-icons.zip

sources:
    my-source:
        type: GeoJSON
        url:  https://example.com/filename.geojson

styles:
    colorized-icons:
        shaders:
            uniforms:
                # color the icon here
                u_tint: [0.925,0.090,0.094]

layers:
    my-layer:
        data:
            source: my-source
        draw:
            mapzen_icon_library:
                # color the badge fill area here
                color: [0.724,1.000,0.893]
                sprite: zoo

Mix and match icon styles

You could even use the Bubble Wrap icons on Refill!

import:
    - https://mapzen.com/carto/refill-style/9/refill-style.zip
    - https://mapzen.com/carto/bubble-wrap-style/8/themes/bubble-wrap-icons.zip

Sprites

Sprite names generally match the kind values from the Mapzen vector tiles points of interest (pois) layer.

Some exceptions:

• Populated places that are displayed as point features (capitals, cities, and towns for instance) use the capital or townspot icons, respectively.
• Icons for sports pitches and religious places of worship are based on kind_detail.
• Road shields are generally sourced from the network values in the roads layer
• User experience assets are prefixed with ux-.

sprite	Bubble Wrap	Walkabout	Tron	Refill	Cinnabar
adit
aerodrome
airport
airport-l
alcohol
allotments
amusement_ride
apartments
aquarium
archaeological_site
atm
attraction
bakery
bank
bar
baseball
basketball
battlefield
bbq
beach
beach_resort
beacon
bench
bicycle
bicycle_parking
bicycle_rental
bicycle_rental_station
biergarten
boat_rental
books
brewery
bridge
buddhist
building
bus_station
bus_stop
butcher
cafe
camp_site
capital-l
capital-m
capital-s
capital-xl
capital-xs
car
car_repair
car_sharing
caravan_site
care_home
castle
category-namespace-do_and_see
category-namespace-eat_and_drink
category-namespace-education_and_religion
category-namespace-health
category-namespace-mobility
category-namespace-other
category-namespace-shop_and_service
category-predicate-addressing
category-predicate-attraction
category-predicate-civic
category-predicate-drink
category-predicate-eat
category-predicate-education
category-predicate-fun
category-predicate-health
category-predicate-industry
category-predicate-mobility
category-predicate-money
category-predicate-nature
category-predicate-religion
category-predicate-service
category-predicate-shop
category-predicate-sleep
category-predicate-transport
cemetery
chapel
chimney
christian
cinema
clinic
clothes
college
company
computer
confectionery
conservation
convenience
county_shield-1char
county_shield-2char
county_shield-3char
county_shield-4char
county_shield-5char
courthouse
dam
dentist
department_store
dive_centre
dock
doctors
dog_park
doityourself
dot-black
dot-white
drinking_water
dry_cleaning
electronics
embassy
enclosure
estate_agent
factory
fashion
fast_food
ferry
ferry_terminal
fire_station
firepit
fishing
fishing_area
fitness
fitness_station
florist
forest
fort
fountain
fuel
gallery
garden
gas_canister
gate
generator
generic
generic_shield-1char
generic_shield-2char
generic_shield-3char
generic_shield-4char
generic_shield-5char
geyser
gift
golf_course
government
grass
grave_yard
greengrocer
hairdresser
hangar
hardware
historical
hospital
hostel
hot_spring
hotel
hunting
ice_cream
industrial
information
insurance
jewelry
jewish
kindergarten
kiosk
landmark
laundry
library
light_rail
lighthouse
liquor
mall
manor
marina
memorial
mine
mineshaft
mobile_phone
monument
motel
motorcycle
museum
music
muslim
national_park
natural_forest
nature_reserve
newspaper
nursing_home
observatory
office
optician
outdoor
painter
park
park-l
parking
peak
pet
pharmacy
photographer
photographic_laboratory
picnic_site
picnic_table
pier
pitch
place_of_worship
plant
playground
police
post_office
protected_area
pub
public
quarry
ranger_station
recreation_ground
recreation_track
recycling
restaurant
retail
ruin
ruins
school
scuba_diving
shoemaker
shower
ski
ski_jumping
ski_rental
ski_school
skiing
slipway
soccer
sports
sports_centre
spring
stadium
station
store
substation
subway_entrance
summer_camp
supermarket
swimming_area
swimming_pool
tailor
taqueria
telescope
tennis
theatre
theme_park
toilets
tower
townhall
townspot-l
townspot-l-rev
townspot-m
townspot-m-rev
townspot-s
townspot-s-rev
townspot-xl
townspot-xl-rev
townspot-xs
townspot-xs-rev
toys
traffic_signals
trailhead
train
train_station
train_station-l
tram_stop
tree
tree-s
university
US:CA-1char
US:CA-2char
US:CA-3char
US:CA-4char
US:CA-5char
US:I-1char
US:I-2char
US:I-3char
US:I-4char
US:I-5char
US:NY-1char
US:NY-2char
US:NY-3char
US:NY-4char
US:NY-5char
US:PA-1char
US:PA-2char
US:PA-3char
US:PA-4char
US:PA-5char
US:US-1char
US:US-2char
US:US-3char
US:US-4char
US:US-5char
ux-current-location
ux-locate-off
ux-locate-on
ux-route-arrow
ux-route-start
ux-route-stop
ux-search-active
ux-search-inactive
ux-transit-stop
veterinary
viewpoint
vineyard
volcano
wastewater_plant
water_park
water_slide
water_tower
water_works
waterfall
wayside_shrine
wine
winery
winter_sports
works
zoo

Versions

The following Mapzen basemap styles support the mapzen_icon_library style defaults and named icon assets:

• Bubble Wrap: 8.0.0 and later
• Cinnabar: 8.0.0 and later
• Refill: 9.0.0 and later
• Tron: 5.0.0 and later
• Walkabout: 6.0.0 and later

Earlier versions of Mapzen basemap styles did not support all icons in the table above or the style defaults.