@bcamper bcamper released this Apr 8, 2016 · 1447 commits to master since this release

Assets 2

New Features & Enhancements

  • Scene imports

    • Scene files can now import other scene files, with a new top-level import block. Each scene file can import one or more additional scene files (which can then in turn recursively import others).
    • Enables several use cases including:
      • Overlays: import a basemap and add new layers
      • Themes: import a basemap and modify color or style parameters
      • File management: split large scenes into multiple files
      • Common components: import spritesheets, shaders, etc. published by Mapzen or others
    • The import statement works by deep-merging each imported scene into the current one. The "child" (imported) file is merged first, with the "parent" file merged after, overwriting any properties shared with the child.
    • Examples:
      • import: pois.yaml (import a single file)
      • import: [pois.yaml, roads.yaml, landuse.yaml] (import multiple files)
    • See #278 for more info and examples.
  • Global scene properties

    • Adds global scene properties, user-defined properties in the scene file that can be substituted for values elsewhere in the file.
    • Examples include common colors, language preferences, or visibility flags used to tweak styles.
    • Similar to YAML's anchors & references, but with the added benefit that they can be updated at run-time, enabling features like an in-app language selector.
    • Global properties are defined in the scene's top-level global block, and can be referenced as YAML property values or in JS function filters and properties with global. syntax. Properties can also be nested and accessed with dot notation, e.g. global.group.property.
    • Example:
             roads: red
             data: ...
                   color: global.colors.roads # global property is substituted here
                   width: 4px
    • See #263 for more info and examples.
  • Raster tiles + normal maps

    • Raster data sources to load raster tiles from a URL template
    • Built-in raster style to render raster tiles, either as a traditional basemap, or optionally masked against other polygon geometry
    • Style functionality for accessing one or more Raster data sources as texture samplers within shaders, enabling advanced effects (e.g. unpacking of custom encoded rasters, deriving surface normals from height maps, etc.)
    • Built-in support for applying raster samplers as normal maps (for terrain rendering).
    • See #282 for more info and examples.
    • Terrain rendering example with geometry masking, colored by landuse polygons:

    tangram-fri apr 01 2016 12-35-12 gmt-0400 edt

  • Linear texture coordinates on lines

    • Texture coordinates for line geometries are generated with a linear scale in relation to the line's width, enabling properly spaced line patterns. (Previously, texture coordinates ranged from 0-1 in the Y coordinate across the whole line, which did not provide any consistent means to scale a pattern.)
    • When texcoords: true for any lines-based style, the value of v_texcoord.x will range from 0-1 across the width of the line, and the value of v_texcoord.y will be a floating number where a unit of 1 covers the same distance as the line's width.
    • For example, setting color.rgb = vec3(fract(v_texcoord.y)); creates a pattern of repeating greyscale gradient squares across the line:
      • screen shot 2016-04-04 at 6 02 55 pm
    • The pattern's aspect ratio can be adjusted by dividing the v_texcoord.y, for example fract(v_texcoord.y / 2.) creates a pattern that is twice as long as it is wide:
      • screen shot 2016-04-04 at 6 05 05 pm
  • Simplified event handling for feature click and hover

    • New hover and click events simplify the process of setting up Tangram feature selection callbacks, removing the need for boilerplate code for DOM events.
    • For example, an events object with callback functions can be passed when initializing the layer:
    var layer = Tangram.leafletLayer({
      scene: 'scene.yaml',
      events: {
         hover: function(selection) { console.log('Hover!', selection); },
         click: function(selection) { console.log('Click!', selection); }
    • Selection event handlers will be passed the same selection object returned by direct calls to scene.getFeatureAt() (which is still supported and available for custom input/event needs).
    • Selection events can be added, changed, or removed after layer creation with a call to layer.setSelectionEvents(events). See #279 for more info and examples.
  • The Scene.setDataSource() method returns a promise, to allow for chaining, e.g. to take a screenshot immediately after updating a data source.


  • Generic scene import functionality from #278 allows us to deprecate two earlier attempts at modularity:
  • Layer-specific properties have been removed, in favor of global scene properties (added in #263).
  • Font typeface legacy syntax has been removed (it was replaced by more specific font face properties introduced in v0.4.0

Bug Fixes

  • Fix "diamond" style mixin patterns, where a single source style is mix'ed into more than one of a target style's ancestors. For example: style A is mixed into styles B and C with mix: A, and style D includes both of those with mix: [B, C]. In this case, A should only be mixed into D once.


  • The depth function is set to GL_LESS instead of GL_LEQUAL. This should not result in visual rendering changes, but can reduce overdraw.