By: Ryan Hamley
The latest GL JS release (v1.9.0) brings several new features, fixes for long-standing bugs with line-pattern, and updates to our CHANGELOG policy for contributors. Check out the demos below to see the new features, and view the changelog for a complete list of what’s new.
Know if data is within a boundary
The highlight of this release is the within expression, which allows developers to check whether or not a feature is in the bounds of a GeoJSON polygon. This enables styling point and line data differently if they’re fully within a polygon’s borders.
The example below demonstrates how to use the within expression to change the color of symbol layer features based on whether they’re fully contained within the green polygon covering Maine. The Augusta to Bangor route and labels are black because they’re inside the Maine polygon. The Concord to Boston route and labels are colored red because the expression sets red as the fallback value when the features are not contained within the Maine polygon.
Adjust the map center based on UI elements
Map padding options are now available to the camera methods Map#easeTo, Map#jumpTo, and Map#flyTo. This shifts the visual center of the map to match overlaid UI elements on your page, such as sidebars, headers, and footers. Different padding values can be specified for each side of the map for granular control.
queryRenderedFeatures now returns evaluated properties
The Map#queryRenderedFeatures method returns a list of visible features in a geographic area. Previously, when a feature used an expression, queryRenderedFeatures would return the expression as-is. With this update, queryRenderedFeatures will evaluate the expression and return the result, which makes debugging expressions easier and allows expressing the evaluated result within GL JS. This update also improved performance when queryRenderedFeatures evaluates many features at once.
These and other improvements are available today to give you more tools to customize your map visualizations on web and mobile in the Maps SDKs for iOS and Android. See our changelog for the complete list of updates. We’re excited to see what you build, share your projects with us on Twitter using #BuiltWithMapbox.
Ryan Hamley - Software Engineer - Mapbox | LinkedIn
Maps feature data from Mapbox and OpenStreetMap and their data partners.
Introducing GL JS v1.9.0 and the “within” expression was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.