Location leaflet picker Smart Widget UI package (Angular)

Usage no npm install needed!

<script type="module">
  import acpaasUiWidgetsNgxLocationPickerLeaflet from 'https://cdn.skypack.dev/@acpaas-ui-widgets/ngx-location-picker-leaflet';


Location Picker with Leaflet Smart Widget UI (Angular)

This is the Angular 6+ UI for a Smart Widget implementing a picker field to choose a location (street, address or point of interest) in combination with Leaflet. It is matched by a corresponding back-end service which is needed when running it in remote mode. A default implementation for selecting locations in Antwerp is provided.


There is a demo app, see below for instructions on running it.

How to use


> npm install @acpaas-ui-widgets/ngx-location-picker-leaflet


A BFF service should be running (see demo app instructions below for how to start one).

Import the component in your module:

import { LocationPickerLeafletModule } from '@acpaas-ui-widgets/ngx-location-picker-leaflet';

  imports: [

In the index.html, include the core branding stylesheet:

<link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/4.1.1/main.min.css">

For projects that are still using Angular 5, we are maintaining a v1 branch, which will still receive bug fixes if needed.

> npm install @acpaas-ui-widgets/ngx-location-picker-leaflet"<2.0.0"

In your template:

<aui-location-picker-leaflet class="widget"

(replace the url of the BFF service)

In the component code:

class YourComponent {

    addressResolvedCallback = (location) => {


Every value in the backing list must have a unique id.

Supported attributes

  • locationPickerUrl: (string) required URL of the back-end service feeding this widget
  • coordinatesTriggerSubject: (BehaviorSubject({ lat: number, lng: number })) can be used to trigger an external location change
  • coordinatesTrigger: (Object({ lat: number, lng: number })) when set will retrieve location by coordinates
  • locationPickerEndpoint: (string) when /api/location is not default endpoint
  • coordinatesEndpoint: (string) when /api/coordinates is not default endpoint
  • useExternalOffset: (boolean) wether or not to use the default location as offset


  • locationChange: locationItem model that is triggered when the current value is changed (or cleared)
  • mapLocationChange: a [number,number] object with the marker position that is triggered each time the map moves


The back-end service implements the following protocol:

  • GET /path/to/endpoint?search=...&types=...
  • search: the text that the user typed on which to match
  • types: a comma-separated list of types to return, default value = "street,number,poi"
  • result: JSON-encoded array of LocationPickerV1Value objects

Run the demo app

> npm install
> npm start

Browse to localhost:4200

To use this widget, you will also need to run the backing service.


We welcome your bug reports and pull requests.

Please see our contribution guide.


This project is published under the MIT license.