• Stars
    star
    1,508
  • Rank 30,321 (Top 0.7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 11 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

AngularJS directive to embed an interact with maps managed by Leaflet library

Angular Leaflet Directive

AngularJS directive for the Leaflet Javascript Library. This software aims to easily embed maps managed by Leaflet on your project.

tombatossals/angular-leaflet-directive

This is a personal project, which has been coded by me helped by many people for some years. I'm evolving it frequently, actually I'm making the code transition to Leaflet 1.0 and Angular 2. If you need enterprise for older versions, sorry, I can't give you more support that my spare time allows me. If you want to help with the actual code it would be really appreciated, but first of all, please, read the * CONTRIBUTING documentation

Build Status DependenciesDependencies Coverage Status semantic-release

angular-ui

If you need better response time with your doubts and needs with the code of version 0.9.0, take a look at the angular-ui fork of this project, it's lead by really awesome developers which have helped me evolving the project for some time.

Build Status DependenciesDependencies Coverage Status

Examples

Browse all the examples added by the community to learn about the directive and its possibilities.

Documentation

Still working on it. In the meantime, take a look at this URL for some minimal descriptions: https://tombatossals.github.com/angular-leaflet-directive

Getting started/How to use it

Include the leaflet-directive dependency on your Angular module:

var app = angular.module('demoapp', ['leaflet-directive']);

After that, you are ready to rock. Just define some objects with the basic configuration you want reflected in your map and the rendered map will obey you. Also, you can modify that configuration dinamically if you need to. Let's see an example.

center

If you want to set the map view to a precise position, you can define the "center" property of the scope (lat, lng, zoom). It will also 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. One important thing is that you must define the map width&height, as attributes of the directive or with CSS code, as you wish.

<leaflet 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" lf-center="center" height="480px" width="640px"></leaflet>

More Repositories

1

chords-db

String Instruments Chords Database.
JavaScript
358
star
2

angular-openlayers-directive

AngularJS directive to embed an interact with maps managed by the OpenLayers library
JavaScript
284
star
3

react-chords

React library for easily generate guitar/ukulele SVG chords
JavaScript
157
star
4

luci-app-vpnc

Luci administration GUI for VPNC (Cisco VPN Concentrator Client)
Lua
13
star
5

angularjs-tutorial

Tutorial sencillo de uso de AngularJS
JavaScript
12
star
6

voz

Asterisk bash script to download, compile, install, and configure a guifi.net ready-to-use asterisk server
Shell
5
star
7

git-puesto-en-practica

Presentaci贸n HTML de iniciaci贸n a Git
JavaScript
4
star
8

troncales

Routers real-time bandwith meter graph
JavaScript
3
star
9

godot-examples

Godot 3 examples repository
GDScript
3
star
10

powermeter

Power consumption measurement and management
JavaScript
3
star
11

openwrt-vpnc

Instalaci贸n y configuraci贸n de un router con OpenWRT y VPNC
CSS
3
star
12

tombatossals-blog

My blog
JavaScript
2
star
13

openwrt-repetidor-wireless

Configurar un router con OpenWRT en modo repetidor Wireless
2
star
14

gps

Wireless Link Monitoring Application
JavaScript
2
star
15

love2d-examples

Love2D easy to understand examples
Lua
2
star
16

squid_guifi_splash

Splash screen for a Squid proxy (guifi.net edition)
JavaScript
2
star
17

node-openid-auth-sample

Example application which adds an authentication framework template for a node.js application
JavaScript
2
star
18

try_git

1
star
19

extjs4-intro

Presentaci贸n simple de introducci贸n a ExtJS4
JavaScript
1
star
20

gestiondeltiempo

Presentaci贸n de Google Calendar orientada a la gesti贸n eficiente del tiempo en el trabajo
HTML
1
star
21

coverama

React + Horizon Dashboard
JavaScript
1
star
22

iparty-guifi

Presentaci贸n de guifi.net para la iParty 2012
JavaScript
1
star
23

geography

Geography learning game
JavaScript
1
star
24

react-redux-horizon-starter

React, Redux, Horizon, Oauth authentication, Webpack and ES6 starter kit :)
JavaScript
1
star
25

movies

Backbone.js movies presenter
JavaScript
1
star
26

unimajors

Presentaciones del curso de la Universidad para Mayores de la UJI
JavaScript
1
star
27

efergy-elite-decode

Go program for decoding a RTL-SDR frame read from an Efergy Elite 1.0
C
1
star
28

micronautas

Micronautas.com site
JavaScript
1
star
29

rinspect

Inspection utility of the OSPF routing table of a router connected to the guifi.net network
JavaScript
1
star