Skip to content

AngularJS directives for the Nokia Here Maps Javascript API - An alternative to Google Maps

License

Notifications You must be signed in to change notification settings

lukemarsh/angular-here-maps

Repository files navigation

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="/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="/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:

  • Search open/closed issues, src examples (./examples), and gitter! Again please search!
  • issues w/ plnkrs get attention quicker

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

  • master: points to the active targeted next release branch (1.2.7)

About

AngularJS directives for the Nokia Here Maps Javascript API - An alternative to Google Maps

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •