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
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.zipBubble 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.zipWalkabout 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.zipAdd 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.
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: falseCustomize 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.
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.
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: falseSprites 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
See our Icon Library documentation for more information, and let us know what you make!
