ember-leaflet-pm

Use leaflet-geoman (used to be leaflet.pm) in Ember with ember-leaflet to create and edit geometry layers.

Compatibility

• Ember.js v3.12 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Installation

ember install ember-leaflet-pm

Usage

<LeafletMap … as |layers|>
  …
  <layers.pm-control />
</LeafletMap>

LeafletPmControl exposes all options of the leaflet-geoman toolbar. In addition the pm map events pm:drawstart, pm:drawend and pm:create are available on this component in the ususal ember-leaflet fashion (@onPm:drawstart={{action "someAction"}}). Language can be set with the lang property (@lang="de").

If you want to be able to edit existing layers and work with the modified geometries (i.e. store them in your backend), use the PmEnabledLayer mixin on the required layer type. This brings support for the pm layer events like pm:edit or pm:vertexadded as well as the pmIgnore option.

For example:

import MarkerLayer from 'ember-leaflet/components/marker-layer';
import PmEnabledLayer from 'ember-leaflet-pm/mixins/pm-enabled-layer';
 
export default MarkerLayer.extend(PmEnabledLayer);

<LeafletMap … as |layers|>
  <layers.marker-layer-pm @location={{coordinates}} @onPm:edit={{action "featuredEdited"}} />
  <layers.pm-control />
</LeafletMap>

Directly interacting with leaflet-geoman is not supported, yet.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.