Angular Leaflet Light

Angular Leaflet Light

NPM

Travis CI Codacy Badge semantic-release

Quality Coverage Status Circle CI

dependencies devdependencies

This project aims at providing a leaflet integration for angularjs.

Please show me examples

Example 1: Default Source

Example 2: sync center&zoom Source

Example 3: geojson Source

How to install

install using npm

npm install --save angular-leaflet-light

create example.js file

angular.module('MyApp', ['angular-leaflet']);

create index.html file

<html>
    <head>
        <title>angular leaflet default</title>
        <link rel="stylesheet" href="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="https://npmcdn.com/angular@1.5.5/angular.js"></script>
        <script type="text/javascript" src="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script>

        <script type="text/javascript" src="node_modules/angular-leaflet-light/dist/angular-leaflet.js"></script>

        <script type="text/javascript" src="example.js"></script>
        <style type="text/css">
        #map {
            height: 500px;
        }
        </style>
    </head>
<body ng-app="example" ng-strict-di ng-cloak>
    <leaflet></leaflet>
</body>
</html>

Why do not use angular-leaflet from tombatossals ?

The first integration of leaflet in angular has been done by David Rubert aka tombatossals:

https://github.com/tombatossals/angular-leaflet-directive

Now this project is maintains and updated by the famous angular-ui team:

https://github.com/angular-ui/ui-leaflet

So why should I do it again ? Because both provide something that is not leaflet.

Theses projects provides advanced integration into angular but ...

  • geojson (why the hell should I have only one geojson)
  • slow on mobile (may be because there are lots of watchers on quite big objects)
  • hard to customize (try to create a directive that wrap it...)

I have use tombatossals's implementation on many project before that time where I find how I would like it to be.

So what is angular leaflet light ?

A simple directive that display a map and provide a callback with the map object, so you can do what ever you want.

A simple service add some common utils to handle things like compile popup with your data from the scope + default settings for all leaflet maps (using in the init so no watcher on it).

<leaflet id="mymap" on-map-initialized="customizeMyMap(map)"></leaflet>

You can also access the map using the service:

leafletService.data.mymap;