With support for mobile gestures and improved line labels
The latest GL JS release (v1.10.0) introduces new touch gestures for mobile, better placement of line labels, two new expressions to manipulate strings and arrays, and other new features and improvements.
New gesture handling on desktop and mobile platforms
In our effort for consistency across devices and platforms in our Maps SDKs, we have been working on a major rewrite of our gesture system. On mobile, we added three new touch gestures: two-finger swipe to adjust camera pitch, two-finger double-tap to zoom out, and tap then drag to adjust zoom with one finger.
In addition to these new gestures, we fixed some long-standing issues:
- Interact with multiple maps on one page. You can interact with multiple maps on the same page, at the same time. For example, you can pinch rotate one map while touch panning a different one. You can try this out in this example showing multiple maps. This can be useful for large touch screens in showcase situations.
- Gestures with inertia. Previously, touch rotation and mouse pitching did not have inertia. GL JS v1.10.0 adds inertia to bring these gestures in line with native gesture behaviors, giving a more natural feel when interacting with the map at different speeds.
- Prevent pan interruptions. It is now possible to pan without interrupting the gesture by accidentally touching the screen with another finger. This issue often resulted in inconsistent map location jumps.
- Increased rotating threshold. It’s harder to accidentally rotate while zooming quickly, because the gesture threshold is now less sensitive when your fingers start close to each other.
Greater precision inline label placement
V1.10.0 improves the placement of line labels and how they are rendered in tilted map views.
Our label placement phase uses circle probes to detect whether different labels collide with each other, which ensures that the labels are legible and do not intersect. This release reduces the number of circles used by tightly packing them around our labels. This reduces memory footprint, requires fewer intersection tests, and allows more labels to be visible on the map.
We also better handle the limitations of our label rendering on tilted views. Previously, further away labels suffered from precision errors resulting in visual artifacts; the new technique eliminates these errors, resulting in enhanced readability.
Search arrays and strings for dynamic styling
v1.10.0 introduces two new lookup expressions, slice and index-of. These new expressions complement the in expression we introduced in v1.6.0, which determines whether an element exists in an array or a substring in a string. (h/t lbutler).
The slice expression can be used to select sections of an array or string.
The slice expression goes hand in hand with index-of, which facilitates finding the index of a particular element in a string or array. This can be used to strip extraneous characters from a map label, for example. The expression below demonstrates how these two expressions can be combined:
Optimize map load times with resource preloading
We’ve also introduced new methods to improve map load time. You can now call mapboxgl.prewarm() to create web workers earlier in your application’s lifecycle.
This is particularly useful when using GL JS in a single-page application (e.g. a React or Angular app) that has several maps, where navigating between them causes resources to be constantly created and destroyed. You can now create these web worker resources once, for all the map views in your application.
Resource pre-warming is independent of map instantiation so you can call mapboxgl.prewarm() in the <head> tag to start creating these resources as soon as your web page starts loading.
Documentation sprint
We improved our documentation and examples based on the feedback provided by the community. Feel free to check out the updated documentation page, which contains all of these updates.
These and other improvements are available today to give you more tools to customize your map visualizations on the web and on mobile with the Maps SDKs for iOS and Android. See our changelog for the complete list of updates. We’re excited to see what you build so share your projects with us on Twitter using #BuiltWithMapbox.
Introducing GL JS v1.10.0 was originally published in maps for developers on Medium, where people are continuing the conversation by highlighting and responding to this story.