As part of our ongoing efforts to enable developers to further style and customize the Google basemap, today we’re announcing the launch of advanced polyline styling for the Maps SDK for Android. This feature builds on the polylines capability we currently offer, which allows developers to create stylized lines rendered on the map, and are often used to represent information about directions, parade routes, and street closures. Polylines are one of the most common features Google Maps Platform developers use to customize maps for their users.
From our partners:
Advanced polyline styling gives you new ways to make this core feature more informational and expressive by introducing three new polyline customizations: multicolored polylines, gradient polylines, and stamped polylines.
Advanced polyline styling is available today when you use version 18.1.0 or later of the Maps SDK for Android with the latest renderer enabled, and version 5.2.0 of the Maps SDK for iOS.
Multicolored polylines
Multicolored polylines allow you to segment polylines, and represent information by applying different colors to each segment. This customization type has many use cases, such as conveying varied information along a route, matching a company’s branding for a seasonal campaign, or drawing a user’s attention to an area.
To use a multicolored polyline, create `StyleSpan` objects and add them to `PolylineOptions` using the `addSpan()` or `addSpans()` methods. By default, each item in the array will set the color of the corresponding line segment. The following example shows setting segment colors to create a polyline with green and purple segments:
Polyline line = map.addPolyline(new PolylineOptions().add(new LatLng(37.789258, -122.387819),new LatLng(37.786572, -122.390556),new LatLng(37.786140, -122.390899)).addSpan(new StyleSpan(Color.MAGENTA)).addSpan(new StyleSpan(Color.GREEN)));
Gradient polylines
Gradient polylines apply a two-color gradient over the entire polyline, which can be useful for representing changing intensities, such as traffic flow or a change in elevation.
To use a gradient polyline, define a gradient by specifying two 32-bit alpha-red-green-blue (ARGB) integers that set the beginning and ending colors of the polyline, then set this property on the shape’s options object by calling `PolylineOptions.addSpan()`.
Here’s an example that creates a gradient polyline from San Francisco to Rancho Corral de Tierra:
Polyline line = map.addPolyline(new PolylineOptions().add(new LatLng(37.662953, -122.400542), new LatLng(37.5414277, -122.4845455)).addSpan(new StyleSpan(StrokeStyle.gradientBuilder(Color.GREEN, Color.RED).build())));
Stamped polylines
With stamped polylines, you can create a polyline using a repeating bitmap image of your choice. This allows you to customize the shape and appearance of the polyline.
To use a stamped polyline, set the appearance of a polyline to a repeating bitmap texture by creating a `StampStyle` of `TextureStyle`. You can set this property on the shape’s options object by calling `PolylineOptions.addSpan()`:
StampStyle stampStyle = TextureStyle.newBuilder(BitmapDescriptorFactory.fromResource(R.drawable.arrow)).build();Polyline line = map.addPolyline(new PolylineOptions().add(new LatLng(37.789258, -122.387819),new LatLng(37.786572, -122.390556),new LatLng(37.786140, -122.390899)).addSpan(new StyleSpan(StrokeStyle.colorBuilder(Color.BLUE).stamp(stampStyle).build())).addSpan(new StyleSpan(StrokeStyle.colorBuilder(Color.YELLOW).stamp(stampStyle).build())));
Styling and customization features are one of the best and easiest ways to improve the mapping experience for your users, convey critical information, and make the map your own. Along with the recent release of other styling and customization features like Cloud-based maps styling, Data-driven styling, and WebGL-powered maps features, our team is working hard to give you the tools you need to create great mapping experiences that have the flexibility to meet your individual needs. We hope you enjoy this new way to customize and style polylines on your maps.
For more information on Google Maps Platform, visit our website.
By: Alex Muramoto (Developer Advocate)
Source: Google Cloud Blog
For enquiries, product placements, sponsorships, and collaborations, connect with us at [email protected]. We'd love to hear from you!
Our humans need coffee too! Your support is highly appreciated, thank you!
