Tiny Leaflet Directive

A tiny JavaScript module to embed LeafletJS map in your AngularJS application.

It is a super simplified version of great angular-leaflet-directive
module.

Usage

Install with Bower and include script in index.html:

``bash
bower install tiny-leaflet-directive
`

Include tiny-leaflet-directive module in your app dependencies:

`javascript
angular.module('myApp', ['tiny-leaflet-directive']);
`

Directives and services of this module are prefixed with tld.
Include the directive in your template like this:

`html

`

There is one parameter tld-options which is basically an object with default
Leaflet map options. Full list of possible options can be found in LeafletJS Docs.
An example options, that specifies default view and base layer may look like this:

`javascript
$scope.mapOptions = {
center: [49.2, 16.6],
zoom: 10,
layers: [L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {})]
};
`

The directive element has class tld-map to simplify styling with CSS.

You can include tldMapService in your application and use it's getMap(id) function
to get the real Leaflet Map object and play with it.

Dependencies

This module depends only on AngularJS and LeafletJS. Run bower install to install
both dependencies.

Examples

* Simple map, see in Plunker
* Own map service, see in Plunker

To view the examples locally, clone the repo, run bower install and open them in your favourite browser.

CleverAnalytics uses this module in production. Feel free to try the demo at https://demo.cleveranalytics.com.

Changelog

$3

* Rewrite tldMap controller to work with Angular 1.6
* Update bower.json to enable Leaflet 1.x
* Still backwards compatible with Leaflet 0.7.x and Angular 1.5+

$3

* Rewritten angular.directive to angular.component
* WARNING: DOM of this component has changed, make sure to check/update your CSS (from

to

`)

$3

* Published to NPM