Tangram Versions Save

New Features

• Allow points styles using textures with no defined sprites to use percentages (size: 50%) and ratios (size: [16px, auto] or size: [50%, auto]), as well as density. https://github.com/tangrams/tangram/pull/645

Bug Fixes

• Fix polygon hole glitch – thanks @ThFischer! https://github.com/tangrams/tangram/pull/651
• fix unique parameter for queryFeatures(), when geometry: true is also set https://github.com/tangrams/tangram/commit/7ba382c11a40113f31094f16fd45b78a1daf4656
• wrap all property JS functions with try/catch, and add more error context https://github.com/tangrams/tangram/commit/45ece8536e1d541cedd99904aacf9eef33720659
• return value for angle JS function should expect degrees and convert to radians https://github.com/tangrams/tangram/commit/3c32a5df6d5f621c3c2e2937858cd5c4d4862495
• fix element_offset assignment https://github.com/tangrams/tangram/commit/62cdb0faf4e42770326b1c5a90ab413df247b971
• save references to overloaded leaflet methods, and only call them when the tangram layer is active (fixes issue with switching between tangram and non-tangram layers w/leaflet layer control #637)

Bug Fixes

• For non-tiled GeoJSON data sources
  • Remove features with a null or missing geometry (which is valid GeoJSON) before they are sent to geojson-vt (which breaks when it encounters them).

New Features

• Improved label collision across tiles, data sources, and zoom levels (#633)

  • Adds a new label collision pass to the main thread, improving label behavior in the following ways:
    • Labels will properly collide across data sources #365
    • Labels that cross tile boundaries will be properly evaluated
    • Labels collision can be re-evaluated at intermediate zooms, allowing additional labels to be shown mid-zoom

• Support CSV and other formats with data source preprocess option (#635)

  • Add a new data source preprocess option to enable support for formats that may contain geographic data, but not be formatted in the commonly supported formats (GeoJSON, MVT, etc.). This parameter can define a JS function to mutate the raw network response fetched by a data source, before it is processed further. This is similar to the existing transform function, with the difference that transform is called after initial response parsing (e.g. decoding TopoJSON and MVT to GeoJSON-style data).
  • The preprocess function should return data in the format expected by the data source type, e.g. if type: GeoJSON, then preprocess should return a GeoJSON object.
  • For example, given a Who's On First CSV export (which contains geographic data in the form of census interior points) formatted like this:

  name_eng_x_variant,uscensus_aland,uscensus_awater,uscensus_cd115fp,uscensus_cdsessn,uscensus_funcstat,uscensus_geoid,uscensus_intptlat,uscensus_intptlon,uscensus_lsad,uscensus_lsy,uscensus_mtfcc,uscensus_namelsad,uscensus_sldlst,uscensus_sldust,uscensus_statefp,wof_abbreviation,wof_association,wof_belongsto,wof_breaches,wof_categories,wof_concordances,wof_concordances_sources,wof_constituency,wof_country,wof_created,wof_geomhash,wof_hierarchy,wof_id,wof_lastmodified,wof_name,wof_parent_id,wof_path,wof_placetype,wof_placetype_id,wof_placetype_names,wof_repo,wof_subdivision,wof_superseded_by,wof_supersedes,wof_tags
  ,8016461395.0,408281421.0,null,null,N,36115,+44.6404010,-074.1531364,L3,2016,G5220,Assembly District 115,115,null,36,null,state-house,"[102191575,85633793,85688543]",[],[],null,[],region,us,1481487733,6cdeb8e408b110a903cfa09f169127fc,"[{""continent_id"":102191575,""country_id"":85633793,""region_id"":85688543}]",1108771377,1481487733,New York Assembly District 115,85688543,110/877/137/7/1108771377.geojson,constituency,1108746739,[],whosonfirst-data-constituency-us-ny,null,[],[],[]
  ,2096846209.0,18904910.0,null,null,N,36124,+42.1485630,-076.4279918,L3,2016,G5220,Assembly District 124,124,null,36,null,state-house,"[102191575,85633793,85688543]",[],[],null,[],region,us,1481487736,62c624e9313c3aced2ad496c1a616d35,"[{""continent_id"":102191575,""country_id"":85633793,""region_id"":85688543}]",1108771397,1481487736,New York Assembly District 124,85688543,110/877/139/7/1108771397.geojson,constituency,1108746739,[],whosonfirst-data-constituency-us-ny,null,[],[],[]
  ,1227673529.0,781123966.0,null,null,N,36055,+43.1085124,-077.4895172,LU,2016,G5210,State Senate District 55,null,055,36,null,state-senate,"[102191575,85633793,85688543]",[],[],null,[],region,us,1481487766,1e43fde4d5e7da384bd94e3b3007b975,"[{""continent_id"":102191575,""country_id"":85633793,""region_id"":85688543}]",1108771579,1481487766,New York State Senate District 55,85688543,110/877/157/9/1108771579.geojson,constituency,1108746739,[],whosonfirst-data-constituency-us-ny,null,[],[],[]
  

  • We can use the preprocess function to remap those columns into a GeoJSON collection of points:

   csv:
        type: GeoJSON
        url: ny-us-constituencies.csv
        preprocess: |
            function (data) {
                var rows = data.split('\n');
                return {
                    type: 'FeatureCollection',
                    features: rows.map(function(row) {
                        row = row.split(',');
                        return {
                            type 'Feature',
                            geometry: {
                                type: 'Point',
                                coordinates: [row[8], row[7]] // census intptlon & intptlat fields
                            },
                            properties: {
                                name: row[12] // district name
                            }
                        }
                    })
                };
            }
  

• Support external scripts at scene-level (#634)

  • Since externally loaded scripts specified via the scripts parameter for data sources actually load those scripts into global scope, this syntax has been generalized to allow (and prefer) scripts to be specified at the scene level, in the scene block.
  • Additionally, instead of an array of script URLs, scripts are now specified as a mapping, with the key being a user-defined library name, and the value being the URL. This also lessens the potential for collisions between different versions of scripts when composing scenes with import. For example:

  scene:
    scripts:
      d3: https://d3js.org/d3.v5.min.js
  

  • The new syntax is also now preferred for scripts specified in sources, though the previous array syntax continues to be supported for backwards compatibility.

Bug Fixes

• Fix document.currentScript compatibility issue (when value is null) #626
• Fix case where feature selection data can get out of sync on worker re-initialization ca798f7

Demo

• Update demos to point to Nextzen tiles and resources.

Bug Fixes

• Fix intermittent occurrences of random point sizes when size is not specified b8177d8
• Skip line outlines that specify non-existent draw styles (those not defined at all, or abstract styles lacking a base, or not compiled due to errors), logging a warning and continuing with other features (rather than halting all rendering) 2b540a2

Internal

• Upgrade pbf parser to v3.1.0

• No functionality changes.
• Improve dev/build process for Windows.
• Whilelist files in package.json to avoid publishing extraneous ones.

Functionality Changes

• Line offsets #547
  • lines-based styles can now specify an offset as a draw group parameter.
  • This is useful for transit rendering and other cartographic cases where you need to maintain separation between parallel lines.
  • Line offset is a 1D value specifying a positive or negative (to the right or left of the line, respectively) offset in pixels:
    • offset: 4px # offset four pixels to the right of the line
  • The offset can be interpolated with zoom stops, e.g.:
    • offset: [[15, 3px], [16, 6px]] # interpolate offset between zooms
    • This can be used in conjunction with an interpolating line width to keep two or more parallel lines alongside each other without overlapping (for example, multiple colored transit lines).
• Translucent blend mode #587
  • A new blend: translucent mode, that provides alpha blending for front-facing polygons (but still culls back-faces) while also using the depth buffer.
  • This is useful for the effect of semi-transparent buildings common on 3D maps.
• draw-group-level point textures #588
  • points-based styles can now specify a texture to draw with at the draw-group level, using the texture parameter. Previously, each style could only specify a single texture (at the styles level). This is now relaxed, so that a single style can mix and match as many textures as needed (including drawing some layers without a texture, using basic colored points). See #588 for more examples. e.g.

    landuse:
      filter: ...
      draw:
        points:
          ... # no texture specified for landuse layer, draw with basic colored points
    pois:
      filter: ...
      draw:
        points:
          texture: pois.png # use texture for POIs layer
    

  • An inherited texture value can also be removed from a layer by setting texture: null in the draw group.
  • If the style itself has a texture set, this will be the default value used for draw groups that do not set it. This provides full backwards compatibility.
• draw-group-level line dash patterns and textures #601
  • Similar to the changes above for point textures, lines-based styles can also now specify a different dash pattern, dash_background_color, or texture as draw group parameters. This allows a single lines style to mix and match different dash patterns (or no dash pattern) and textures. See #601 for more examples. e.g.

    paths:
      filter: { kind: path }
      draw:
        lines:
          dash: [2, 1] # draw paths with a dash pattern
          ...
    
    ferries:
      filter: { kind: ferry }
      draw:
        lines:
          dash: [1, 3, 1] # draw ferries with a different dash pattern
          dash_background_color: white # and change the background color
          ...
    

  • If the style itself has a dash, dash_background_color, or texture set, these will be the default values used for draw groups that do not set them. This provides full backwards compatibility.
  • For line outlines (specified with outline), the dash and dash_background_color will be inherited from the line fill. If the line fill does not set these parameters, they will inherit from the outline's style.
    • The outline will not inherit the line fill's texture value, as this is rarely desirable visually. The outline could explicitly set the texture to the same value in a case where this is needed.
  • If an inherited dash pattern or color is not desired on the outline, these can be removed by setting dash: null or dash_background_color: null in the outline block.
• Add density parameter for textures to allow for auto-sizing of sprites #234
  • An optional density parameter in texture definitions can be used to indicate the native pixel density that the texture was created for. It defaults to 1.
  • Since points-based styles specify their display size in CSS pixels, it was previously necessary to explicitly specify the 1x display size for sprites that were authored in 2x or higher density. This adjustment now happens automatically: if no size is specified in the draw group, the appropriate CSS display size will be used, accounting for the texture's native density.
• Percent-based scaling for sprites #616
  • It's often desirable to specify the size of a sprite as a percentage of its full size, especially to interpolate between zooms. A % qualifier now enables this when setting size:
    • size: 50%
  • The percentage is applied to the sprite's size in CSS pixels, consistent with the density parameter for textures. For example:
    • A texture with actual pixel width of 64px and density: 2 has an intended CSS pixel display size of 32px.
    • A setting of size: 100% will display this sprite at 32px CSS pixels (e.g. 32px actual pixels on a 1x display, or 64px on a 2x retina display).
  • Percent scaling can also be used with zoom interpolation, including mixing with explicit px sizing:
    • size: [[13, 50%]], [20, 100%]] # scale from 50% to 100% across a zoom range
    • size: [[13, 12px]], [20, 100%]] # scale from 12px square to 100% across a zoom range
  • Percent scaling can accept values greater than 100%, e.g. size: 200% will scale the sprite to twice its native size.
• Ratio-constrained scaling for sprites #616
  • Previously, scaling a sprite's size in a draw block required specifying explicit values for both width and height, e.g. size: [16px, 24px] (or a single 1D value, but that is only applicable to sprites with a square aspect ratio). A common use case is to scale a set of related sprites to a fixed size on one side, for example drawing all highway shields (which have varying widths for different character counts) at a fixed height of 24px. This was cumbersome because the user needed to manually calculate the corresponding width for every sprite (possibly at multiple zoom levels).
  • A new ratio-constrained scaling syntax allows the user to specify a size for the width OR height, with the unspecified dimension automatically calculated to preserve the sprite's aspect ratio. The syntax for this is to specify size as a 2D array, with the special auto value as one of the dimensions:
    • size: [32px, auto] # scale the sprite to 32px wide, with auto-calc height
    • size: [auto, 16px] # scale the sprite to 16px high, with auto-calc width
  • Ratio-constrained scaling can also be used with zoom interpolation, including mixing with percent scaling:
    • size: [[15, [auto, 12px], [20, [auto, 20px]] # scale between two heights
    • size: [[13, [auto, 12px]], [20, 100%]] # scale from a fixed height to full size
• New scene events before/after update loop
  • pre_update (before scene update loop is executed) and post_update (after scene update loop, only fired if scene re-rendered), can be subscribed to with scene.subscribe({ ... }).
  • These events match the existing preUpdate and postUpdate callback options when creating the map with Tangram.leafletLayer() (internally, these callbacks are now auto-subscribed to the new events).
• size value on points-based styles must be positive
  • Negative size values have unexpected effects when draw points features. For consistency, these values are now required to be positive. However, if a point has an attached text block, the text will still be drawn even if the point size is zero.
• buffer value on points/text-based styles must be zero or greater
  • Negative buffer values have unexpected effects when colliding points or text features. For consistency, these values are now required to be >= 0.

Bug Fixes

• Line outlines with an inherited dash pattern now correctly match the line fill #393
  • Previously, a line outline would inherit the dash pattern from the line fill, but the the pattern scales were not correctly matched. The line fill and outline dashes now match:
• Don't display raster textures that fail to load #599 #598
  • Raster tile layers would cover up the scene beneath them (with black) whenever tiles failed to load. They are no longer displayed.

Internal

• Tangram's Leaflet layer should now keep in better sync with other Leaflet markers or SVG layers. afaa311
  • By default, Tangram modifies Leaflet's default zoom in/out animation behavior to achieve better synchronization. These modifications can be disabled with the modifyZoomBehavior: false option when creating the layer with Tangram.leafletLayer().
  • Note: these modifications disable Leaflet's zoomanim event; if this interferes with your application, please disable the modification.
• Use a MutationObserver to keep Tangram's <canvas> in sync with the Leaflet container.
• Refactor of method for storing and interpolating line widths (and offsets) in vertex shader
• Refactor parsing of inline textures (to accommodate draw-group-level textures)
• Polyline builder speed-ups
• Make placeholder loading texture (1px black pixel) also transparent 2e1a583
• Send custom scripts URLs directly to worker for importing, instead of wrapping in second blob URL 9220c53
• Ensure global object is available in scene.config, even if empty 3a63634

Bug Fixes

• Fix exceptions caused by log messages sent from workers with un-cloneable data (such as JS functions), which manifested as some tiles failing to load/display.

Bug Fixes

• Avoid divide by zero when calculating alpha for points styles
  • Fixes visual artifacts on some iOS versions
• Only clear tiles from worker cache for data sources that changed (when scene is updated)
  • Fixes issue where scene.queryFeatures() would not capture all data when scene.setDataSource() had been recently called

Improvements

• Improve line label placement on overzoomed tile sources with additional "last resort" pass on entire line when fewer than requested labels (subdivisions) were placed 31c6ff5
• Improved alpha and antialiasing for points #583 #577

Bug Fixes

• Fix fill/outline blending for points when using blend: add #592
  • N.B.: similar fixes should be apply to blend: multiply in the future
• Fix rendering of curved boundary (left/right) labels 3e1ddbd
• Fix visible parameter for scene.queryFeatures() 65246e3
• Fix bug where label texcoord cache reference was out of date, occasionally leading to incorrect/scrambled labels 8c766e8
• Fix rendering of points with blend modes other than overlay/inlay51b1123

Internal

• Skip updating scene on scene.setIntrospection() if introspection state hasn't changed ffb630f

Bug Fixes

• Add null checks on camera and view to prevent exceptions during initialization in some cases.
• Restore application of color and filter shader blocks to standalone text styles (as expected, these blocks are still not applied to text attached to a points style).
• Fix array iteration when applying globals, prevents worker data clone exceptions when Tangram is used alongside another library that modifies the underlying array prototype (such as Ember).

Internal

• Only mark scene as animating when animated styles are currently in view; improves idle performance for scenes with animated styles only used at some zooms or areas.