Tiny LeafletJS map component for your AngularJS apps
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
examples Release version 0.1.0 Sep 9, 2016
src Upgrade to work with Leaflet 1.0 and Angular 1.6 Dec 9, 2016
.npmignore Add .npmignore Sep 6, 2016
Gruntfile.js Release version 0.1.0 Sep 9, 2016
README.md Release version 0.1.1 Dec 9, 2016
bower.json Release version 0.1.1 Dec 9, 2016


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.


Install with Bower and include script in index.html:

bower install tiny-leaflet-directive

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

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

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

<tld-map id="map" tld-options="::mapOptions" style="width:100%; height:480px;"></tld-map>

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:

$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.


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


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.


2016-12-09 Version 0.1.1

  • 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+

2016-09-09 Version 0.1.0

  • Rewritten angular.directive to angular.component
  • WARNING: DOM of this component has changed, make sure to check/update your CSS (from <div id="map" class="tld-map"></div> to <tld-map id="map"><div class="tld-map"></div></tld-map>)

2016-09-06 Version 0.0.4

  • Published to NPM