var geom1 = new longdo.Polyline([
  { lon: -45, lat: -45 },
  { lon: 105, lat: 15 }
]);
map.Overlays.add(geom1);

• Polyline(): This function is used to construct the straight line passing an array of coordinate of the line that you would like to construct to this function

var geom2 = new longdo.Polygon([
  { lon: 99, lat: 14 },
  { lon: 100, lat: 13 },
  { lon: 102, lat: 13 },
  { lon: 103, lat: 14 }
], {
  title: 'Geom 2',
  detail: '-',
  label: 'Trapezoid'
});

• Polygon(): This function is used to construct the polygon passing an array of coordinate of the corner that you would like to construct to this function
• title: Message that will appear on the header of the popup
• detail: Message that will appear on the detail of the popup
• label: Message that will appear on the map

var geom3 = new longdo.Circle({
  lon: 101, lat: 15
}, 1, {
  title: 'Geom 3',
  detail: '-',
  lineWidth: 10,
  lineColor: 'rgba(0, 255, 0, 0.8)',
  fillColor: 'rgba(0, 255, 0, 0.4)',
  visibleRange: { min: 7, max: 8 },
  editable: true
});

• Circle(): This function is used to construct the circle passing a center of circle
• lineWidth: Width of line
• lineColor: Color of line
• fillColor: Fill color (can't use with dashed line)
• visibleRange: Visible range
• editable: Can drag node to change geometry's shape

var geom4 = new longdo.Polycurve([
  { lon: 98, lat: 15 },
  { lon: 99, lat: 16 },
  { lon: 99, lat: 14 },
  { lon: 100, lat: 15 }
], {
  weight: longdo.OverlayWeight.Top
});

• Polycurve(): This function is used to construct the polycurve passing an array of coordinate of the cubic bezier that you would like to construct to this function
• weight: If set an object with longdo.OverlayWeight.Top, the object will be on top of the layer.

var geom5 = new longdo.Dot({
  lon: 100.5, lat: 12.5
}, {
  lineWidth: 20,
  draggable: true
});

• Dot(): This function is used to construct the dot passing a dot
• lineWidth: Width of line
• draggable: The overlay can be dragged

var geom6 = new longdo.Polyline([
  { lon: 100.9, lat: 16.3 },
  { lon: 102.7, lat: 15.2 },
  { lon: 104, lat: 17 }
], {
  lineStyle: longdo.LineStyle.Dashed,
  pointer: true
});

• lineStyle: If set an object with longdo.LineStyle.Dashed, the object will be dashed line.
• pointer: Show pointer when move mouse over the line

var geom7 = new longdo.Polygon([
  { lon: 101, lat: 15 },
  { lon: 105, lat: 15 },
  { lon: 103, lat: 12 },
  null,
  { lon: 103, lat: 14.9 },
  { lon: 102.1, lat: 13.5 },
  { lon: 103.9, lat: 13.5 }
], {
  label: true,
  clickable: true
});

• label: Show label at pivot
• clickable: Fire click event even if has no popup

var geom8 = new longdo.Rectangle({
  lon: 97, lat: 17
}, {
  width: 2, height: 1
}, {
  editable: true
});

• Rectangle(): This function is used to construct a rectangle and its parameters are a top-left point and size of the specific area

map.Overlays.add(geom1);

map.Overlays.remove(geom1);

map.Overlays.clear();