This is a plugin for Aurelia providing a CustomElement <leaflet>.

Examples: http://benib.github.io/aurelia-leaflet/

jspm install github:benib/aurelia-leaflet

You need to add the plugin to your aurelia configuration like this:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('benib/aurelia-leaflet');

  aurelia.start().then(a => a.setRoot());
}

You need to include Leaflets CSS somehow, one way is to load it from a CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.2/leaflet.css">

You want to make sure the map container div gets a height like this:

  .leaflet-container {
    height: 500px;
  }

From there on you can use the CustomElement <leaflet> like this:

  <leaflet></leaflet>

This is the most basic usage and gives you a map of Zurich at zoom 13 with the OpenStreetMap tiles from openstreetmap.org. This is probably not what you want, so here are the options you got:

  <leaflet
    map-options.bind="mapOptions"
    layers.bind="layers"
    map-events.bind="leafletMapEvents"
    with-layer-control.bind="withLayerControl"
    with-scale-control.bind="withScaleControl"
  >
  </leaflet>

Bind this to an object with options from http://leafletjs.com/reference.html#map-options. They will get merged with the default options:

{
  center: {
    lat: 47.3686498,
    lng: 8.53918250,
  },
  zoomLevel: 13
}

So if you don't want a map centered at Zurich, provide at least another center. If you change center, zoom, or maxBounds after the map is loaded, the map will get changed, other property changes are not yet implemented. Open an issue or submit a PR if you need something else.

Layers is an object with information about the layers you want on your map. Whenever you change it, the layers available on your map will change. Removed ones will get removed, new ones will get added. Have a look at the default layers object:

{
  base: [
    {
      id: 'OSM Tiles',
      type: 'tile',
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      options: {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }
    }
  ],
  overlay: []
}

Alright, this gives you a one baseLayer with tiles from openstreetmap.org. Note that the layers are divided in base and overlay layers. Every Layer needs to have an id property. This id is used as the key in the LayersControl, if you add one. If not given, it is set to the url. If no url is given (some layers don't have one), an exception is thrown.

Note that there is a type property. "tile" is the default value and could be omitted. The other types available are: marker, popup, wms, canvas, imageOverlay, polyline, multiPolyline, polygone, multiPolygon, rectangle, circle, circleMarker, layerGroup, featureGroup and geoJSON. If you know Leaflet, you see that these are all the Layers available in Leaflet. They are documented here: http://leafletjs.com/reference.html. The options property of your layer config will get passed to the respective constructor for the given layer type.

For more information on what to you need to configure either read the leaflet docs for these layers and guess what you need to configure, or read src/helpers/layer-factory.js.

Bind this to an array like ['click', 'load']. The array should consist of any of the map-events documented here: http://leafletjs.com/reference.html#map-events. Listeners for these will get added to the map object and will publish an event using aurelias EventAggregator in the aurelia-leaflet channel. To listen to them, you want to import and inject the EventAggregator like this:

import {EventAggregator} from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class App {
  
  constructor(EventAggregator) {
    this.eventAggregator = EventAggregator;

    this.eventAggregator.subscribe('aurelia-leaflet', (payload) => {
      console.log(payload);
    });
  }
}

The payload you receive will be the event from Leaflet with one additional property map that is the instance of Leaflet.map.

If this is false or not set there will be no layer control. Otherwise the value of this property will get passed as the options parameter to L.control.layers as documented here: http://leafletjs.com/reference.html#control-layers.

If this is false or not set there will be no scale control. Otherwise the value of this property will get passed as the options parameter to L.control.scale as documented here: http://leafletjs.com/reference.html#control-scale.

Read the information about map-events. Make sure you register the load event, subscribe to the channel aurelia-leaflet in aurelias EventAggregator and get a payload with a property map that is the map object after leaflet fires to load event (after first time center and zoom are set).

To build the code, follow these steps.

1. Ensure that NodeJS is installed. This provides the platform on which the build tooling runs.
2. From the project folder, execute the following command:

npm install

3. Ensure that Gulp is installed. If you need to install it, use the following command:

npm install -g gulp

4. To build the code, you can now run:

gulp build

5. You will find the compiled code in the dist folder, available in three module formats: AMD, CommonJS and ES6.

6. See gulpfile.js for other tasks related to generating the docs and linting.