Module Exc-Map-V2

Content

• ExcMapV2Module

Components

• exg-map

Components and directives for use in content of exg-map

• exg-map-bicycling-layer
• exg-map-circle
• exg-map-data-layer
• exg-map-drawing-manager
• exg-map-info-window
• exg-map-kml-layer
• exg-map-marker
• exg-map-marker-cluster
• exg-map-polygon
• exg-map-polyline
• exg-map-icon-sequence
• exg-map-polyline-point
• exg-map-rectangle
• exg-map-transit-layer
• exg-map-heatmap-layer

Dependencies

• @types/google.maps: "^3.58.1",
• @googlemaps/markerclustererplus: "^1.2.10"

Install

To install ExcMapV2Module into your project use

npm i exc-map-v2

Prepare

1. app.module Add the following information to import-section of file.

ExcMapV2Module.forRoot({
  apiKey: '--Your API Key--',
  libraries: ['drawing', 'visualization', 'places']
})

2. angular.json Add the following information to projects/YOURPROJECTNAME/architect/build/assets array.

{
  "input" : "./node_modules/@googlemaps/markerclustererplus/images",
  "glob"  : "*",
  "output": "/images"
}

3. tsconfig.app.json Add the following information to compilerOptions/types array

    "types": ["google.maps"]

Index

exg-map

classes

| classname | description | |------------|--------------------------------------------------------------------------------------------------------------| | hidelogo | hides google logo on map. (Please be sure there is at least one logo visible on page) | | hideprints | hides usage terms on map. (Please be sure there is at least on usage terms section is visible on page) |

Example

Add a map and center it after loading to given latitude and longitude

<exg-map [latitude]="50" [longitude]="9"></exg-map>

Definitions

Inputs

| name | type | default | description | |------------------------|----------------------------------------------------------------------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------| | longitude | number | 0 | Longitude for centering map | | latitude | number | 0 | Latitude for centering map | | zoom | number | 8 | Zoom-level for map | | minZoom | number | undefined | Minimum allowed zoom level | | maxZoom | number | undefined | Maximum allowed zoom level | | controlSize | number | undefined | Control size in pixel | | mapDraggable | boolean | true | flag if map is draggable | | disableDoubleClickZoom | boolean | false | flag if zoom on double-click is disabled | | disableDefaultUI | boolean | false | flag if default UI is disabled | | scrollwheel | boolean | true | flag if zoom by scrollwheel is enabled | | backgroundColor | string | undefined | backgroundColor of map | | draggableCursor | string | undefined | name or url of cursor to display when mousing over draggable map. Uses style attribute [draggableCursor]="'url(http://www.example.com/icon.png), auto;'" | | draggingCursor | string | undefined | name or url of cursor to display when the map is beeing dragged. Uses style attribute [draggingCursor]="'url(http://www.example.com/icon.png), auto;'" | | keyboardShortcuts; | boolean | true | flag if keyboard shortcuts are enabled | | | styles | google.maps.MapTypeStyle[] | [] | Styles to apply to each of the default map types. Note that for Satellite/Hybrid and Terrainmodes, these styles will only apply to labels and geometry. | | usePanning | boolean | false | When true and the latitude and/or longitude values changes, the Google Maps panTo method is used to center the map. | | fitBounds | boolean google.maps.LatLngBoundsLiteralgoogle.maps.LatLngBounds | false | Sets the viewport to contain the given bounds. If true, the bounds get automatically computed from all elements using service for fit bounds. | | fitBoundsPadding | number google.maps.Padding | undefined | Padding amount for the bounds. | | mapTypeId | keyof typeof google.maps.MapTypeId | 'ROADMAP' | Type of map. Possible values: 'ROADMAP','SATELLITE','HYBRID','TERRAIN' | | clickableIcons | boolean | true | flag if icons on map are clickable | | showDefaultInfoWindow | boolean | true | When map icons are clickable by default, an info window is displayed. | | gestureHandling | google.maps.GestureHandlingOptions | 'auto' | This setting controls how gestures on the map are handled. Possible values: 'cooperative','greedy','none','auto' | | tilt | number | 0 | Possible values: 0, 45 | | restriction | google.maps.MapRestriction | undefined | Options for restricting the bounds of the map.User cannot pan or zoom away from restricted area. |

Outputs

| name | $event type | description | |-----------------|----------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------| | mapClick | google.maps.MapMouseEvent google.maps.IconMouseEvent | This event emitter gets emitted when the user clicks on the map (but not when they click on amarker or infoWindow). | | mapRightClick | google.maps.MapMouseEvent | This event emitter gets emitted when the user right-clicks on the map (but not when they clickon a marker or infoWindow). | | mapDblClick | google.maps.MapMouseEvent | This event emitter gets emitted when the user double-clicks on the map (but not when they clickon a marker or infoWindow). | | centerChange | google.maps.LatLngLiteral | This event emitter is fired when the map center changes. | | boundsChange | google.maps.LatLngBounds | This event is fired when the viewport bounds have changed. | | mapTypeIdChange | google.maps.MapTypeId | This event is fired when the mapTypeId property changes. | | idle | void | This event is fired when the map becomes idle after panning or zooming. | | zoomChange | number | This event is fired when the zoom level has changed. | | mapReady | any | This event is fired when the google map is fully initialized. map instance as result | | tilesLoaded | void | This event is fired when the visible tiles have finished loading. |

Controls

• exg-map-fullscreen-control
• exg-map-type-control
• exg-map-pan-control
• exg-map-rotate-control
• exg-map-scale-control
• exg-map-street-view-control
• exg-map-zoom-control

Example

Show fullscreen control and map-type control on map. Only if disableDefaultUI is set to true

<exg-map [latitude]="50" [longitude]="9">
  <exg-map-fullscreen-control></exg-map-fullscreen-control>
  <exg-map-type-control></exg-map-type-control>
</exg-map>

Index

exg-map-bicycling-layer

Example

Adds a bicycling layer to the map

<exg-map [latitude]="50" [longitude]="9">
  <exg-map-bicycling-layer></exg-map-bicycling-layer>
</exg-map>

Index

exg-map-circle

example

Adds a circle to the map

<exg-map [latitude]="50" [longitude]="9">
  <exg-map-circle [latitude]="50" [longitude]="9" [radius]="500"></exg-map-circle>
</exg-map>

Definitions

Inputs

| name | type | default | description | |-----------------|-----------------------------------------|-----------|--------------------------------------------------------------------------------------------| | latitude | number | undefined | (required) Latitude position of circle | | longitude | number | undefined | (required) Longitude position of circle | | radius | number | undefined | (required) Radius in meters on earth surface of the circle | | clickable | boolean | true | flag if circle is clickable and handles mouse events | | circleDraggable | boolean | false | flag if circle is draggable. | | editable | boolean | false | flag if circle is editable. | | fillColor | string | undefined | fill color of the circle (All CSS3 colors are supported except for extended named colors.) | | fillOpacity | number | undefined | fill opacity between 0.0 and 1.0 | | strokeColor | string | undefined | fill color of the circle (All CSS3 colors are supported except for extended named colors.) | | strokeOpacity | number | undefined | stroke opacity between 0.0 and 1.0 | | strokePosition | keyof typeof google.maps.StrokePosition | 'CENTER' | Position of stroke. Possible values: 'CENTER','INSIDE','OUTSIDE' | | strokeWeight | number | 0 | The stroke width in pixels. | | visible | boolean | true | Visibility indicator | | zIndex | number | undefined | zIndex compared to other polys |

Outputs

| name | $event type | description | |----------------|---------------------------|--------------------------------------------------------------------------| | centerChange | google.maps.LatLngLiteral | This event is fired when the circle's center is changed. | | circleClick | google.maps.MapMouseEvent | This event emitter gets emitted when the user clicks on the circle. | | circleDblClick | google.maps.MapMouseEvent | This event emitter gets emitted when the user clicks on the circle. | | drag | google.maps.MapMouseEvent | This event is repeatedly fired while the user drags the circle. | | dragEnd | google.maps.MapMouseEvent | This event is fired when the user stops dragging the circle. | | dragStart | google.maps.MapMouseEvent | This event is fired when the user starts dragging the circle. | | mouseDown | google.maps.MapMouseEvent | This event is fired when the DOM mousedown event is fired on the circle. | | mouseMove | google.maps.MapMouseEvent | This event is fired when the DOM mousemove event is fired on the circle. | | mouseOut | google.maps.MapMouseEvent | This event is fired on circle mouseout. | | mouseOver | google.maps.MapMouseEvent | This event is fired on circle mouseover. | | mouseUp | google.maps.MapMouseEvent | This event is fired when the DOM mouseup event is fired on the circle. | | radiusChange | number | This event is fired when the circle's radius is changed. | | rightClick | google.maps.MapMouseEvent | This event is fired when the circle is right-clicked on. |

Index

exg-map-data-layer

example

Adds a data-layer to the map

<exg-map [latitude]="50" [longitude]="9">
  <exg-map-data-layer [geoJson]="geoJsonObject" [style]="styleFunc"></exg-map-data-layer>
</exg-map>

geoJsonObject: any = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        letter: 'G',
        color: 'blue',
        rank: '7',
        ascii: '71'
      },
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      type: 'Feature',
      properties: {
        letter: 'o',
        color: 'red',
        rank: '15',
        ascii: '111'
      },
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      type: 'Feature',
      properties: {
        letter: 'o',
        color: 'yellow',
        rank: '15',
        ascii: '111'
      },
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      type: 'Feature',
      properties: {
        letter: 'g',
        color: 'blue',
        rank: '7',
        ascii: '103'
      },
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      type: 'Feature',
      properties: {
        letter: 'l',
        color: 'green',
        rank: '12',
        ascii: '108'
      },
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [140.14, -21.04], [140.31, -29.42], [141.67, -29.49], [141.59, -20.92], [140.14, -21.04]
          ]
        ]
      }
    },
    {
      type: 'Feature',
      properties: {
        letter: 'e',
        color: 'red',
        rank: '5',
        ascii: '101'
      },
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
};
styleFunc(feature
:
any
):
any
{
  return ({
    clickable: false,
    fillColor: feature.getProperty('color'),
    strokeWeight: 1
  });
}

Definitions

Inputs

| name | type | default | description | |---------|--------------------------------------------------------------------|-----------|----------------------------------------| | geoJson | objectstring | null | (required) The geoJson to be displayed | | style | (param: google.maps.Data.Feature) => google.maps.Data.StyleOptions | undefined | The layer's style function. |

Outputs

| name | $event type | description | |------------|-----------------------------|-------------------------------------------------------------| | layerClick | google.maps.Data.MouseEvent | This event is fired when a feature in the layer is clicked. |

Index

exg-map-drawing-manager

example

Adds the drawing functionality to the map. Requires 'drawing' library of google maps api

<exg-map [latitude]="50" [longitude]="9" [exgMapDrawingManager]="drawing">
  <exg-map-drawing-manager #drawing="exgMapDrawingManager"></exg-map-drawing-manager>
</exg-map>

Definitions

Inputs

| name | type | default | description | |-----------------------|-------------------------------------------|-----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | drawingControl | boolean | true | The enabled/disabled state of the drawing control | | drawingMode | google.maps.drawing.OverlayType | null | The DrawingManager's drawing mode, which defines the type of overlay to beadded on the map. A drawing mode of null means that the user can interactwith the map as normal, and clicks do not draw anything. Possible values: 'CIRCLE','MARKER','POLYGON','POLYLINE','RECTANGLE' | | drawingControlOptions | google.maps.drawing.DrawingControlOptions | undefined | The display options for the drawing control | | circleOptions | google.maps.CircleOptions | undefined | Options to apply to any new circles created with this DrawingManager.The center and radius properties are ignored, and the map property of anew circle is always set to the DrawingManager's map. | | markerOptions | google.maps.MarkerOptions | undefined | Options to apply to any new markers created with this DrawingManager.The position property is ignored, and the map property of a new markeris always set to the DrawingManager's map. | | polygonOptions | google.maps.PolygonOptions | undefined | Options to apply to any new polygons created with this DrawingManager.The paths property is ignored, and the map property of a new polygon isalways set to the DrawingManager's map. | | polylineOptions | google.maps.PolylineOptions | undefined | Options to apply to any new polylines created with this DrawingManager.The path property is ignored, and the map property of a new polyline isalways set to the DrawingManager's map. | | rectangleOptions | google.maps.RectangleOptions | undefined | Options to apply to any new rectangles created with this DrawingManager.The bounds property is ignored, and the map property of a new rectangleis always set to the DrawingManager's map.|

Outputs

| name | $event type | description | |-------------------|------------------------------------------|-------------------------------------------------------------------------------| | circleComplete | google.maps.Circle | This event is fired when the user has finished drawing a circle. | | markerComplete | google.maps.Marker | This event is fired when the user has finished drawing a marker. | | overlayComplete | google.maps.drawing.OverlayCompleteEvent | This event is fired when the user has finished drawing an overlay of anytype. | | polygonComplete | google.maps.Polygon | This event is fired when the user has finished drawing a polygon. | | polylineComplete | google.maps.Polyline | This event is fired when the user has finished drawing a polyline. | | rectangleComplete | google.maps.Rectangle | This event is fired when the user has finished drawing a rectangle. |

Index

exg-map-info-window

example

Adds an info-window to the map.

<exg-map [latitude]="50" [longitude]="9">
  <exg-map-info-window [latitude]="50" [longitude]="9" [isOpen]="true">
    <h3>Headline</h3>
    <div class="typo-small">Text</div>
  </exg-map-info-window>
</exg-map>

Adds an info-window to the map for a marker.

<exg-map [latitude]="50" [longitude]="9">
  <exg-map-marker [label]="'L'" [latitude]="50" [longitude]="9">
    <exg-map-info-window>
      <h3>Headline</h3>
      <div class="typo-small">Text</div>
    </exg-map-info-window>
  </exg-map-marker>
</exg-map>

Definitions

Inputs

| name | type | default | description | |----------------|---------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | latitude | number | undefined | The latitude position of the info window (only usefull if you use it ouside of a ExgMapMarkerDirective). | | longitude | number | undefined | The longitude position of the info window (only usefull if you use it ouside of a ExgMapMarkerDirective). | | disableAutoPan | boolean | undefined | Disable auto-pan on open. By default, the info window will pan the map so that it is fullyvisible when it opens. | | zIndex | number | undefined | All InfoWindows are displayed on the map in order of their zIndex, with higher valuesdisplaying in front of InfoWindows with lower values. By default, InfoWindows are displayedaccording to their latitude, with InfoWindows of lower latitudes appearing in front ofInfoWindows at higher latitudes. InfoWindows are always displayed in front of markers. | | maxWidth | number | undefined | Maximum width of the infowindow, regardless of content's width. This value is only consideredif it is set before a call to open. To change the maximum width when changing content, callclose, update maxWidth, and then open. | | isOpen | boolean | false | Sets the open state for the InfoWindow. You can also call the open() and close() methods. | | exclusive | boolean | false | Sets exclusive mode for info-window. If true, alle other info-windows on map will be closed on open exclusive info-window | | togglemode | boolean | false | Activats togglemode. Second click on i.e. a marker closes info-window. |

Index

exg-map-kml-layer

example

Adds a KML Layer to the map.

<exg-map [latitude]="50" [longitude]="9">
  <exg-map-kml-layer [url]="'https://....'"></exg-map-kml-layer>
</exg-map>

Definitions

Inputs

| name | type | default | description | |---------------------|----------------------------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | clickable | boolean | true | If true, the layer receives mouse events. Default value is true. | | preserveViewport | boolean | false | By default, the input map is centered and zoomed to the bounding box of the contents of thelayer.If this option is set to true, the viewport is left unchanged, unless the map's center and zoomwere never set. | | screenOverlays | boolean | true | Whether to render the screen overlays. Default true. | | suppressInfoWindows | google.maps.CircleOptions | false | Suppress the rendering of info windows when layer features are clicked. | | url | google.maps.MarkerOptions | string | The URL of the KML document to display. | | zIndex | google.maps.PolygonOptions | number | The z-index of the layer. |

Outputs

| name | $event type | description | |-----------------------|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------| | layerClick | google.maps.KmlMouseEvent | This event is fired when a feature in the layer is clicked. | | defaultViewportChange | void | This event is fired when the KML layers default viewport has changed. | | statusChange | void | This event is fired when the KML layer has finished loading.At this point it is safe to read the status property to determine if the layer loadedsuccessfully. |

Index

exg-map-marker

example

Adds a marker to the map.

<exg-map [latitude]="50" [longitude]="9">
  <exg-map-marker [label]="'L'" [latitude]="50" [longitude]="9"></exg-map-marker>
</exg-map>

Definitions

Inputs

| name | type | default | description | |-----------------|----------------------------------------------------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | latitude | number | undefined | The latitude position of the marker. | | longitude | number | undefined | The longitude position of the marker. | | title | string | undefined | The title of the marker. | | label | string google.maps.MarkerLabel | undefined | The label (a single uppercase character) for the marker. | | markerDraggable | boolean | false | If true, the marker can be dragged. Default value is false. | | iconUrl | string google.maps.Icon google.maps.Symbol | undefined | Icon (the URL of the image) for the foreground. | | visible | boolean | true | If true, the marker is visible | | openInfoWindow | boolean | true | Whether to automatically open the child info window when the marker is clicked. | | opacity | number | 1 | The marker's opacity between 0.0 and 1.0. | | zIndex | number | 1 | All markers are displayed on the map in order of their zIndex, with higher values displaying infront of markers with lower values. By default, markers are displayed according to theirvertical position on screen, with lower markers appearing in front of markers further up thescreen. | | markerClickable | boolean | true | If true, the marker can be clicked. Default value is true. | | animation | keyof typeof google.maps.Animation | undefined | Which animation to play when marker is added to a map.This can be 'BOUNCE' or 'DROP' undefined stops animation | | | | | | | | | | |

Outputs

| name | $event type | description | |------------------|------------------------------------|---------------------------------------------------------------------------| | animationChange | keyof typeof google.maps.Animation | This event is fired when the marker's animation property changes. | | markerClick | ExgMapMarkerDirective | This event emitter gets emitted when the user clicks on the marker. | | markerDblClick | ExgMapMarkerDirective | This event emitter gets emitted when the user clicks twice on the marker. | | markerRightClick | void null | This event is fired when the user rightclicks on the marker. | | dragStart | google.maps.MapMouseEvent | This event is fired when the user starts dragging the marker. | | drag | google.maps.MapMouseEvent | This event is repeatedly fired while the user drags the marker. | | dragEnd | google.maps.MapMouseEvent | This event is fired when the user stops dragging the marker. | | mouseOver | google.maps.MapMouseEvent | This event is fired when the user mouses over the marker. | | mouseOut | google.maps.MapMouseEvent | This event is fired when the user mouses outside the marker. |

Index

exg-map-marker-cluster

example

Adds a marker-cluster to the map. Clusters near markers

<exg-map [latitude]="50" [longitude]="9">
  <exg-map-marker-cluster>
    <exg-map-marker [label]="'L'" [latitude]="50" [longitude]="9"></exg-map-marker>
    <exg-map-marker [label]="'M'" [latitude]="50" [longitude]="9"></exg-map-marker>
    <exg-map-marker [label]="'N'" [latitude]="50" [longitude]="9"></exg-map-marker>
    <exg-map-marker [label]="'O'" [latitude]="50" [longitude]="9"></exg-map-marker>
    <exg-map-marker [label]="'P'" [latitude]="50" [longitude]="9"></exg-map-marker>
  </exg-map-marker-cluster>
</exg-map>

Definitions

Inputs

| name | type | default | description | |--------------------|--------------------|----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | gridSize | number | undefined | The grid size of a cluster in pixels | | maxZoom | number | undefined | The maximum zoom level that a marker can be part of a cluster. | | zoomOnClick | boolean | undefined | Whether the default behaviour of clicking on a cluster is to zoom into it. | | averageCenter | boolean | undefined | Whether the center of each cluster should be the average of all markers in the cluster. | | minimumClusterSize | number | undefined | The minimum number of markers to be in a cluster before the markers are hidden and a count is shown. | | styles | ClusterIconStyle[] | undefined | An object that has style properties. | | calculator | Calculator | undefined | A function that calculates the cluster style and text based on the markers in the cluster. | | imagePath | string | undefined | path to image files for cluster | | imageExtension | string | undefined | extension for image files of cluster | | clusterClass | string | 'cluster' | The name of the CSS class defining general styles for the cluster markers.Use this class to define CSS styles that are not set up by the code thatprocesses the styles array. | | enableRetinaIcons | boolean | false | Whether to allow the use of cluster icons that have sizes that are somemultiple (typically double) of their actual display size. Icons such asthese look better when viewed on high-resolution monitors such as Apple'sRetina displays. Note: if this property is true, sprites cannot be usedas cluster icons. | | ignoreHidden | boolean | undefined | Whether to ignore hidden markers in clusters. You may want to set this totrue to ensure that hidden markers are not included in the marker countthat appears on a cluster marker (this count is the value of the textproperty of the result returned by the default calculator). If set totrue and you change the visibility of a marker being clustered, be sureto also call MarkerClusterer.repaint(). | | imageSizes | number[] | [53, 56, 66, 78, 90] | An array of numbers containing the widths of the group of<imagePath><n>.<imageExtension> image files. (The images are assumed tobe square.) | | title | string | undefined | The tooltip to display when the mouse moves over a cluster marker.(Alternatively, you can use a custom calculator function to specify adifferent tooltip for each cluster marker.) |

Outputs

| name | $event type | description | |--------------|-------------|-----------------------------| | clusterClick | void | Fires if cluster is clicked |

Index

exg-map-polygon

example

Adds a polygon to the map.

<exg-map [latitude]="50" [longitude]="9">
  <exg-map-polygon [paths]="paths" fillColor="red"></exg-map-polygon>
</exg-map>

 paths: LatLngLiteral[] = [
  {lat: 50.01098200, lng: 9.01809747},
  {lat: 50.31098200, lng: 9.71809747},
  {lat: 50.84756905, lng: 9.91809747},
  {lat: 50.91098200, lng: 9.3809747},
  {lat: 50.21098200, lng: 9.21809747}
];

Definitions

Inputs

| name | type | default | description | |---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | clickable | boolean | true | Indicates whether this Polygon handles mouse events. Defaults to true. | | polyDraggable | boolean | false | If set to true, the user can drag this shape over the map. The geodesicproperty defines the mode of dragging. Defaults to false. | | editable | boolean | false | If set to true, the user can edit this shape by dragging the controlpoints shown at the vertices and on each segment. Defaults to false. | | fillColor | string | undefined | The fill color. All CSS3 colors are supported except for extendednamed colors. | | fillOpacity | number | undefined | The fill opacity between 0.0 and 1.0 | | geodesic | boolean | false | When true, edges of the polygon are interpreted as geodesic and willfollow the curvature of the Earth. When false, edges of the polygon arerendered as straight lines in screen space. Note that the shape of ageodesic polygon may appear to change when dragged, as the dimensionsare maintained relative to the surface of the earth. Defaults to false. | | paths | google.maps.LatLng[] google.maps.LatLng[][] google.maps.MVCArray<google.maps.LatLng> google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>> google.maps.LatLngLiteral[] google.maps.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 ofLatLng coordinates. Paths are closed automatically; do not repeat thefirst vertex of the path as the last vertex. Simple polygons may bedefined using a single array of LatLngs. More complex polygons mayspecify an array of arrays. Any simple arrays are converted into Arrays.Inserting or removing LatLngs from the Array will automatically updatethe polygon on the map. | | strokeColor | string | undefined | The stroke color. All CSS3 colors are supported except for extendednamed colors. | | strokeOpacity | number | undefined | The stroke opacity between 0.0 and 1.0 | | strokeWeight | number | undefined | The stroke width in pixels. | | visible | boolean | undefined | Whether this polygon is visible on the map. Defaults to true. | | zIndex | number | undefined | The zIndex compared to other polys.