Exc-map-v2 NPM

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/googlemaps: "^3.43.3",
@google/markerclustererplus: "^5.1.3"

Install

To install ExcMapV2Module into your project use

npm i exc-map-v2

Prepare

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

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

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

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

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

    "types": ["googlemaps"]

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.MouseEvent 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.MouseEvent	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.MouseEvent	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.MouseEvent	This event emitter gets emitted when the user clicks on the circle.
circleDblClick	google.maps.MouseEvent	This event emitter gets emitted when the user clicks on the circle.
drag	google.maps.MouseEvent	This event is repeatedly fired while the user drags the circle.
dragEnd	google.maps.MouseEvent	This event is fired when the user stops dragging the circle.
dragStart	google.maps.MouseEvent	This event is fired when the user starts dragging the circle.
mouseDown	google.maps.MouseEvent	This event is fired when the DOM mousedown event is fired on the circle.
mouseMove	google.maps.MouseEvent	This event is fired when the DOM mousemove event is fired on the circle.
mouseOut	google.maps.MouseEvent	This event is fired on circle mouseout.
mouseOver	google.maps.MouseEvent	This event is fired on circle mouseover.
mouseUp	google.maps.MouseEvent	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.MouseEvent	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.MouseEvent	This event is fired when the user starts dragging the marker.
drag	google.maps.MouseEvent	This event is repeatedly fired while the user drags the marker.
dragEnd	google.maps.MouseEvent	This event is fired when the user stops dragging the marker.
mouseOver	google.maps.MouseEvent	This event is fired when the user mouses over the marker.
mouseOut	google.maps.MouseEvent	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 to`true` to ensure that hidden markers are not included in the marker countthat appears on a cluster marker (this count is the value of the `text`property of the result returned by the default `calculator`). If set to`true` 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.

tslib

@everything-registry/sub-chunk-1626 @zalastax/nolb-exc

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago