---
title: PolylineOverlay
framework: mapkitjs
role: symbol
role_heading: Class
path: mapkitjs/polylineoverlay
---

# PolylineOverlay

An overlay of connected line segments that don’t form a closed shape.

## Declaration

```data
class PolylineOverlay extends Overlay
```

## Mentioned in

MapKit JS 5

## Overview

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);

## Topics

### Creating a polyline overlay

- [new PolylineOverlay(points, options)](mapkitjs/polylineoverlay/polylineoverlayconstructor.md)
- [OverlayOptions](mapkitjs/overlayoptions.md)

### Defining the polyline

- [points](mapkitjs/polylineoverlay/points.md)

## Relationships

### Inherits From

- [Overlay](mapkitjs/overlay.md)

## See Also

### Overlays

- [Adding interactivity to overlays](mapkitjs/adding-interactivity-to-overlays.md)
- [Overlay](mapkitjs/overlay.md)
- [Style](mapkitjs/style.md)
- [CircleOverlay](mapkitjs/circleoverlay.md)
- [PolygonOverlay](mapkitjs/polygonoverlay.md)
- [OverlayOptions](mapkitjs/overlayoptions.md)
- [TileOverlay](mapkitjs/tileoverlay.md)
- [TileOverlayUrlTemplate](mapkitjs/tileoverlayurltemplate.md)