{"id":13701565,"url":"https://github.com/angular-ui/ui-leaflet","last_synced_at":"2025-10-22T21:24:07.304Z","repository":{"id":57385243,"uuid":"45187834","full_name":"angular-ui/ui-leaflet","owner":"angular-ui","description":"AngularJS directive to embed an interact with maps managed by Leaflet library","archived":true,"fork":false,"pushed_at":"2018-01-10T16:17:39.000Z","size":34838,"stargazers_count":314,"open_issues_count":220,"forks_count":134,"subscribers_count":26,"default_branch":"master","last_synced_at":"2024-12-24T13:11:35.131Z","etag":null,"topics":["angular","gis","leaflet","leaflet-directive","leaflet-map","maps","ui-leaflet"],"latest_commit_sha":null,"homepage":"http://angular-ui.github.io/ui-leaflet","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angular-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-29T14:19:47.000Z","updated_at":"2024-10-06T09:37:08.000Z","dependencies_parsed_at":"2022-09-11T07:00:55.048Z","dependency_job_id":null,"html_url":"https://github.com/angular-ui/ui-leaflet","commit_stats":null,"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-leaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-leaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-leaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-leaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-ui","download_url":"https://codeload.github.com/angular-ui/ui-leaflet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234369981,"owners_count":18821364,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","gis","leaflet","leaflet-directive","leaflet-map","maps","ui-leaflet"],"created_at":"2024-08-02T20:01:49.154Z","updated_at":"2025-09-27T01:30:54.063Z","avatar_url":"https://github.com/angular-ui.png","language":"JavaScript","readme":"# Angular Leaflet\n\n![](https://cdn.rawgit.com/angular-ui/ui-leaflet/master/logo.svg)\n\n## Why the [fork](https://github.com/tombatossals/angular-leaflet-directive)?\n\nWhile 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.\n\n## Master Branch State\n\nPlease note the master branch is currently in a \"in-progress state\" and is not suitable for use at this point. We are trying\nbreak up the library to be more unix / plugin like. This will reduce the burden of constant changes to the core repo (this repo)\nfor each and every unforseeable plugin that leaflet has. Therefore, the new usage plugins will require developers (angular-ui or not)\nto create specific angular directives, services, factories, and etc to extend the main ui-leaflet directive. Where ui-leaflet\nwould be the main dependency.\n\nExamples:\n\n- [ui-leaflet-draw](https://github.com/angular-ui/ui-leaflet-draw) leaflet draw implemented as a directive\n- [ui-leaflet-layers](https://github.com/elesdoar/ui-leaflet-layers) Most layer directive logic outsourced to support all random layer plugins.\n\nHow to extend:\nCreate new directives, factories, and services specific to plugins. Use the decorator pattern to extend existing services, factories and directives. Specifically see [ui-leaflet-draw](https://github.com/angular-ui/ui-leaflet-draw) as it decorates ui-leaflet.\n\nMore about decorators:\n\n- [Ben Nadel Decorating (Monkey Patching)](http://www.bennadel.com/blog/2775-monkey-patching-the-q-service-using-provide-decorator-in-angularjs.htm)\n- [Ben Nadel - Using Module.decorator() In AngularJS 1.4 (new way)](http://www.bennadel.com/blog/2870-using-module-decorator-in-angularjs-1-4.htm)\n- [Jesus Rodriguez - Experiment: Decorating Directives](http://angular-tips.com/blog/2013/09/experiment-decorating-directives/)\n\n## Goal\n\n[AngularJS](http://angularjs.org/) directive for the [Leaflet](http://www.leafletjs.com/) Javascript\nLibrary. This software aims to easily embed maps managed by Leaflet on your project.\n\n[![Join the chat at https://gitter.im/angular-ui/ui-leaflet](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angular-ui/ui-leaflet?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge) [![CDNJS](https://img.shields.io/cdnjs/v/ui-leaflet.svg)](https://cdnjs.com/libraries/ui-leaflet)\n\n[![Build Status](https://travis-ci.org/angular-ui/ui-leaflet.png?branch=master)](https://travis-ci.org/angular-ui/ui-leaflet) [![Dependencies](https://david-dm.org/angular-ui/ui-leaflet.svg)](https://david-dm.org/angular-ui/ui-leaflet)\u0026nbsp;\n[![Dependencies](https://david-dm.org/angular-ui/ui-leaflet/dev-status.svg)](https://david-dm.org/angular-ui/ui-leaflet) [![Coverage\nStatus](https://coveralls.io/repos/angular-ui/ui-leaflet/badge.png?branch=master)](http://angular-ui.github.io/ui-leaflet/coverage/PhantomJS%201.9.7%20%28Linux%29/lcov-report/dist/ui-leaflet.js.html)\n\n\n## Examples\n\n[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.\n\n## Documentation\n\nSee https://angular-ui.github.com/ui-leaflet\n\n## How to use it\n\nInclude [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 that if you're using the browser to load it without CommonJS (browserify, webpack) please use angular-simple-logger.js (not index.js).\n\nInclude the `ui-leaflet` dependency on your Angular module:\n```\nvar app = angular.module('demoapp', ['nemLogging','ui-leaflet']);\n```\n\nAfter that, you can change the default values of the directive on\nyour angular controller. For example, you can change the tiles source, the\nmaxzoom on the Leaflet map or the polyline path properties.\n\n```javascript\nangular.extend($scope, {\n    defaults: {\n        tileLayer: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',\n        maxZoom: 14,\n        path: {\n            weight: 10,\n            color: '#800000',\n            opacity: 1\n        }\n    }\n});\n```\n\nIf you want to set the start of the map to a precise position, you can define\nthe \"center\" property of the scope (lat, lng, zoom). It will be updated\ninteracting on the scope and on the leaflet map in two-way binding. Example:\n```javascript\nangular.extend($scope, {\n    center: {\n        lat: 51.505,\n        lng: -0.09,\n        zoom: 8\n    }\n});\n```\n\nIf 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):\n\n```javascript\nangular.module('myModule').controller('MapController', ['$scope', 'leafletData',\n    function($scope, leafletData) {\n        leafletData.getMap().then(function(map) {\n            L.GeoIP.centerMapOnPosition(map, 15);\n        });\n    }\n]);\n```\n\nFinally, you must include the markup directive on your HTML page:\n```html\n\u003cleaflet defaults=\"defaults\" lf-center=\"center\" height=\"480px\" width=\"640px\"\u003e\u003c/leaflet\u003e\n```\n\nIf 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:\n\n```html\n\u003cleaflet id=\"mymap\" defaults=\"defaults\" lf-center=\"center\" height=\"480px\" width=\"640px\"\u003e\u003c/leaflet\u003e\n```\n\nAnd then you can use this id in `getMap()`:\n\n```javascript\nangular.module('myModule').controller('MapController', ['$scope', 'leafletData',\n    function($scope, leafletData) {\n        leafletData.getMap('mymap').then(function(map) {\n            L.GeoIP.centerMapOnPosition(map, 15);\n        });\n    }\n]);\n```\n","funding_links":[],"categories":["JavaScript","Uncategorized","Geospatial Library"],"sub_categories":["Uncategorized","JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-ui%2Fui-leaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-ui%2Fui-leaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-ui%2Fui-leaflet/lists"}