Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular-leaflet-directive

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-leaflet-directive

angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps

  • 0.7.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5.7K
decreased by-6.91%
Maintainers
1
Weekly downloads
 
Created
Source

angular-leaflet-directive Build Status Dependency Status

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:

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

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>

Keywords

FAQs

Package last updated on 29 Dec 2013

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc