Class MapComponent

mgl-map - The main map component

See

Example

...
@Component({
  template: `
  <mgl-map
    [style]="'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:292

Properties

`Readonly`attributionControl

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

Init input

`Readonly`bearing

bearing: InputSignal<undefined | [number]> = ...

Dynamic input

`Readonly`bearingSnap

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

Init input

`Readonly`bounds

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

Init input

`Readonly`boxZoom

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

Dynamic input

`Readonly`boxZoomCancel

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

`Readonly`boxZoomEnd

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

`Readonly`boxZoomStart

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

`Readonly`cancelPendingTileRequestsWhileZooming

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

Init input

`Readonly`canvasContextAttributes

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

Init input

`Readonly`center

center: InputSignal<undefined | LngLatLike> = ...

Dynamic input

`Readonly`centerClampedToGround

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

Init input

`Readonly`centerWithPanTo

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

`Readonly`clickTolerance

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

Init input

`Readonly`collectResourceTiming

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

Init input

`Readonly`cooperativeGestures

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

Init input

`Readonly`crossSourceCollisions

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

Init input

`Readonly`cursorStyle

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

`Readonly`customMapboxApiUrl

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

Init input

`Readonly`data

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

`Readonly`dataLoading

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

`Readonly`doubleClickZoom

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

Dynamic input

`Readonly`dragPan

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

Dynamic input

`Readonly`dragRotate

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

Dynamic input

`Readonly`elevation

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

Dynamic input

`Readonly`fadeDuration

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

Init input

`Readonly`fitBounds

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

`Readonly`fitBoundsOptions

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

Dynamic input

`Readonly`fitScreenCoordinates

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

`Readonly`hash

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

Init input

`Readonly`idle

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

`Readonly`interactive

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

Init input

`Readonly`keyboard

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

Dynamic input

`Readonly`locale

locale: InputSignal<any> = ...

Init input

`Readonly`localIdeographFontFamily

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

Init input

`Readonly`logoPosition

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

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<undefined | MouseEvent | TouchEvent> & EventData,
> = ...

`Readonly`mapDragEnd

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

`Readonly`mapDragStart

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

`Readonly`mapError

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

`Readonly`maplibreLogo

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

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 & EventData> = ...

`Readonly`mapResize

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

`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<undefined | LngLatBoundsLike> = ...

Dynamic input

`Readonly`maxCanvasSize

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

Init input

`Readonly`maxPitch

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

Dynamic input

`Readonly`maxTileCacheSize

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

Init input

`Readonly`maxTileCacheZoomLevels

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

Init input

`Readonly`maxZoom

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

Dynamic input

`Readonly`minPitch

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

Dynamic input

`Readonly`minZoom

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

Dynamic input

`Readonly`move

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

`Readonly`moveEnd

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

`Readonly`moveStart

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

`Readonly`movingMethod

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

Added by ngx-mapbox-gl

`Readonly`movingOptions

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

`Readonly`panToOptions

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

`Readonly`pitch

pitch: InputSignal<undefined | [number]> = ...

Dynamic input

`Readonly`pitchEnd

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

`Readonly`pitchEvt

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

`Readonly`pitchStart

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

`Readonly`pitchWithRotate

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

Init input

`Readonly`pixelRatio

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

Init input

`Readonly`projection

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

Dynamic input that is not part of the MapOptions object

`Readonly`refreshExpiredTiles

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

Init input

`Readonly`render

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

`Readonly`renderWorldCopies

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

Dynamic input

`Readonly`roll

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

Dynamic input

`Readonly`rollEnabled

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

Init input

`Readonly`rotate

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

`Readonly`rotateEnd

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

`Readonly`rotateStart

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

`Readonly`scrollZoom

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

Dynamic input

`Readonly`sourceData

sourceData: OutputEmitterRef<
    MapLibreEvent<unknown> & {
        dataType: "source";
        isSourceLoaded: boolean;
        source: SourceSpecification;
        sourceDataChanged?: boolean;
        sourceDataType: MapSourceDataType;
        sourceId: string;
        tile: any;
    } & EventData,
> = ...

`Readonly`sourceDataLoading

sourceDataLoading: OutputEmitterRef<
    MapLibreEvent<unknown> & {
        dataType: "source";
        isSourceLoaded: boolean;
        source: SourceSpecification;
        sourceDataChanged?: boolean;
        sourceDataType: MapSourceDataType;
        sourceId: string;
        tile: any;
    } & EventData,
> = ...

`Readonly`style

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

Dynamic input

`Readonly`styleData

styleData: OutputEmitterRef<
MapLibreEvent<unknown> & { dataType: "style" } & EventData,
> = ...

`Readonly`styleDataLoading

styleDataLoading: OutputEmitterRef<
MapLibreEvent<unknown> & { dataType: "style" } & EventData,
> = ...

`Readonly`styleImageMissing

styleImageMissing: OutputEmitterRef<{ id: string } & EventData> = ...

`Readonly`terrain

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

Dynamic input that is not part of the MapOptions object

`Readonly`touchPitch

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

Dynamic input

`Readonly`touchZoomRotate

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

Dynamic input

`Readonly`trackResize

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

Init input

`Readonly`transformCameraUpdate

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

Init input

`Readonly`transformRequest

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

Init input

`Readonly`validateStyle

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

Init input

`Readonly`webGlContextLost

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

`Readonly`webGlContextRestored

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

`Readonly`zoom

zoom: InputSignal<undefined | [number]> = ...

Dynamic input

`Readonly`zoomEnd

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

`Readonly`zoomEvt

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

`Readonly`zoomStart

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

Accessors

mapInstance

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

Methods

ngOnChanges

ngOnChanges(changes: SimpleChanges): 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: SimpleChanges
  The changed properties.
Returns Promise<void>
Implementation of OnChanges.ngOnChanges
- Defined in projects/ngx-maplibre-gl/src/lib/map/map.component.ts:382

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:378

Class MapComponent

See

Example

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns MapComponent

Properties

ReadonlyattributionControl

Readonlybearing

ReadonlybearingSnap

Readonlybounds

ReadonlyboxZoom

ReadonlyboxZoomCancel

ReadonlyboxZoomEnd

ReadonlyboxZoomStart

ReadonlycancelPendingTileRequestsWhileZooming

ReadonlycanvasContextAttributes

Readonlycenter

ReadonlycenterClampedToGround

ReadonlycenterWithPanTo

ReadonlyclickTolerance

ReadonlycollectResourceTiming

ReadonlycooperativeGestures

ReadonlycrossSourceCollisions

ReadonlycursorStyle

ReadonlycustomMapboxApiUrl

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

ReadonlymapTouchCancel

ReadonlymapTouchEnd

ReadonlymapTouchMove

ReadonlymapTouchStart

ReadonlymapWheel

ReadonlymaxBounds

ReadonlymaxCanvasSize

ReadonlymaxPitch

ReadonlymaxTileCacheSize

ReadonlymaxTileCacheZoomLevels

ReadonlymaxZoom

ReadonlyminPitch

ReadonlyminZoom

Readonlymove

`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`customMapboxApiUrl

`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`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`move

`Readonly`moveEnd

`Readonly`moveStart

`Readonly`movingMethod

`Readonly`movingOptions

`Readonly`panToOptions

`Readonly`pitch

`Readonly`pitchEnd

`Readonly`pitchEvt

`Readonly`pitchStart

`Readonly`pitchWithRotate

`Readonly`pixelRatio

`Readonly`projection

`Readonly`refreshExpiredTiles