New this week, MapKit JS version 5.45 and later supports gradients and animation for polyline overlays.
Gradients can be helpful for conveying additional information along a path, such as elevation or speed changes. To add a gradient to a polyline, first create a mapkit.LineGradient object and add color stops with addColorStop and/or addColorStopAtIndex. Then set lineGradient on the overlay Style class to this object.
To animate a line, use the strokeStart and strokeEnd properties on the overlay Style class. These properties are observable and regulate the start and the end point of the polyline rendering. By updating the properties with a timer loop and your own timing function, you can animate a polyline overlay however you like.
These features are also available in MapKit for a consistent experience in your apps and websites. For more information, see the documentation on MapKit Overlays.
Gradients can be helpful for conveying additional information along a path, such as elevation or speed changes. To add a gradient to a polyline, first create a mapkit.LineGradient object and add color stops with addColorStop and/or addColorStopAtIndex. Then set lineGradient on the overlay Style class to this object.
To animate a line, use the strokeStart and strokeEnd properties on the overlay Style class. These properties are observable and regulate the start and the end point of the polyline rendering. By updating the properties with a timer loop and your own timing function, you can animate a polyline overlay however you like.
These features are also available in MapKit for a consistent experience in your apps and websites. For more information, see the documentation on MapKit Overlays.