Shapes

The NAVER Maps API v3 provides shape overlays that add vector graphics at specified coordinates on a map. Available shapes are listed below.

• Polyline
• Polygon
• Rectangle
• Circle
• Ellipse

Polyline

Polyline is an object that draws a line based on a series of coordinates on a map.

Draw a polyline

Specify a list of coordinates in the path property, which is required. And specify a Map object on which you want to draw a polyline in the map property, or specify a map object with the setMap method.

The following code example creates a Polyline object to draw a polyline on the map.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3700065, 127.121359),
    zoom: 9
});

var polyline = new naver.maps.Polyline({
    map: map,
    path: [
        new naver.maps.LatLng(37.359924641705476, 127.1148204803467),
        new naver.maps.LatLng(37.36343797188166, 127.11486339569092),
        new naver.maps.LatLng(37.368520071054576, 127.11473464965819),
        new naver.maps.LatLng(37.3685882848096, 127.1088123321533),
        new naver.maps.LatLng(37.37295383612657, 127.10876941680907),
        new naver.maps.LatLng(37.38001321351567, 127.11851119995116),
        new naver.maps.LatLng(37.378546827477855, 127.11984157562254),
        new naver.maps.LatLng(37.376637072444105, 127.12052822113036),
        new naver.maps.LatLng(37.37530703574853, 127.12190151214598),
        new naver.maps.LatLng(37.371657839593894, 127.11645126342773),
        new naver.maps.LatLng(37.36855417793982, 127.1207857131958)
    ]
});

Examples: Drawing a polygon and a polyline

Polyline options

You can specify the stroke color, stroke width, stroke style and stroke opacity of a polyline. You can set a PolylineOptions object literal in the constructor when creating a Polyline object, or can dynamically change the style with the setOptions method after creating it. If you set the clickable property of the PolylineOptions object literal to true, you can handle user interactions.

The following code example changes the stroke style by using the setOptions method when a user’s mouse pointer is over or out of the line.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3646656, 127.108828),
    zoom: 10
});

var polyline = new naver.maps.Polyline({
    map: map,
    path: [
        new naver.maps.LatLng(37.365620929135716, 127.1036195755005),
        new naver.maps.LatLng(37.365620929135716, 127.11353302001953),
        new naver.maps.LatLng(37.3606921307849, 127.10452079772949),
        new naver.maps.LatLng(37.36821310838941, 127.10814714431763),
        new naver.maps.LatLng(37.360760351656545, 127.11299657821654),
        new naver.maps.LatLng(37.365620929135716, 127.1036195755005)
    ],
    clickable: true, // Set clickable to true to receive user interactions.
    strokeColor: '#5347AA',
    strokeStyle: 'longdash',
    strokeOpacity: 0.5,
    strokeWeight: 5
});

naver.maps.Event.addListener(polyline, 'mouseover', function() {

    polyline.setOptions({
        strokeColor: '#E51D1A',
        strokeStyle: 'solid',
        strokeOpacity: 1
    });
});

naver.maps.Event.addListener(polyline, 'mouseout', function() {

    polyline.setOptions({
        strokeColor: '#5347AA',
        strokeStyle: 'longdash',
        strokeOpacity: 0.5
    });
});

Examples: Using polyline options

Draw a polyline dynamically

The path property of the Polyline property specifies a list of coordinates. You can specify coordinates as an [Array], but internally, the object stores and manages them in as a KVOArray. So, the path returned by using the getPath method is a KVOArray. KVOArray provides notifications of state changes by raising an event whenever an element in the list is changed. The Polyline object uses this feature of KVOArray to dynamically reflect the status of the path and draw a line.

For more information on KVOArray, refer to KVO State Change Notifications.

The following code example dynamically draws a line based on click points on the map.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3700065, 127.121359),
    zoom: 9
});

var polyline = new naver.maps.Polyline({
    map: map,
    path: [],
    strokeColor: '#5347AA',
    strokeWeight: 2
});

naver.maps.Event.addListener(map, 'click', function(e) {

    var point = e.latlng;

    var path = polyline.getPath();
    path.push(point);

    new naver.maps.Marker({
        map: map,
        position: point
    });
});

Examples: Drawing a polyline based on click points

Polygon

Polygon is an object that draws a closed polygon based on a series of coordinates on a map. Unlike polylines, it has the fill color option. Since a hole or interior ring can be added in a closed polygon, the list of coordinates representing a polyline has the paths property containing several paths.

Draw a polygon

When creating a Polygon object, specify a path composing a polygon in the paths property, which is required. The paths must be a two-dimensional array which can have multiple paths. Specify a Map object on which you want to draw a polygon in the map property, or specify a map object with the setMap method.

The following code example creates a Polygon object to draw a polygon on the map.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3674001, 127.1181196),
    zoom: 9
});

var polygon = new naver.maps.Polygon({
    map: map,
    paths: [
        [
            new naver.maps.LatLng(37.37544345085402, 127.11224555969238),
            new naver.maps.LatLng(37.37230584065902, 127.10791110992432),
            new naver.maps.LatLng(37.35975408751081, 127.10795402526855),
            new naver.maps.LatLng(37.359924641705476, 127.11576461791992),
            new naver.maps.LatLng(37.35931064479073, 127.12211608886719),
            new naver.maps.LatLng(37.36043630196386, 127.12293148040771),
            new naver.maps.LatLng(37.36354029942161, 127.12310314178465),
            new naver.maps.LatLng(37.365211629488016, 127.12456226348876),
            new naver.maps.LatLng(37.37544345085402, 127.11224555969238)
        ]
    ],
    fillColor: '#ff0000',
    fillOpacity: 0.3,
    strokeColor: '#ff0000',
    strokeOpacity: 0.6,
    strokeWeight: 3
});

Examples: Drawing a polygon and a polyline

Polygon options

In common with polylines, you can specify the stoke color, stroke width, stroke style and stroke opacity of a polygon. You can also specify the fill color and fill opacity of a polygon. You can set a PolygonOptions object literal in the constructor when creating a Polygon object, or can dynamically change the style with the setOptions method after creating it. If you set the clickable property of the PolygonOptions object literal to true, you can handle user interactions.

The following code example changes the stroke style by using the setOptions method when a user’s mouse pointer is over or out of the line.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3674001, 127.1181196),
    zoom: 9
});

var polygon = new naver.maps.Polygon({
    map: map,
    paths: [
        [
            new naver.maps.LatLng(37.37544345085402, 127.11224555969238),
            new naver.maps.LatLng(37.37230584065902, 127.10791110992432),
            new naver.maps.LatLng(37.35975408751081, 127.10795402526855),
            new naver.maps.LatLng(37.359924641705476, 127.11576461791992),
            new naver.maps.LatLng(37.35931064479073, 127.12211608886719),
            new naver.maps.LatLng(37.36043630196386, 127.12293148040771),
            new naver.maps.LatLng(37.36354029942161, 127.12310314178465),
            new naver.maps.LatLng(37.365211629488016, 127.12456226348876),
            new naver.maps.LatLng(37.37544345085402, 127.11224555969238)
        ]
    ],
    fillColor: '#ff0000',
    fillOpacity: 0.3,
    strokeColor: '#ff0000',
    strokeOpacity: 0.6,
    strokeWeight: 3,
    clickable: true
});

naver.maps.Event.addListener(polygon, 'mouseover', function() {

    polygon.setOptions({
        strokeColor: '#E51D1A',
        strokeOpacity: 1
    });
});

naver.maps.Event.addListener(polygon, 'mouseout', function() {

    polygon.setOptions({
        strokeColor: '#ff0000',
        strokeOpacity: 0.6
    });
});

Examples: Using polygon options

Draw a polygon with a hole

The paths property of the Polygon object is an array containing multiple paths. The reason why a polygon has the paths property composed of multiple paths is to draw at least one closed polygon or a polygon with a hole. To draw a hole inside of a polygon, the first path specifies a list of coordinates clockwise for the exterior polygon, and the second path specifies a list of coordinates counterclockwise for a hole. The following code example adds a hole in the polygon of the example above.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3674001, 127.1181196),
    zoom: 9
});

var polygon = new naver.maps.Polygon({
    map: map,
    paths: [
        [
            new naver.maps.LatLng(37.37544345085402, 127.11224555969238),
            new naver.maps.LatLng(37.37230584065902, 127.10791110992432),
            new naver.maps.LatLng(37.35975408751081, 127.10795402526855),
            new naver.maps.LatLng(37.359924641705476, 127.11576461791992),
            new naver.maps.LatLng(37.35931064479073, 127.12211608886719),
            new naver.maps.LatLng(37.36043630196386, 127.12293148040771),
            new naver.maps.LatLng(37.36354029942161, 127.12310314178465),
            new naver.maps.LatLng(37.365211629488016, 127.12456226348876),
            new naver.maps.LatLng(37.37544345085402, 127.11224555969238)
        ],
        [
            new naver.maps.LatLng(37.368485964153784, 127.10971355438232),
            new naver.maps.LatLng(37.368520071054576, 127.11464881896971),
            new naver.maps.LatLng(37.36350619025713, 127.11473464965819),
            new naver.maps.LatLng(37.363403862670665, 127.1097993850708),
            new naver.maps.LatLng(37.368485964153784, 127.10971355438232)
        ]
    ],
    fillColor: '#ff0000',
    fillOpacity: 0.3,
    strokeColor: '#ff0000',
    strokeOpacity: 0.6,
    strokeWeight: 3
});

Examples: Drawing a polygon with a hole

Draw a polygon dynamically

The paths of Polygon is a KVOArray object, and the path, an element of the paths, is also a KVOArray composed of coordinates. Therefore, you can use KVOArray to dynamically change the coordinates of a polygon. You can specify coordinates as an [Array] in the paths of PolygonOptions or by using the setPaths method, but internally, the object stores and manages them as a KVOArray. So, the paths returned by using the getPaths method is a KVOArray, and so is an internal path.

For more information on KVOArray, refer to KVO State Change Notifications.

The following code example dynamically draws a polygon based on click points on the map.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3674001, 127.1181196),
    zoom: 9
});

var polygon = new naver.maps.Polygon({
    map: map,
    paths: [[]],
    fillColor: '#ff0000',
    fillOpacity: 0.3,
    strokeColor: '#ff0000',
    strokeOpacity: 0.6,
    strokeWeight: 3,
    clickable: true
});

naver.maps.Event.addListener(map, 'click', function(e) {

    var point = e.latlng;

    var path = polygon.getPaths().getAt(0);
    path.push(point);

    new naver.maps.Marker({
        map: map,
        position: point
    });
});

Examples: Drawing a polygon based on click points

Rectangle

Rectangle is an object that draws a rectangle by defining bounds on a map. Pass a RectangleOptions object literal to a constructor to draw a rectangle. You can specify map bounds in the bounds property, by using a LatLngBounds or PointBounds object. Like a polygon object, a Rectangle object has options to define the stroke and fill styles.

The following code example creates a Rectangle object to draw a rectangle.

var map = new naver.maps.Map('map');

var rectangle = new naver.maps.Rectangle({
    map: map,
    bounds: new naver.maps.LatLngBounds(
        new naver.maps.LatLng(37.565, 126.9761217732253),  // sw
        new naver.maps.LatLng(37.568, 126.980655026774)   // ne
    ),
    strokeColor: '#5347AA',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#E51D1A',
    fillOpacity: 0.6
});

Examples: Drawing a rectangle, a circle and an ellipse

The following code example changes the bounds of the Rectangle whenever the map’s bounds is changed.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3674001, 127.1181196),
    zoom: 9
});

var rectangle = new naver.maps.Rectangle({
    map: map,
    bounds: map.getBounds(),
    strokeColor: 'none',
    fillColor: '#E51D1A',
    fillOpacity: 0.3
});

naver.maps.Event.addListener(map, 'bounds_changed', function() {
    rectangle.setBounds(map.getBounds());
});

Examples: Checking map bounds

Circle

Circle is an object that draws a circle by specifying a center and radius in meters. You can set a center of a circle in the center property and a radius in meters in the radius property by using the CircleOptions object literal, with the stroke and fill styles.

The following code example draws a circle with the radius of 500 m and the center located at Green Factory.

var GREEN_FACTORY = new naver.maps.LatLng(37.3595953, 127.1053971);

var map = new naver.maps.Map('map', {
    center: GREEN_FACTORY,
    zoom: 10
});

var circle = new naver.maps.Circle({

    map: map,
    center: GREEN_FACTORY,
    radius: 500,

    strokeColor: '#5347AA',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: '#E51D1A',
    fillOpacity: 0.3
});

Examples: Drawing a rectangle, a circle and an ellipse

Ellipse

Ellipse is an object that draws an ellipse by defining map bounds. Pass an EllipseOptions object literal to a constructor to draw an ellipse. You can specify map bounds in the bounds property, by using a LatLngBounds or PointBounds object. You can also specify the stroke and fill styles, like other shape overlays.

The following code example creates an Ellipse object to draw an ellipse on the map.

var map = new naver.maps.Map('map');

var ellipse = new naver.maps.Ellipse({
    map: map,
    bounds: new naver.maps.LatLngBounds(
        new naver.maps.LatLng(37.565, 126.9761217732253),  // sw
        new naver.maps.LatLng(37.568, 126.980655026774)   // ne
    ),
    strokeColor: '#5347AA',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#E51D1A',
    fillOpacity: 0.6
});

Examples: Drawing a rectangle, a circle and an ellipse