×
Namespaces

Variants
Actions
(Difference between revisions)

Using the RESTful Map API together with HERE Maps API

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - links)
jasfox (Talk | contribs)
m (Jasfox - Update links)
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Code Snippet]][[Category:Nokia Maps]][[Category:JavaScript]][[Category:HTTP]]
+
[[Category:HERE Maps]][[Category:JavaScript]][[Category:HTTP]][[Category:Code Examples]]
In short the Nokia Maps APIs allow you to integrate Nokia maps into your web pages.  
+
In short the HERE Maps APIs allow you to integrate HERE Maps into your web pages.  
The [http://developer.here.net/javascript_api Nokia 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.
+
The [http://developer.here.com/javascript_api 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.
 
However in some situations it is just enough to show the map image. This is where the RESTful Map API comes into play.
  
The [http://developer.here.net/rest_api 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.  
+
The [http://developer.here.com/rest_api 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 potentially reduce initial page load time, 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 only after the user clicks on the map the interactive Map is loaded. In this way you can potentially save on initial load time and be reassured that all of your visitors are able to see 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:
 
<code javascript>
 
<code javascript>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
<div id="mapContainer" style="width:540px; height:334px;">
<html xmlns="http://www.w3.org/1999/xhtml">
+
     <img id='HereStaticMap' src="http://m.nok.it/?c=50.5,15.5&amp;h=334&amp;w=540&amp;z=4&amp;nord&amp;nodot&amp;sb=k"
<head>
+
    alt="Map of Europe" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
+
<title>RESTful Map API Image with Nokia Map API for JavaScript</title>
+
<!-- No additional support required here. -->
+
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js"></script>
+
<script type="text/javascript">
+
/*<![CDATA[*/
+
/////////////////////////////////////////////////////////////////////////////////////
+
// Don't forget to set your API credentials
+
//
+
// Replace with your appId and token which you can obtain when you
+
// register on http://api.developer.nokia.com/
+
//
+
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
+
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
+
//
+
/////////////////////////////////////////////////////////////////////////////////////
+
/*]]>*/       
+
</script>
+
<script type="text/javascript">
+
function showFullMap(){
+
    var mapContainer = document.getElementById("mapContainer");
+
    mapContainer.innerHTML = "";
+
    // Create a map inside the map container DOM node
+
    var map = new nokia.maps.map.Display(mapContainer, {
+
        zoomLevel: 4, //zoom level for the map
+
        center: [50.5,15.5], // center coordinates
+
        components : [
+
          new nokia.maps.map.component.ZoomBar(),
+
          new nokia.maps.map.component.Behavior(),
+
          new nokia.maps.map.component.TypeSelector(),
+
          new nokia.maps.map.component.Overview(),
+
          new nokia.maps.map.component.ScaleBar()]                 
+
    });
+
}
+
</script>
+
</head>
+
<body>
+
  <div id="mapContainer" style="width:540px; height:334px;">
+
     <img src="http://m.nok.it/?c=50.5,15.5&amp;h=334&amp;w=540&amp;z=4&amp;nord&amp;nodot&amp;sb=k&amp;appId=YOUR APP ID GOES HERE&amp;token=YOUR AUTHENTICATION TOKEN GOES HERE" onclick="showFullMap();" alt="Map of Europe" />
+
 
   </div>
 
   </div>
</body>
 
</html>
 
 
</code>
 
</code>
  
{{Note | In the example above, the following RESTful Map API parameters have been set to match the definition of the dynamic Nokia Map
+
When the [[HERE Maps API - Asynchronous Loading|asynchronously loaded]] map  has finished loading, ensure the map is in the correct location, and  tidy up the {{Icode|&lt;img&gt;}} element from the DOM as shown.
 +
 
 +
<code javascript>
 +
function afterHereMapLoad(map){
 +
// This matches the static map:
 +
// http://m.nok.it/?c=50.5,15.5&h=334&w=540&z=4"
 +
map.set("center", new nokia.maps.geo.Coordinate(50.5,15.5));
 +
map.setZoomLevel(4);
 +
var marker = new nokia.maps.map.StandardMarker([50.5,15.5]);
 +
map.objects.add(marker);
 +
 +
$('#HereStaticMap').remove();
 +
}
 +
</code>
 +
 
 +
The following fully working example can be found at:
 +
 
 +
http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/advanced-examples/combining-with-here-static-maps.html
 +
 
 +
 
 +
{{Note | In the example above, the following RESTful Map API parameters have been set to match the definition of the dynamic HERE Map
 
* {{Icode|c}} - Centre Point 50.5&deg; latitude 15.5 &deg; longitude
 
* {{Icode|c}} - Centre Point 50.5&deg; latitude 15.5 &deg; longitude
* {{Icode|h}}  - Height 334 pixels, same as the height style of the map container {{Icode|&lt;div&gt;}}
+
* {{Icode|h}}  - Height 334 pixels, same as the height style of the map container {{Icode|&lt;div&gt;}}
 
* {{Icode|w}} - width 540 pixels, same as the width style of the map container {{Icode|&lt;div&gt;}}
 
* {{Icode|w}} - width 540 pixels, same as the width style of the map container {{Icode|&lt;div&gt;}}
 
* {{Icode|z}}  - zoom level 4, same as the map.
 
* {{Icode|z}}  - zoom level 4, same as the map.
* {{Icode|nord, nodot, sb}} -  The image should not attempt to redirect, no dot is required over the centre point and a scale bar is required.
+
* {{Icode|nord, nodot}} -  The image should not attempt to redirect, no dot is required over the centre point.
 
* {{Icode|appId}} and {{Icode|token}}  - standard authentication parameters
 
* {{Icode|appId}} and {{Icode|token}}  - standard authentication parameters
 
}}
 
}}
  
{{ArticleMetaData
+
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode=  [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/advanced-examples/combining-with-here-static-maps.html combining-with-here-static-maps.html]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= Internet Explorer, Google Chrome, Firefox, Opera
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 
|platform= Web
 
|platform= Web
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= HERE Maps 2.5.3
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= Nokia Maps, JavaScript, Map Image, RESTful
+
|keywords= HERE Maps, JavaScript, Map Image, RESTful
|dependencies=Nokia Maps 2.2.3
+
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
|devices= Internet Explorer, Google Chrome , Firefox, Opera
+
|translated-by= <!-- [[User:XXXX]] -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|translated-from-title= <!-- Title only -->
|review-timestamp=<!-- After re-review: YYYYMMDD -->
+
|translated-from-id= <!-- Id of translated revision -->
|update-by=   [[User:jasfox]]  
+
|review-by= <!-- After re-review: [[User:username]] -->
|update-timestamp=20120105
+
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= [[User:jasfox]]
 +
|update-timestamp= 20120105
 
|creationdate= 20110117
 
|creationdate= 20110117
|author= [[User:isalento]]
+
|author= [[User:isalento]]
 
}}
 
}}
 
{{SeeAlso|
 
{{SeeAlso|
* [http://developer.here.net/rest_api RESTful Map API]
+
* [http://developer.here.com/rest_api RESTful Map API]
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.com/javascript_api HERE Maps API]
* [[Nokia Maps API - Advanced Routing|Using Map Image Turnpoints and Junction Views with Nokia Maps API ]]
+
* [[HERE Maps API - Asynchronous Loading|Asynchronous Map Loading]]
 
}}
 
}}

Latest revision as of 15:02, 28 November 2013

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="http://m.nok.it/?c=50.5,15.5&amp;h=334&amp;w=540&amp;z=4&amp;nord&amp;nodot&amp;sb=k"
alt="Map of Europe" />
</div>

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:
// http://m.nok.it/?c=50.5,15.5&h=334&w=540&z=4"
map.set("center", new nokia.maps.geo.Coordinate(50.5,15.5));
map.setZoomLevel(4);
var marker = new nokia.maps.map.StandardMarker([50.5,15.5]);
map.objects.add(marker);
 
$('#HereStaticMap').remove();
}

The following fully working example can be found at:

http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/advanced-examples/combining-with-here-static-maps.html


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
Compatibility
Platform(s): Web
Dependencies: HERE Maps 2.5.3
Article
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 15:02.
223 page views in the last 30 days.
×