# ui-leaflet
> ui-leaflet - An AngularJS directive to easily interact with Leaflet maps
Latest version **1.0.3** (published 2017-01-26) · MIT license · 0 weekly downloads
## Install
```sh
npm install ui-leaflet
pnpm add ui-leaflet
yarn add ui-leaflet
bun add ui-leaflet
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2017-01-26 |
| First published | 2015-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| Author | https://github.com/angular-ui/ui-leaflet/graphs/contributors |
| Maintainers | elesdoar, nmccready, zacronos |
| Keywords | angularjs, javascript, directive, leaflet, angular-ui, cli |
## Links
- npm: https://www.npmjs.com/package/ui-leaflet
- Repository: https://github.com/angular-ui/ui-leaflet
- Homepage: http://angular-ui.github.io/ui-leaflet/
- Issues: https://github.com/angular-ui/ui-leaflet/issues
- npm.io page: https://npm.io/package/ui-leaflet
## Dependencies (3)
- [angular](https://npm.io/package/angular.md) 1.x
- [leaflet](https://npm.io/package/leaflet.md) 0.7.x
- [angular-simple-logger](https://npm.io/package/angular-simple-logger.md) ~0.1.4
## Alternatives
- [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads
- [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads
- [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads
- [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads
- [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads
## Recent versions
- 1.0.3 (latest) — 2017-01-26
- 2.0.0 — 2016-10-05
- 1.0.2 — 2016-09-21
- 1.0.1 — 2016-06-08
- 1.0.0 — 2015-10-29
## README
# Angular Leaflet
##Why the [fork](https://github.com/tombatossals/angular-leaflet-directive)?
While we are grateful for all the original work at [tombatossals/angular-leaflet-directive](https://github.com/tombatossals/angular-leaflet-directive). We need to be able to operate as an organization to respond to issues, pull-requests and other various items quicker. We need to be able to add other developers as admins easier via group permissions via github orgs. Lastly this project needs to be more credible via being a group / org.
## Goal
[AngularJS](http://angularjs.org/) directive for the [Leaflet](http://www.leafletjs.com/) Javascript
Library. This software aims to easily embed maps managed by Leaflet on your project.
[](https://gitter.im/angular-ui/ui-leaflet?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://travis-ci.org/angular-ui/ui-leaflet) [](https://david-dm.org/angular-ui/ui-leaflet)
[](https://david-dm.org/angular-ui/ui-leaflet) [](http://angular-ui.github.io/ui-leaflet/coverage/PhantomJS%201.9.7%20%28Linux%29/lcov-report/dist/ui-leaflet.js.html)
## Examples
[Browse all the examples](http://angular-ui.github.io/ui-leaflet/examples/0000-viewer.html) added by the community to learn about the directive and its possibilities.
## Documentation
See https://angular-ui.github.com/ui-leaflet
## How to use it
Include [angular-simple-logger](https://github.com/nmccready/angular-simple-logger) before Angular-Leaflet js files. Logger gets installed as a requirement of Angular-Leaflet with `bower install` or `npm install`. Note if your using the browser to load it without CommonJS (browserify, webpack) please use angular-simple-logger.js (not index.js) .
Include the `ui-leaflet` dependency on your Angular module:
```
var app = angular.module('demoapp', ['nemLogging','ui-leaflet']);
```
After that, you can change the default values of the directive on
your angular controller. For example, you can change the tiles source, the
maxzoom on the Leaflet map or the polyline path properties.
```javascript
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:
```javascript
angular.extend($scope, {
center: {
lat: 51.505,
lng: -0.09,
zoom: 8
}
});
```
If you need to run any method on the map object, use `leafletData` as following (notice the map object is returned in a form of a promise):
```javascript
angular.module('myModule').controller('MapController', ['$scope', 'leafletData',
function($scope, leafletData) {
leafletData.getMap().then(function(map) {
L.GeoIP.centerMapOnPosition(map, 15);
});
}
]);
```
Finally, you must include the markup directive on your HTML page:
```html
```
If you want to have more than one map on the page and access their respective map objects, add an *id* attribute to your leaflet directive in HTML:
```html
```
And then you can use this id in `getMap()`:
```javascript
angular.module('myModule').controller('MapController', ['$scope', 'leafletData',
function($scope, leafletData) {
leafletData.getMap('mymap').then(function(map) {
L.GeoIP.centerMapOnPosition(map, 15);
});
}
]);
```
---
_Source: https://npm.io/package/ui-leaflet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._