Class MapComponent

mgl-map - The main map component

See

Example

...
@Component({
  template: `
  <mgl-map
    [mapStyle]="'https://demotiles.maplibre.org/style.json'"
    [zoom]="9"
    [center]="[-74.50, 40]"
    (mapLoad)="map = $event"
  ></mgl-map>
  `,
...
})
export class DisplayMapComponent {
  map: Map; // MapLibre GL Map object (MapLibre is ran outside angular zone, keep that in mind when binding events from this object)
...
}

Implements

OnChanges
OnDestroy
MapEvent

Index

Constructors

constructor

new MapComponent(): MapComponent
Returns MapComponent
- Defined in projects/ngx-maplibre-gl/src/lib/map/map.component.ts:322

Properties

`Readonly`anisotropicFilterPitch

anisotropicFilterPitch: InputSignal<number | null | undefined> = ...

Dynamic input

`Readonly`aroundCenter

aroundCenter: InputSignal<boolean | undefined> = ...

Init input

`Readonly`attributionControl

attributionControl: InputSignal<false | AttributionControlOptions | undefined> = ...

Init input

`Readonly`bearing

bearing: ModelSignal<number | undefined> = ...

Dynamic two-way input

`Readonly`bearingSnap

bearingSnap: InputSignal<number | undefined> = ...

Init input

`Readonly`bounds

bounds: InputSignal<LngLatBoundsLike | undefined> = ...

Init input

`Readonly`boxZoom

boxZoom: InputSignal<boolean | BoxZoomHandlerOptions | undefined> = ...

Dynamic input

`Readonly`boxZoomCancel

boxZoomCancel: OutputEmitterRef<MapBoxZoomEvent & EventData> = ...

`Readonly`boxZoomEnd

boxZoomEnd: OutputEmitterRef<MapBoxZoomEvent & EventData> = ...

`Readonly`boxZoomStart

boxZoomStart: OutputEmitterRef<MapBoxZoomEvent & EventData> = ...

`Readonly`cancelPendingTileRequestsWhileZooming

cancelPendingTileRequestsWhileZooming: InputSignal<boolean | undefined> = ...

Init input

`Readonly`canvasContextAttributes

canvasContextAttributes: InputSignal<WebGLContextAttributesWithType | undefined> = ...

Init input

`Readonly`center

center: ModelSignal<LngLatLikeOrPosition | undefined> = ...

Dynamic two-way input

`Readonly`centerClampedToGround

centerClampedToGround: InputSignal<boolean | undefined> = ...

Init input

`Readonly`centerWithPanTo

centerWithPanTo: InputSignalWithTransform<boolean | undefined, BooleanInput> = ...

`Readonly`clickTolerance

clickTolerance: InputSignal<number | undefined> = ...

Init input

`Readonly`collectResourceTiming

collectResourceTiming: InputSignal<boolean | undefined> = ...

Init input

`Readonly`cooperativeGestures

cooperativeGestures: InputSignal<boolean | undefined> = ...

Init input

`Readonly`crossSourceCollisions

crossSourceCollisions: InputSignal<boolean | undefined> = ...

Init input

`Readonly`cursorStyle

cursorStyle: InputSignal<string | undefined> = ...

`Readonly`data

data: OutputEmitterRef<MapDataEvent & EventData> = ...

`Readonly`dataLoading

dataLoading: OutputEmitterRef<MapDataEvent & EventData> = ...

`Readonly`doubleClickZoom

doubleClickZoom: InputSignal<boolean | undefined> = ...

Dynamic input

`Readonly`dragPan

dragPan: InputSignal<boolean | DragPanOptions | undefined> = ...

Dynamic input

`Readonly`dragRotate

dragRotate: InputSignal<boolean | undefined> = ...

Dynamic input

`Readonly`elevation

elevation: InputSignal<number | undefined> = ...

Dynamic input

`Readonly`fadeDuration

fadeDuration: InputSignal<number | undefined> = ...

Init input

`Readonly`fitBounds

fitBounds: InputSignal<LngLatBoundsLike | undefined> = ...

`Readonly`fitBoundsOptions

fitBoundsOptions: InputSignal<FitBoundsOptions | undefined> = ...

Dynamic input

`Readonly`fitScreenCoordinates

fitScreenCoordinates: InputSignal<[PointLike, PointLike] | undefined> = ...

`Readonly`hash

hash: InputSignal<string | boolean | undefined> = ...

Init input

`Readonly`idle

idle: OutputEmitterRef<MapLibreEvent<unknown> & EventData> = ...

`Readonly`interactive

interactive: InputSignal<boolean | undefined> = ...

Init input

`Readonly`keyboard

keyboard: InputSignal<boolean | undefined> = ...

Dynamic input

`Readonly`locale

locale: InputSignal<Record<string, string> | undefined> = ...

Init input

`Readonly`localIdeographFontFamily

localIdeographFontFamily: InputSignal<string | false | undefined> = ...

Init input

`Readonly`logoPosition

logoPosition: InputSignal<ControlPosition | undefined> = ...

Init input

`Readonly`mapClick

mapClick: OutputEmitterRef<MapMouseEvent & EventData> = ...

`Readonly`mapContainer

mapContainer: Signal<ElementRef<HTMLDivElement>> = ...

`Readonly`mapContextMenu

mapContextMenu: OutputEmitterRef<MapMouseEvent & EventData> = ...

`Readonly`mapDblClick

mapDblClick: OutputEmitterRef<MapMouseEvent & EventData> = ...

`Readonly`mapDrag

mapDrag: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData,
> = ...

`Readonly`mapDragEnd

mapDragEnd: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData,
> = ...

`Readonly`mapDragStart

mapDragStart: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData,
> = ...

`Readonly`mapError

mapError: OutputEmitterRef<ErrorEvent & EventData> = ...

`Readonly`maplibreLogo

maplibreLogo: InputSignal<boolean | undefined> = ...

Init input

`Readonly`mapLoad

mapLoad: OutputEmitterRef<Map$1> = ...

`Readonly`mapMouseDown

mapMouseDown: OutputEmitterRef<MapMouseEvent & EventData> = ...

`Readonly`mapMouseMove

mapMouseMove: OutputEmitterRef<MapMouseEvent & EventData> = ...

`Readonly`mapMouseOut

mapMouseOut: OutputEmitterRef<MapMouseEvent & EventData> = ...

`Readonly`mapMouseOver

mapMouseOver: OutputEmitterRef<MapMouseEvent & EventData> = ...

`Readonly`mapMouseUp

mapMouseUp: OutputEmitterRef<MapMouseEvent & EventData> = ...

`Readonly`mapRemove

mapRemove: OutputEmitterRef<MapLibreEvent<unknown> & EventData> = ...

`Readonly`mapResize

mapResize: OutputEmitterRef<MapLibreEvent<unknown> & EventData> = ...

`Readonly`mapStyle

mapStyle: InputSignal<string | StyleSpecification | undefined> = ...

Dynamic input

`Readonly`mapTouchCancel

mapTouchCancel: OutputEmitterRef<MapTouchEvent & EventData> = ...

`Readonly`mapTouchEnd

mapTouchEnd: OutputEmitterRef<MapTouchEvent & EventData> = ...

`Readonly`mapTouchMove

mapTouchMove: OutputEmitterRef<MapTouchEvent & EventData> = ...

`Readonly`mapTouchStart

mapTouchStart: OutputEmitterRef<MapTouchEvent & EventData> = ...

`Readonly`mapWheel

mapWheel: OutputEmitterRef<MapWheelEvent & EventData> = ...

`Readonly`maxBounds

maxBounds: InputSignal<LngLatBoundsLike | undefined> = ...

Dynamic input

`Readonly`maxCanvasSize

maxCanvasSize: InputSignal<[number, number] | undefined> = ...

Init input

`Readonly`maxPitch

maxPitch: InputSignal<number | null | undefined> = ...

Dynamic input

`Readonly`maxTileCacheSize

maxTileCacheSize: InputSignal<number | null | undefined> = ...

Init input

`Readonly`maxTileCacheZoomLevels

maxTileCacheZoomLevels: InputSignal<number | undefined> = ...

Init input

`Readonly`maxZoom

maxZoom: InputSignal<number | null | undefined> = ...

Dynamic input

`Readonly`minPitch

minPitch: InputSignal<number | null | undefined> = ...

Dynamic input

`Readonly`minZoom

minZoom: InputSignal<number | null | undefined> = ...

Dynamic input

`Readonly`missingStyleImageResolver

missingStyleImageResolver: InputSignal<MissingStyleImageResolver | undefined> = ...

Called when an icon or pattern needed by the style is missing, so it can be loaded or generated on demand and registered with addImage.

See

Map.setMissingStyleImageResolver

`Readonly`move

move: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData,
> = ...

`Readonly`moveEnd

moveEnd: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData,
> = ...

`Readonly`moveStart

moveStart: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData,
> = ...

`Readonly`movingMethod

movingMethod: InputSignal<"jumpTo" | "easeTo" | "flyTo"> = ...

Added by ngx-mapbox-gl

`Readonly`movingOptions

movingOptions: InputSignal<MovingOptions | undefined> = ...

`Readonly`panToOptions

panToOptions: InputSignal<AnimationOptions | undefined> = ...

`Readonly`pitch

pitch: ModelSignal<number | undefined> = ...

Dynamic two-way input

`Readonly`pitchEnd

pitchEnd: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData,
> = ...

`Readonly`pitchEvt

pitchEvt: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData,
> = ...

`Readonly`pitchStart

pitchStart: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData,
> = ...

`Readonly`pitchWithRotate

pitchWithRotate: InputSignal<boolean | undefined> = ...

Init input

`Readonly`pixelRatio

pixelRatio: InputSignal<number | undefined> = ...

Init input

`Readonly`projection

projection: InputSignal<ProjectionSpecification | undefined> = ...

Dynamic input that is not part of the MapOptions object

`Readonly`reduceMotion

reduceMotion: InputSignal<boolean | undefined> = ...

Init input

`Readonly`refreshExpiredTiles

refreshExpiredTiles: InputSignal<boolean | undefined> = ...

Init input

`Readonly`render

render: OutputEmitterRef<MapLibreEvent<unknown> & EventData> = ...

`Readonly`renderWorldCopies

renderWorldCopies: InputSignal<boolean | undefined> = ...

Dynamic input

`Readonly`roll

roll: ModelSignal<number | undefined> = ...

Dynamic two-way input

`Readonly`rollEnabled

rollEnabled: InputSignal<boolean | undefined> = ...

Init input

`Readonly`rotate

rotate: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData,
> = ...

`Readonly`rotateEnd

rotateEnd: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData,
> = ...

`Readonly`rotateStart

rotateStart: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | undefined> & EventData,
> = ...

`Readonly`scrollZoom

scrollZoom: InputSignal<boolean | AroundCenterOptions | undefined> = ...

Dynamic input

`Readonly`sourceData

sourceData: OutputEmitterRef<MapSourceDataEvent & EventData> = ...

`Readonly`sourceDataLoading

sourceDataLoading: OutputEmitterRef<MapSourceDataEvent & EventData> = ...

`Readonly`styleData

styleData: OutputEmitterRef<MapStyleDataEvent & EventData> = ...

`Readonly`styleDataLoading

styleDataLoading: OutputEmitterRef<MapStyleDataEvent & EventData> = ...

`Readonly`styleImageMissing

styleImageMissing: OutputEmitterRef<MapStyleImageMissingEvent & EventData> = ...

`Readonly`terrain

terrain: InputSignal<TerrainSpecification | undefined> = ...

Dynamic input that is not part of the MapOptions object

`Readonly`terrainSkirtLength

terrainSkirtLength: InputSignal<"auto" | "none" | undefined> = ...

Init input

`Readonly`touchPitch

touchPitch: InputSignal<boolean | AroundCenterOptions | undefined> = ...

Dynamic input

`Readonly`touchZoomRotate

touchZoomRotate: InputSignal<boolean | AroundCenterOptions | undefined> = ...

Dynamic input

`Readonly`trackResize

trackResize: InputSignal<boolean | undefined> = ...

Init input

`Readonly`transformCameraUpdate

transformCameraUpdate: InputSignal<
    CameraUpdateTransformFunction
    | null
    | undefined,
> = ...

Init input

`Readonly`transformConstrain

transformConstrain: InputSignal<TransformConstrainFunction | null | undefined> = ...

Dynamic input

`Readonly`transformRequest

transformRequest: InputSignal<RequestTransformFunction | null | undefined> = ...

Init input

`Readonly`validateStyle

validateStyle: InputSignal<boolean | undefined> = ...

Init input

`Readonly`webGlContextLost

webGlContextLost: OutputEmitterRef<MapContextEvent & EventData> = ...

`Readonly`webGlContextRestored

webGlContextRestored: OutputEmitterRef<MapContextEvent & EventData> = ...

`Readonly`zoom

zoom: ModelSignal<number | undefined> = ...

Dynamic two-way input

`Readonly`zoomEnd

zoomEnd: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData,
> = ...

`Readonly`zoomEvt

zoomEvt: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData,
> = ...

`Readonly`zoomLevelsToOverscale

zoomLevelsToOverscale: InputSignal<number | undefined> = ...

Init input

`Readonly`zoomSnap

zoomSnap: InputSignal<number | undefined> = ...

Dynamic input

`Readonly`zoomStart

zoomStart: OutputEmitterRef<
MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData,
> = ...

Accessors

mapInstance

get mapInstance(): Map$1
Returns Map$1
- Defined in projects/ngx-maplibre-gl/src/lib/map/map.component.ts:315

Methods

ngOnChanges

ngOnChanges(changes: { [propName: string]: SimpleChange<any> }): Promise<void>
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
- changes: { [propName: string]: SimpleChange<any> }
  The changed properties.
Returns Promise<void>
Implementation of OnChanges.ngOnChanges
- Defined in projects/ngx-maplibre-gl/src/lib/map/map.component.ts:445

ngOnDestroy

ngOnDestroy(): void
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

Returns void
Implementation of OnDestroy.ngOnDestroy
- Defined in projects/ngx-maplibre-gl/src/lib/map/map.component.ts:421

Class MapComponent

See

Example

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns MapComponent

Properties

ReadonlyanisotropicFilterPitch

ReadonlyaroundCenter

ReadonlyattributionControl

Readonlybearing

ReadonlybearingSnap

Readonlybounds

ReadonlyboxZoom

ReadonlyboxZoomCancel

ReadonlyboxZoomEnd

ReadonlyboxZoomStart

ReadonlycancelPendingTileRequestsWhileZooming

ReadonlycanvasContextAttributes

Readonlycenter

ReadonlycenterClampedToGround

ReadonlycenterWithPanTo

ReadonlyclickTolerance

ReadonlycollectResourceTiming

ReadonlycooperativeGestures

ReadonlycrossSourceCollisions

ReadonlycursorStyle

Readonlydata

ReadonlydataLoading

ReadonlydoubleClickZoom

ReadonlydragPan

ReadonlydragRotate

Readonlyelevation

ReadonlyfadeDuration

ReadonlyfitBounds

ReadonlyfitBoundsOptions

ReadonlyfitScreenCoordinates

Readonlyhash

Readonlyidle

Readonlyinteractive

Readonlykeyboard

Readonlylocale

ReadonlylocalIdeographFontFamily

ReadonlylogoPosition

ReadonlymapClick

ReadonlymapContainer

ReadonlymapContextMenu

ReadonlymapDblClick

ReadonlymapDrag

ReadonlymapDragEnd

ReadonlymapDragStart

ReadonlymapError

ReadonlymaplibreLogo

ReadonlymapLoad

ReadonlymapMouseDown

ReadonlymapMouseMove

ReadonlymapMouseOut

ReadonlymapMouseOver

ReadonlymapMouseUp

ReadonlymapRemove

ReadonlymapResize

ReadonlymapStyle

ReadonlymapTouchCancel

ReadonlymapTouchEnd

ReadonlymapTouchMove

ReadonlymapTouchStart

ReadonlymapWheel

ReadonlymaxBounds

ReadonlymaxCanvasSize

ReadonlymaxPitch

ReadonlymaxTileCacheSize

ReadonlymaxTileCacheZoomLevels

ReadonlymaxZoom

ReadonlyminPitch

`Readonly`anisotropicFilterPitch

`Readonly`aroundCenter

`Readonly`attributionControl

`Readonly`bearing

`Readonly`bearingSnap

`Readonly`bounds

`Readonly`boxZoom

`Readonly`boxZoomCancel

`Readonly`boxZoomEnd

`Readonly`boxZoomStart

`Readonly`cancelPendingTileRequestsWhileZooming

`Readonly`canvasContextAttributes

`Readonly`center

`Readonly`centerClampedToGround

`Readonly`centerWithPanTo

`Readonly`clickTolerance

`Readonly`collectResourceTiming

`Readonly`cooperativeGestures

`Readonly`crossSourceCollisions

`Readonly`cursorStyle

`Readonly`data

`Readonly`dataLoading

`Readonly`doubleClickZoom

`Readonly`dragPan

`Readonly`dragRotate

`Readonly`elevation

`Readonly`fadeDuration

`Readonly`fitBounds

`Readonly`fitBoundsOptions

`Readonly`fitScreenCoordinates

`Readonly`hash

`Readonly`idle

`Readonly`interactive

`Readonly`keyboard

`Readonly`locale

`Readonly`localIdeographFontFamily

`Readonly`logoPosition

`Readonly`mapClick

`Readonly`mapContainer

`Readonly`mapContextMenu

`Readonly`mapDblClick

`Readonly`mapDrag

`Readonly`mapDragEnd

`Readonly`mapDragStart

`Readonly`mapError

`Readonly`maplibreLogo

`Readonly`mapLoad

`Readonly`mapMouseDown

`Readonly`mapMouseMove

`Readonly`mapMouseOut

`Readonly`mapMouseOver

`Readonly`mapMouseUp

`Readonly`mapRemove

`Readonly`mapResize

`Readonly`mapStyle

`Readonly`mapTouchCancel

`Readonly`mapTouchEnd

`Readonly`mapTouchMove

`Readonly`mapTouchStart

`Readonly`mapWheel

`Readonly`maxBounds

`Readonly`maxCanvasSize

`Readonly`maxPitch

`Readonly`maxTileCacheSize

`Readonly`maxTileCacheZoomLevels

`Readonly`maxZoom

`Readonly`minPitch

`Readonly`minZoom

`Readonly`missingStyleImageResolver

`Readonly`move

`Readonly`moveEnd

`Readonly`moveStart

`Readonly`movingMethod

`Readonly`movingOptions

`Readonly`panToOptions

`Readonly`pitch

`Readonly`pitchEnd

`Readonly`pitchEvt

`Readonly`pitchStart

`Readonly`pitchWithRotate