lukemarsh / angular-here-maps

AngularJS directives for the Nokia Here Maps Javascript API - An alternative to Google Maps
MIT License
9 stars 11 forks source link

Angular Here Maps

AngularJS directives for Nokia Here Maps

For pull requests please see branching strategy below!

Master (1.2.7): Build Status

task board: Stories in Ready

Gitter chat

 

Getting started

This is a set of directives and services for AngularJS ~1.0.7+, ^1.2.2+.

Installation

Add Angular:

<script src="https://github.com/lukemarsh/angular-here-maps/raw/master/path/to/bower_components/angular/angular.min.js" type="text/javascript"></script>

Include the here-maps-api JS and CSS files

<link rel="stylesheet" href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />

<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-pano.js" type="text/javascript" charset="utf-8"></script>

Retrieve the module from bower:

bower install angular-here-maps --save

Include the angular-here-maps JS (after the angular.js JS and all the Here Maps JS library files):

<script src="https://github.com/lukemarsh/angular-here-maps/raw/master/path/to/bower_components/angular-here-maps/build/angular-here-maps.min.js" type="text/javascript"></script>

Make your application depend on it:

var app = angular.module('myApp', ['angular-here-maps']);

Add some configuration settings:

.config(function(MapConfigProvider) {
    MapConfigProvider.setOptions({
        appId: 'your Here Maps app id',
        appCode: 'your Here Maps app code',
        libraries: 'ui,mapevents,pano',
        pixelRatio: 2, // Optional (Default: 1)
        pixelPerInch: 320 // Optional (Default: 72)
    });
})

include the map directive in your html:

<map zoom="map.zoom" center="map.center"></map>

default center and zoom for the maps:

$scope.map = {
  zoom : 14,
  center : { 
    lng: -0.135559,
    lat: 51.513872
  }
};

If you plan to hack on the directives or want to run the example, first thing to do is to install NPM dependencies:

npm install #note bower install is run on post install 

Building

To build the library after you made changes, simply run grunt:

grunt

Running in Development mode

To run the directives in development mode, just run

grunt serve

and your browser will automatically open on http://localhost:9002.

Running the example

To run the example page, just run

grunt serve:examples

and your browser will automatically open on http://localhost:9000.

Contributing

Filing issues: Prior to submiting an issue:

Pull requests more than welcome! If you're adding new features, it would be appreciated if you would provide some docs about the feature. This can be done either by adding a card to our Waffle.io board, forking the website branch and issuing a PR with the updated documentation page, or by opening an issue for us to add the documentation to the site.

Branching Scheme