Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
ui-leaflet
Advanced tools
Readme
##Why the fork?
While we are grateful for all the original work at 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.
AngularJS directive for the Leaflet Javascript Library. This software aims to easily embed maps managed by Leaflet on your project.
Browse all the examples added by the community to learn about the directive and its possibilities.
See https://angular-ui.github.com/ui-leaflet
Include 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.
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
}
});
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):
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:
<leaflet defaults="defaults" lf-center="center" height="480px" width="640px"></leaflet>
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:
<leaflet id="mymap" defaults="defaults" lf-center="center" height="480px" width="640px"></leaflet>
And then you can use this id in getMap()
:
angular.module('myModule').controller('MapController', ['$scope', 'leafletData',
function($scope, leafletData) {
leafletData.getMap('mymap').then(function(map) {
L.GeoIP.centerMapOnPosition(map, 15);
});
}
]);
FAQs
ui-leaflet - An AngularJS directive to easily interact with Leaflet maps
The npm package ui-leaflet receives a total of 904 weekly downloads. As such, ui-leaflet popularity was classified as not popular.
We found that ui-leaflet demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.