Map - arnaudleclerc/ng-azure-maps GitHub Wiki

Display a map

Use the azure-map directive to display a map.

<azure-map></azure-map>

Azure Map

You can specify different inputs on the azure-map directive to customize your display. Please refer to the Azure Maps Web SDK Documentation for more information.

<azure-map [center]="[11.47, 48.18]" mapStyle='grayscale_dark'></azure-map>

NB: To avoid conflict with the style html tag, the style to apply to the map can be found under mapStyle instead. The same applied to the type of camera which has been renamed to cameraType.

<azure-map [center]="[11.47, 48.18]" mapStyle='grayscale_dark' [zoom]="10"></azure-map>

Custom Azure Map

For now, only the ready and error events are available as Output of the azure-map directive.

React to events on the map

The map events are supported on the azure-map directive. In order to avoid conflicts with the names of some input (like pitch or zoom), every event starts with on and is followed by the key of the event in PascalCase. A parameter containing the map and the event is given to the method.

The events and their description are defined on the following table.

Native event key azure-map event Description
boxzoomend onBoxZoomEnd Fired when a "box zoom" interaction ends.
boxzoomstart onBoxZoomStart Fired when a "box zoom" interaction starts.
click onClick Fired when a pointing device is pressed and released at the same point on the map.
contextmenu onContextMenu Fired when the right button of the mouse is clicked.
data onData Fired when any map data loads or changes.
dblclick onDblClick Fired when a pointing device is clicked twice at the same point on the map.
drag onDrag Fired repeatedly during a "drag to pan" interaction on the map, popup, or HTML marker.
dragend onDragEnd Fired when a "drag to pan" interaction ends on the map, popup, or HTML marker.
dragstart onDragStart Fired when a "drag to pan" interaction starts on the map, popup, or HTML marker.
error onError Fired when an error occurs.
idle onIdle

Fired after the last frame rendered before the map enters an "idle" state:

  • No camera transitions are in progress.
  • All currently requested tiles have loaded.
  • All fade/transition animations have completed.
layeradded onLayerAdded Fired after a layer has been added to the map
layerremoved onLayerRemoved Fired after a layer has been removed from the map
load onLoad Fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.
mousedown onMouseDown Fired when a pointing device is pressed within the map or when on top of an element.
mouseleave onMouseLeave Fired when a pointing device is moved out the map or an element.
mousemove onMouseMove Fired when a pointing device is moved within the map or an element.
mouseout onMouseOut Fired when a point device leaves the map's canvas our leaves an element.
mouseover onMouseOver Fired when a pointing device is moved over the map or an element.
mouseup onMouseUp Fired when a pointing device is released within the map or when on top of an element.
move onMove Fired repeatedly during an animated transition from one view to another, as the result of either user interaction or methods.
moveend onMoveEnd Fired just after the map completes a transition from one view to another, as the result of either user interaction or methods.
movestart onMoveStart Fired just before the map begins a transition from one view to another, as the result of either user interaction or methods.
pitch onPitch Fired whenever the map's pitch (tilt) changes as the result of either user interaction or methods.
pitchend onPitchEnd Fired immediately after the map's pitch (tilt) finishes changing as the result of either user interaction or methods.
pitchstart onPitchStart Fired whenever the map's pitch (tilt) begins a change as the result of either user interaction or methods.
render onRender

Fired whenever the map is drawn to the screen, as the result of:

  • A change to the map's position, zoom, pitch, or bearing.
  • A change to the map's style.
  • A change to a DataSource source.
  • The loading of a vector tile, GeoJSON file, glyph, or sprite.
ready onReady Fired when the minimum required map resources are loaded before the map is ready to be programmatically interacted with.
render onRender Fired whenever the map is drawn to the screen, as the result of:
resize onResize Fired immediately after the map has been resized.
rotate onRotate Fired repeatedly during a "drag to rotate" interaction.
rotateend onRotateEnd Fired when a "drag to rotate" interaction ends.
rotatestart onRotateStart Fired when a "drag to rotate" interaction starts.
sourcedata onSourceData Fired when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes.
sourceadded onSourceAdded Fired when a DataSource or VectorTileSource is added to the map.
sourceremoved onSourceRemoved Fired when a DataSource or VectorTileSource is removed from the map.
styledata onStyleData Fired when the map's style loads or changes.
styleimagemissing onStyleImageMissing Fired when a layer tries to load an image from the image sprite that doesn't exist
tokenacquired onTokenAcquired Fired when an AAD access token is obtained.
touchcancel onTouchCancel Fired when a touchcancel event occurs within the map.
touchend onTouchEnd Fired when a touchend event occurs within the map.
touchmove onTouchMove Fired when a touchmove event occurs within the map.
touchstart onTouchStart Fired when a touchstart event occurs within the map.
wheel onWheel Fired when a mouse wheel event occurs within the map.
zoom onZoom Fired repeatedly during an animated transition from one zoom level to another, as the result of either user interaction or methods.
zoomend onZoomEnd Fired just after the map completes a transition from one zoom level to another, as the result of either user interaction or methods.
zoomstart onZoomStart Fired just before the map begins a transition from one zoom level to another, as the result of either user interaction or methods.
⚠️ **GitHub.com Fallback** ⚠️