jquery.mobile.heremap

A jQuery Mobile plugin that makes it easier to include a HERE map in your app.

Installation

Download the latest release.
Unzip.
Copy jquery.mobile.heremap.min.js (smaller) or jquery.mobile.heremap.js (more readable) to your project directory.
Include the file in your HTML code, e.g. <script src="js/jquery.mobile.heremap.min.js"></script> after the jQuery Mobile JavaScript.

Prerequisites

In order to use HERE maps in you app you need to:

Acquire credentials on the HERE Developer Portal.
You will get an app id and app code.
Include the HERE JavaScript API (see code example below).
Configure the plugin with these credentials. This needs to happen after the inclusion of the plugin JS file, e.g.:

<script src="http://js.api.here.com/se/2.5.3/jsl.js?with=all"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script src="js/jquery.mobile.heremap.min.js"></script>
<script>
    $.mobile.heremap.app_id = 'your app id';
    $.mobile.heremap.app_code = 'your app code';
</script>

You can of course also put this code in an external file and reference this.

Basic Usage

For the most simple use case of just displaying a map you don't need to write any JavaScript code. In your HTML file include the widget like so:

<div id="map" data-role="heremap" data-center="52.41326,13.05006" data-zoomlevel="16"></div>

You can customize the map with the following data- attributes:

Attribute	Description	Example
`data-center`	the initial center of the map (latitude, longitude)	`data-center="52.5,13.3"`
`data-zoomlevel`	the initial zoom level (integer)	`data-zoomlevel="10"`
`data-basemaptype`	one of the available map types	`data-basemaptype="SATELLITE"`
`data-components`	a comma-separated list of UI components	`data-components="Behavior,ZoomBar"`

Advanced Usage

If you want to customize the map further (e.g. add markers, bind event listener), you can get a reference to the actual nokia.maps.map.Display instance using the getMap method:

$('#map').on('heremapready', configureMap);

function configureMap() {
    var map = $('#map').heremap('getMap');
    // do something with map here
}

Or, even simpler: The heremapready event listener can accept a reference to the map object passed as the second parameter:

$('#map').on('heremapready', configureMap);

function configureMap(event, map) {
    // do something with map here
}

License