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
• Single marker example
• Marker addition example
• Marker with label example
• Markers example
• Marker groups example
• Polyline example
• Tile changer example
• Legend example
• GeoJson example
• Simple layers example
• Layers example
• Events example
• Overlays example
• Google Maps 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.1 (2013-12-22)

Bug Fixes

• build:
  • Solved a problem with the render of the Google Maps Layer, reported by @pwoloszu (73f17c0b)
  • Removed the center undefined log message as noted by @ngoldman here: https://git (a41e4efb)
• grunt: Added the e2e protractor tests to the Grunt watch cycle. (95ac1831)
• libraries: Updated Leaflet.markercluster to version 0.4 on bower.json. Thanks to @Hyzhak fo (a7adada0)
• test: Updated e2e tests to pass the jshint validations (acee2b02)
• tests: Some code updates to the e2e tests (5e47141b)

Features

• examples: Make the buttons toggable on the marker-groups-example.html made by @yagoferrer (0699cf7b)
• test:
  • Added a test for the googlemaps-example.html (98f68c0a)
  • Added an e2e test to the custom-parameters-example.html (3ce6a721)
  • Completed e2e tests for the bounds example. (1c40d605)

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