• Stars
    star
    284
  • Rank 142,185 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 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 the OpenLayers library

angular-openlayers-directive

Build Status semantic-release npm version


MAINTAINER NEEDED: Read more here


AngularJS directive for the OpenLayers (version 3) Javascript Library. This software allows you to embed maps managed by openlayers on your AnguarJS or OpenLayers project. It's a good starting point to learn the Openlayers API too.

Let's start with some basic examples. Look at the source code of the example to see all the code you need to embed a similar interactive map on our page.

You can take a look at the current documentation go get a more detailed explanation of how it works and what you can accomplish with this directive:

Install

Build the files yourself, download from bower

$ bower install angular-openlayers-directive --save

or from npm

$ npm install angular-openlayers-directive --save

Quick start: How to use it

First of all, load AngularJS and Openlayers(V3) in your HTML.

After that, you must include the openlayers-directive dependency on your angular module:

var app = angular.module("demoapp", ["openlayers-directive"]);

The default behaviour will show an OpenstreetMap layer and the zoom and attributions controls, but you can customize those default vaules to fit your needs. Furthermore, you can set a bi-directional update of values between the map and the variables of your controler. This way you can interact easily with the map. Example:

angular.extend($scope, {
    center: {
        lat: 51.505,
        lon: -0.09,
        zoom: 8
    }
});

Finally, you must include the markup directive on your HTML page, like this:

<openlayers ol-center="center" height="480px" width="640px"></openlayers>

Contributing

Contributions are more than welcome. Please refer to the contributions guidelines for more details on code style, development life-cycle etc.

More Repositories

1

angular-leaflet-directive

AngularJS directive to embed an interact with maps managed by Leaflet library
JavaScript
1,508
star
2

chords-db

String Instruments Chords Database.
JavaScript
358
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