Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Using the RESTful Map API together with HERE Maps API

From Wiki
Jump to: navigation, search

In short the HERE Maps APIs allow you to integrate HERE Maps into your web pages. The HERE Maps API offers a variety of essential map functionality out of the box like, panning, zooming and support for W3C positioning built in to modern browsers. However in some situations it is just enough to show the map image. This is where the RESTful Map API comes into play.

The RESTful Map API is light weight, but full-blown, offering for easy access of map data. Map data is served as a single image, which makes it highly compatible with variety of devices. You don’t even need JavaScript so show the map.

To maximize the compatibility and to reduce the time to load a usable experience, you can combine these two APIs. JavaScript is not supported on some mobile devices browsers which is not ideal if you are creating content for a mobile friendly website. One way to circumvent this problem is by having a plain map image served up on the page initially, then asynchronously load the HERE Maps API for JavaScript thereafter. The experience will degrade gracefully for users who do not have JavaScript available.

Firstly load the static image as shown:

<div id="mapContainer" style="width:540px; height:334px;">
<img id='HereStaticMap' src=",15.5&amp;h=334&amp;w=540&amp;z=4&amp;nord&amp;nodot&amp;sb=k"
alt="Map of Europe" />

When the asynchronously loaded map has finished loading, ensure the map is in the correct location, and tidy up the <img> element from the DOM as shown.

function afterHereMapLoad(map){
// This matches the static map:
map.set("center", new nokia.maps.geo.Coordinate(50.5,15.5));
var marker = new[50.5,15.5]);

The following fully working example can be found at:

Note.pngNote: In the example above, the following RESTful Map API parameters have been set to match the definition of the dynamic HERE Map

  • c - Centre Point 50.5° latitude 15.5 ° longitude
  • h - Height 334 pixels, same as the height style of the map container <div>
  • w - width 540 pixels, same as the width style of the map container <div>
  • z - zoom level 4, same as the map.
  • nord, nodot - The image should not attempt to redirect, no dot is required over the centre point.
  • appId and token - standard authentication parameters

Article Metadata
Code ExampleTested with
Devices(s): Internet Explorer, Google Chrome, Firefox, Opera
Platform(s): Web
Dependencies: HERE Maps 2.5.3
Keywords: HERE Maps, JavaScript, Map Image, RESTful
Created: isalento (17 Jan 2011)
Updated: jasfox (05 Jan 2012)
Last edited: jasfox (28 Nov 2013)
This page was last modified on 28 November 2013, at 12:02.
109 page views in the last 30 days.