Tangram is a javascript library for rendering 2d & 3d maps in the browser using Web GL. It allows for some pretty complex visualizations of maps that include the use of light sources, shaders, animation, and textures.

Since Tangram supports the Mapbox MVT tile format, I wanted to try and leverage Esri’s OpenStreetMap Vector Tiles. Check out the app or view the messy code

The map is viewed through the Tangram Leaflet Plugin and reads from a .yaml that stores the styling. You can add Esri’s OSM tiles like this:

sources:
    esri:
        type: MVT
        url: https://basemaps.arcgis.com/arcgis/rest/services/OpenStreetMap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf

..then add land polygons

land small scale:
    data: { source: esri, layer: 'land (small scale)' }
    draw:
        polygons:
            order: 0
            color: '#f4f4f4'

..and finally add some country labels

country label:
    data: { source: esri, layer: 'country/label' }
    draw:
        text:
            priority: 10
            anchor: center
            text_source: global.esri_name
            font:
                size: [[2,12],[5,14]]
                transform: uppercase
                fill: '#aaafac'
                stroke:
                    color: '#f7f7f7'
                    width: 2

since quite a few layers in the tiles store the main labeling attribute under the column name _name, you can add a global property at the top of the .yaml to point your labels to (text_source: global.esri_name in the above example)

global:
    esri_name: |
        function() {
            { return feature._name; }
        }

This is a very simple example that doesnt even scratch the surface of Tangram’s capabilities. Check out the code for the entire yaml here

As usual, email me or hit me up on twitter if you want some more details or have any general questions.