angular-leaflet-directive

angular-leaflet-directive

AngularJS directive for the Leaflet Javascript Library. This software aims to easily embed maps managed by leaflet on your Leaflet project.

See some basic examples:

• Basic example
• Center example
• Center autodiscover example
• Custom parameters example
• Bounds example
• MaxBounds example
• Tiles example
• Tile zoom changer example
• Layers simple example
• Overlays simple example
• ImageOverlay simple example
• Google Maps example
• Paths Simple example
• Paths Types example
• Paths example
• Single marker example
• Marker with label example
• Marker with group clustering example
• Marker groups example
• Markers dynamic add/remove example
• Marker addition example
• Legend example
• GeoJson example
• Simple layers example
• Layers extended example
• Events example
• Overlays extended example
• Accessing the leaflet map object
• Accessing the leaflet map object of two maps

To see it in action, go to the main page where you can find more examples and some documentation:

• http://tombatossals.github.com/angular-leaflet-directive

How to use it

You must include the leaflet-directive dependency on your angular module:

var app = angular.module("demoapp", ["leaflet-directive"]);

After that, you can change the default values of the directive (if you want) on your angular controller. For example, you can change the tiles source, the maxzoom on the leaflet map or the polyline path properties.

angular.extend($scope, {
    defaults: {
        tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
        maxZoom: 14,
        path: {
            weight: 10,
            color: '#800000',
            opacity: 1
        }
    }
});

If you want to set the start of the map to a precise position, you can define the "center" property of the scope (lat, lng, zoom). It will be updated interacting on the scope and on the leaflet map in two-way binding. Example:

angular.extend($scope, {
    center: {
        lat: 51.505,
        lng: -0.09,
        zoom: 8
    }
});

Finally, you must include the markup directive on your HTML page, like this:

<leaflet defaults="defaults" center="center" height="480px" width="640px"></leaflet>

Changelog

v0.7.3 (2014-01-11)

The most important change of this release is the overhaul of the markers attribute, which has some implications to mantain backwards compatibility. The icon definition inside a marker must be done without calling explicitly Leaflet Icon creation function. So, instead of:

marker = {
    name: "example",
    icon: L.icon({
        ...
    })
}

We will use:

marker = {
    name: "example",
    icon: {
        ...
    }
}

You can take a look at the demo page to see examples of this change: http://tombatossals.github.io/angular-leaflet-directive/#!/examples/customized-markers

Features

• Gruntfile: Updated protractor-runner to allow running the e2e tests from various browsers f (01e9f0da)
• build:
  • Added the possibility to group the markers in MarkerCluster without using overla (0d35b2c6)
  • Moved all the event management functionality into leafletEvents service. (cd5fc09a)
  • Refactor paths attribute (c321784e)
• documentation:
  • Updated paths attribute documentation (082b16c4)
  • Started the paths attribute documentation (972cad1e)
• examples:
  • New example of layer+markers with markerclustering usage (d0230d07)
  • New examples of markers attribute. (753e509f)
  • Added a new and simplified paths example (2e991d73)
  • Added a new simplified example to the paths attribute (c380b742)
  • Added a new paths example: paths-simple-example.html (66bc6920)
  • All the examples dependencies linked to the bower_components folder. (d9b0cdbf)
• markers: The icon definition has ben changed to be an object of properties, not a Leaflet (b45df205)
• tests: Added a new E2E protractor tests for the paths-simple-example.html (c74c2314)

Bug Fixes

• paths: Solved a bug on the scope watching of the paths attribute. (0663b309)

<a name="v0.7.2"></a>