PolylineOverlay
An overlay of connected line segments that don’t form a closed shape.
Declaration
class PolylineOverlay extends OverlayMentioned in
Overview
A polyline is a shape that consists of connected line segments that you define with a set of points. The first and last points don’t connect to each other.
The longitude of all points should be within a 360-degree range. Depending on how you specify the longitude, a line between Tokyo and Los Angeles that you create with a PolylineOverlay may take a different route. Specifying a longitude of -118º for Los Angeles and 140º for Tokyo results in a very long line spanning 258º. Specifying a longitude of 242º (that’s, -118 + 360) for Los Angeles and 140º for Tokyo results in a shorter line spanning 98º. MapKit JS may not render the polyline correctly if the range of longitudes is larger than 360º.
All style properties apply to polyline overlays except fillColor, fillOpacity, and fillRule. MapKit JS ignores properties that don’t apply. PolylineOverlay doesn’t implement methods of its own. For more information, see the base object, Overlay.
The following example shows a polyline object for a map.
const points = [ [10, 1], [5, 6], [1, 1] ];
const coords = points.map(function(point) {
return new mapkit.Coordinate(point[0], point[1]);
});
const style = new mapkit.Style({
lineWidth: 2,
lineJoin: "round",
lineDash: [8, 4],
strokeColor: "#F0F"
});
const polyline = new mapkit.PolylineOverlay(coords, { style: style });
map.addOverlay(polyline);