SebmGoogleMapPolygon - TypeScript

SebmGoogleMapPolygon renders a polygon on a SebmGoogleMap

Example

import { Component } from '@angular/core';
import { SebmGoogleMap, SebmGooglePolygon, LatLngLiteral } from 'angular2-maps/core';

@Component({
 selector: 'my-map-cmp',
 styles: [`
   .semb-map-container {
     height: 300px;
   }
`],
 template: `
   <semb-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
     <semb-map-polygon [paths]="paths">
     </semb-map-polygon>
   </semb-map>
 `
})
export class MyMapCmp {
  lat: number = 0;
  lng: number = 0;
  zoom: number = 10;
  paths: Array<LatLngLiteral> = [
    { lat: 0,  lng: 10 },
    { lat: 0,  lng: 20 },
    { lat: 10, lng: 20 },
    { lat: 10, lng: 10 },
    { lat: 0,  lng: 10 }
  ]
  // Nesting paths will create a hole where they overlap;
  nestedPaths: Array<Array<LatLngLiteral>> = [[
    { lat: 0,  lng: 10 },
    { lat: 0,  lng: 20 },
    { lat: 10, lng: 20 },
    { lat: 10, lng: 10 },
    { lat: 0,  lng: 10 }
  ], [
    { lat: 0, lng: 15 },
    { lat: 0, lng: 20 },
    { lat: 5, lng: 20 },
    { lat: 5, lng: 15 },
    { lat: 0, lng: 15 }
  ]]
}

Selectors

  • sebm-map-polygon

Inputs

  • clickable bound to SebmGoogleMapPolygon.clickable

    Indicates whether this Polygon handles mouse events. Defaults to true.

  • polyDraggable bound to SebmGoogleMapPolygon.draggable

    If set to true, the user can drag this shape over the map. The geodesic

    defines the mode of dragging. Defaults to false.
  • editable bound to SebmGoogleMapPolygon.editable

    If set to true, the user can edit this shape by dragging the control

    shown at the vertices and on each segment. Defaults to false.
  • fillColor bound to SebmGoogleMapPolygon.fillColor

    The fill color. All CSS3 colors are supported except for extended

    colors.
  • fillOpacity bound to SebmGoogleMapPolygon.fillOpacity

    The fill opacity between 0.0 and 1.0

  • geodesic bound to SebmGoogleMapPolygon.geodesic

    When true, edges of the polygon are interpreted as geodesic and will

    the curvature of the Earth. When false, edges of the polygon areas straight lines in screen space. Note that the shape of apolygon may appear to change when dragged, as the dimensionsmaintained relative to the surface of the earth. Defaults to false.
  • paths bound to SebmGoogleMapPolygon.paths

    The ordered sequence of coordinates that designates a closed loop.

    polylines, a polygon may consist of one or more paths.a result, the paths property may specify one or more arrays ofcoordinates. Paths are closed automatically; do not repeat thevertex of the path as the last vertex. Simple polygons may beusing a single array of LatLngs. More complex polygons mayan array of arrays. Any simple arrays are converted into Arrays.or removing LatLngs from the Array will automatically updatepolygon on the map.
  • strokeColor bound to SebmGoogleMapPolygon.strokeColor

    The stroke color. All CSS3 colors are supported except for extended

    colors.
  • strokeOpacity bound to SebmGoogleMapPolygon.strokeOpacity

    The stroke opacity between 0.0 and 1.0

  • strokeWeight bound to SebmGoogleMapPolygon.strokeWeight

    The stroke width in pixels.

  • visible bound to SebmGoogleMapPolygon.visible

    Whether this polygon is visible on the map. Defaults to true.

  • zIndex bound to SebmGoogleMapPolygon.zIndex

    The zIndex compared to other polys.

Outputs

  • polyClick bound to SebmGoogleMapPolygon.polyClick

    This event is fired when the DOM click event is fired on the Polygon.

  • polyDblClick bound to SebmGoogleMapPolygon.polyDblClick

    This event is fired when the DOM dblclick event is fired on the Polygon.

  • polyDrag bound to SebmGoogleMapPolygon.polyDrag

    This event is repeatedly fired while the user drags the polygon.

  • polyDragEnd bound to SebmGoogleMapPolygon.polyDragEnd

    This event is fired when the user stops dragging the polygon.

  • polyMouseDown bound to SebmGoogleMapPolygon.polyMouseDown

    This event is fired when the DOM mousedown event is fired on the Polygon.

  • polyMouseMove bound to SebmGoogleMapPolygon.polyMouseMove

    This event is fired when the DOM mousemove event is fired on the Polygon.

  • polyMouseOut bound to SebmGoogleMapPolygon.polyMouseOut

    This event is fired on Polygon mouseout.

  • polyMouseOver bound to SebmGoogleMapPolygon.polyMouseOver

    This event is fired on Polygon mouseover.

  • polyMouseUp bound to SebmGoogleMapPolygon.polyMouseUp

    This event is fired whe the DOM mouseup event is fired on the Polygon

  • polyRightClick bound to SebmGoogleMapPolygon.polyRightClick

    This even is fired when the Polygon is right-clicked on.

Constructor

  • constructor(_polygonManager: PolygonManager)

    Not Yet Documented

Members

  • clickable : boolean
    

    Indicates whether this Polygon handles mouse events. Defaults to true.

  • draggable : boolean
    

    If set to true, the user can drag this shape over the map. The geodesic property defines the mode of dragging. Defaults to false.

  • editable : boolean
    

    If set to true, the user can edit this shape by dragging the control points shown at the vertices and on each segment. Defaults to false.

  • fillColor : string
    

    The fill color. All CSS3 colors are supported except for extended named colors.

  • fillOpacity : number
    

    The fill opacity between 0.0 and 1.0

  • geodesic : boolean
    

    When true, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When false, edges of the polygon are rendered as straight lines in screen space. Note that the shape of a geodesic polygon may appear to change when dragged, as the dimensions are maintained relative to the surface of the earth. Defaults to false.

  • paths : Array<LatLng|LatLngLiteral>|Array<Array<LatLng|LatLngLiteral>>
    

    The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths. As a result, the paths property may specify one or more arrays of LatLng coordinates. Paths are closed automatically; do not repeat the first vertex of the path as the last vertex. Simple polygons may be defined using a single array of LatLngs. More complex polygons may specify an array of arrays. Any simple arrays are converted into Arrays. Inserting or removing LatLngs from the Array will automatically update the polygon on the map.

  • strokeColor : string
    

    The stroke color. All CSS3 colors are supported except for extended named colors.

  • strokeOpacity : number
    

    The stroke opacity between 0.0 and 1.0

  • strokeWeight : number
    

    The stroke width in pixels.

  • visible : boolean
    

    Whether this polygon is visible on the map. Defaults to true.

  • zIndex : number
    

    The zIndex compared to other polys.

  • polyClick : EventEmitter<PolyMouseEvent>
    

    This event is fired when the DOM click event is fired on the Polygon.

  • polyDblClick : EventEmitter<PolyMouseEvent>
    

    This event is fired when the DOM dblclick event is fired on the Polygon.

  • polyDrag : EventEmitter<MouseEvent>
    

    This event is repeatedly fired while the user drags the polygon.

  • polyDragEnd : EventEmitter<MouseEvent>
    

    This event is fired when the user stops dragging the polygon.

  • polyDragStart : EventEmitter<MouseEvent>
    

    This event is fired when the user starts dragging the polygon.

  • polyMouseDown : EventEmitter<PolyMouseEvent>
    

    This event is fired when the DOM mousedown event is fired on the Polygon.

  • polyMouseMove : EventEmitter<PolyMouseEvent>
    

    This event is fired when the DOM mousemove event is fired on the Polygon.

  • polyMouseOut : EventEmitter<PolyMouseEvent>
    

    This event is fired on Polygon mouseout.

  • polyMouseOver : EventEmitter<PolyMouseEvent>
    

    This event is fired on Polygon mouseover.

  • polyMouseUp : EventEmitter<PolyMouseEvent>
    

    This event is fired whe the DOM mouseup event is fired on the Polygon

  • polyRightClick : EventEmitter<PolyMouseEvent>
    

    This even is fired when the Polygon is right-clicked on.

  • ngOnChanges(changes: SimpleChanges) : any
    

    Not Yet Documented


exported from core/index defined in core/directives/google-map-polygon.ts (line 5)