@acpaas-ui/ngx-leaflet

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

Dependencies

• leaflet
• leaflet-draw
• esri-leaflet

Usage

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

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

"styles": [
    "node_modules/leaflet/dist/leaflet.css",
    "node_modules/leaflet-draw/dist/leaflet.draw.css"
]

Documentation

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

Leaflet module

API

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.

Example

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(() => {
        this.leafletMap.addTileLayer(baseMapWorldGray);
        this.leafletMap.addTileLayer(baseMapAntwerp);
    });
}

<aui-leaflet [leafletMap]="leafletMap" [hasSidebar]="true">
  <div controls top left>
    <aui-leaflet-drag-control></aui-leaflet-drag-control>
    <aui-leaflet-draw-control></aui-leaflet-draw-control>
  </div>
  <div controls top right>
    <aui-leaflet-fullscreen-control></aui-leaflet-fullscreen-control>
  </div>
  <div controls bottom left>
    <aui-leaflet-locate-control zoomLevel="16"></aui-leaflet-locate-control>
  </div>
  <div controls bottom right>
    <aui-leaflet-zoom-control></aui-leaflet-zoom-control>
  </div>
  <div>Content displayed in sidebar</div>
</aui-leaflet>

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)
• addVectorLayer(config: LeafletLayer): adds a vector layer to the map. When passing the URL of the VectorTileServer, you don't need to suffix it with {z}/{y}/{x}.pbf, the following URL would work: https://tiles.arcgis.com/tiles/1KSVSmnHT2Lw9ea6/arcgis/rest/services/basemap_antwerpen_met_labels_20220218/VectorTileServer (Also the style that is provided under ../../VectorTileServer/resources/styles will be used by default.) See esri-leaflet-vector for more information.
• 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.

Contributing

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