This module renders a map component with some basic controls, based on Leaflet.

Usage no npm install needed!

<script type="module">
  import acpaasUiNgxLeafet from 'https://cdn.skypack.dev/@acpaas-ui/ngx-leafet';



This module renders a map component with some basic controls, based on Leaflet.


  • leaflet
  • leaflet-draw
  • esri-leaflet


import { LeafletMap } from '@acpaas-ui/ngx-leaflet';

Add the leaflet CSS styles to the src/angular.json file.

"styles": [


Visit our documentation site for full how-to docs and guidelines

Selectable list module


Name Default value Description
@Input() leafletMap: LeafletMap; - An instance of the Leaflet Map class.
@Input() hasSidebar: boolean; false Define if the map has a sidebar.
@Input() zoomLevel: number; 19 Define how far to zoom in Leaflet Zoom Level

Check the Leaflet API reference for Leaflet specific API's.


import { LeafletMap, baseMapWorldGray, baseMapAntwerp } from '@acpaas-ui/ngx-leaflet';

public leafletMap: LeafletMap = new LeafletMap({
    zoom: 13, // default zoom level
    center: [51.215, 4.425], // default center point
    onAddPolygon: (layer) => {},
    onAddLine: (layer) => {},
    onEditFeature: (feature) => {},

public ngOnInit(): void {
    this.leafletMap.onInit.subscribe(() => {
<aui-leaflet [leafletMap]="leafletMap" [hasSidebar]="true">
    <div controls top left>
    <div controls top right>
    <div controls bottom left>
        <aui-leaflet-locate-control zoomLevel="16"></aui-leaflet-locate-control>
    <div controls bottom right>
        Content displayed in sidebar

Custom services

  • map: The native leaflet map instance
  • addTileLayer(layer: LeafletLayer): adds a tile layer to the map. (see leaflet docs)
  • addFeatureLayer(config: any): adds a feature layer to the map. (see esri leaflet docs)
  • addGeoJSON(geoJson: any, config: any): add geoJSON to the map. (see leaflet docs)
  • fitFeatureLayers(featureLayers): Fit the map bounds to the given feature layers.
  • removeLayer(layer): removes a layer
  • zoomIn(): Zoom in
  • zoomOut(): Zoom out
  • toggleFullscreen(): Toggle fullscreen
  • locate(zoomLevel): Start zooming to current location with an optional zoom level
  • setView(center, zoom): Zoom to the given center and zoom values.
  • addMarker(position, options): Adds a marker to the given position. (see leaflet docs)
  • addHTMLMarker: Adds an HTML marker to the given position.


Visit our Contribution Guidelines for more information on how to contribute.