README.md

💚 This is the latest document.

Polyline class

This class extends BaseClass.

Contents

• Overview
  • Create one polyline
  • Click event
  • Update the polyline
  • Assign your data
• API Reference

---

Overview

Create one polyline

The map.addPolyline() method draws one polyline onto the map.

var HND_AIR_PORT = {lat: 35.548852, lng: 139.784086};
var SFO_AIR_PORT = {lat: 37.615223, lng: -122.389979};
var HNL_AIR_PORT = {lat: 21.324513, lng: -157.925074};
var AIR_PORTS = [
  HND_AIR_PORT,
  HNL_AIR_PORT,
  SFO_AIR_PORT
];

var mapDiv = document.getElementById("map_canvas");

// Create a map with specified camera bounds
var map = plugin.google.maps.Map.getMap(mapDiv, {
  camera: {
    target: AIR_PORTS
  }
});

// Add a polyline
map.addPolyline({
  'points': AIR_PORTS,
  'color' : '#AA00FF',
  'width': 10,
  'geodesic': true
});

---

Click event

The POLYLINE_CLICK event is fired when you tap on the polyline with clicked position (LatLng object);

// Add a polyline
var polyline = map.addPolyline({
  points: AIR_PORTS,
  'color' : '#AA00FF',
  'width': 10,
  'geodesic': true,
  'clickable': true // default = false
});

// Catch the POLYLINE_CLICK event
polyline.on(plugin.google.maps.event.POLYLINE_CLICK, function(latLng) {

  var marker = map.addMarker({
    position: latLng,
    title: "You clicked on the polyline",
    snippet: latLng.toUrlValue(),
    disableAutoPan: true
  });
  marker.showInfoWindow();

});

---

Update the polyline

The getPoints() method returns an instance of BaseArrayClass. If you change the element value of it, the polyline is also updated automatically. Also if you add new element, or remove one of them, the polyline is also updated.

// Add a polyline
var polyline = map.addPolyline({
  'points': points,
  'color' : '#AA00FF',
  'width': 10,
  'geodesic': true
});


// polyline.getPoints() returns an instance of BaseArrayClass.
var mvcArray = polyline.getPoints();

// Add draggable markers
points.forEach(function(point, idx) {
  var marker = map.addMarker({
    position: latLng,
    draggable: true
  });

  // If a marker is dragged, set the position of it to the points of the Polygon.
  marker.on(plugin.google.maps.event.MARKER_DRAG, function(position) {
    mvcArray.setAt(idx, position);
  });
});

---

Assign your data

Since Polyline class extends BaseClass, you can assign your data.

const HND_AIR_PORT = {"lat": 35.548852, "lng": 139.784086};
const SFO_AIR_PORT = {"lat": 37.615223, "lng": -122.389979};
const HNL_AIR_PORT = {"lat": 21.332898, "lng": -157.921418};

//---------------------------------
// [Model]
//    Create one polyline
//---------------------------------
var polyline = map.addPolyline({
  'points': [
    HND_AIR_PORT,
    HNL_AIR_PORT,
    SFO_AIR_PORT
  ],
  'color' : "red",
  'width': 10,
  'geodesic': true,
  'idx': 0
});

//---------------------------------
// [Control]
//    Increment the idx field.
//    If the value is grater than 3,
//    reset to 0.
//---------------------------------
polyline.on(plugin.google.maps.event.POLYLINE_CLICK, function() {
  var idx = this.get("idx");
  idx = idx + 1;
  this.set("idx", idx > 3 ? 0 : idx);
});

//---------------------------------
// [View]
//    Update the polyline color
//    based on the idx field.
//---------------------------------
polyline.on("idx_changed", function() {
  var idx = this.get("idx");
  this.setColor(["green", "blue", "orange", "red"][idx]);
});

---

API Reference

Create

map.addPolyline()	Add a polyline.

Methods

setPoints()	Changes the polyline points.
getPoints()	Returns an instance of the [BaseArrayClass](../../BaseArrayClass/index/README.md). You can modify the points.
setGeodesic()	When true, edges of the polyline are interpreted as geodesic and will follow the curvature of the Earth.
getGeodesic()	Returns true if the polyline is geodesic.
setVisible()	Changes visibility of the polyline.
getVisible()	Returns true if the polyline is visible.
setClickable()	Changes click-ability of the polyline.
getClickable()	Returns true if the polyline is clickable.
setStrokeColor()	Changes the polyline color.
getStrokeColor()	Returns the current polyline color.
setStrokeWidth()	Changes the polyline stroke width.
getStrokeWidth()	Returns the current stroke width (unit: pixel).
setZIndex()	Changes the polyline zIndex order.
getZIndex()	Returns the current polyline zIndex.
remove()	Removes the polyline.
getMap()	Returns the map reference.

Events

POLYLINE_CLICK	Arguments: LatLng This event is fired when you click on the polyline.