×
Namespaces

Variants
Actions
(Difference between revisions)

Using the RESTful Map API together with HERE Maps API

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
jasfox (Talk | contribs)
m (Jasfox - update to 2.2.4)
(19 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Web]][[Category:Browser]]
+
[[Category:Code Snippet]][[Category:Nokia Maps]][[Category:JavaScript]][[Category:HTTP]]
In short Ovi Maps API allows you to integrate Ovi maps into your web page.  
+
In short the Nokia Maps APIs allow you to integrate Nokia maps into your web pages.  
Ovi Maps offers a variety of essential map functionality out of the box like, panning, zooming and support for W3C positioning inbuilt in modern browsers.
+
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.
However in some situations it is just enough to show the map image. This is where Ovi maps rendering 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.
  
Ovi maps rendering API is light weight, but full-blown, offering for easy access of map data.  
+
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.  
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 offerings. Ovi maps is not supported on browsers of mobile devices, which is not optimal situation if you are targeting for mobile friendly website. One way to circumvent this problem is by having a plain map image served on the page initially. Then only after the user clicks on the map the Ovi Maps is loaded. In this way you can potentially save on initial load time and be rested that all of your visitors are able to see 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.
 
<code javascript>
 
<code javascript>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
+
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>OVI Maps test page</title>
+
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
        <script type="text/javascript" src="http://api.maps.ovi.com/jsl.js">
+
<title>RESTful Map API Image with Nokia Map API for JavaScript</title>
        </script>
+
<!-- No additional support required here. -->
        <script type="text/javascript">
+
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js"></script>
           
+
<script type="text/javascript">
           
+
/*<![CDATA[*/
            function showFullMap(){
+
/////////////////////////////////////////////////////////////////////////////////////
                document.getElementById("map").innerHTML = "";
+
// Don't forget to set your API credentials
                var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
+
//
                    components: [
+
// Replace with your appId and token which you can obtain when you
new ovi.mapsapi.map.component.Behavior(),
+
// register on http://api.developer.nokia.com/
new ovi.mapsapi.map.component.ZoomBar(),
+
//
new ovi.mapsapi.map.component.Overview(),
+
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
new ovi.mapsapi.map.component.TypeSelector(),
+
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
new ovi.mapsapi.map.component.ScaleBar()],
+
//
                   
+
/////////////////////////////////////////////////////////////////////////////////////
                    'zoomLevel': 10, //zoom level for the map
+
/*]]>*/       
                    'center': [61.2953, 23.4553] // center coordinates
+
</script>
                });
+
<script type="text/javascript">
            }
+
function showFullMap(){
        </script>
+
    var mapContainer = document.getElementById("mapContainer");
    </head>
+
    mapContainer.innerHTML = "";
    <body>
+
    // Create a map inside the map container DOM node
        <div>
+
    var map = new nokia.maps.map.Display(mapContainer, {
            Map
+
        zoomLevel: 4, //zoom level for the map
        </div>
+
        center: [50.5,15.5], // center coordinates
        <div id="map" style="width:540px; height:334px;">
+
        components : [
            <img src='http://m.ovi.me/?c=61.2953,23.4553&h=334&w=540&z=10' onclick='showFullMap();'/>
+
          new nokia.maps.map.component.ZoomBar(),  
        </div>
+
          new nokia.maps.map.component.Behavior(),
    </body>
+
          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>
 +
</body>
 
</html>
 
</html>
 
</code>
 
</code>
[[Category:Code Examples]][[Category:Code Snippet]]
+
 
 +
{{Note | In the example above, the following RESTful Map API parameters have been set to match the definition of the dynamic Nokia Map
 +
* {{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|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|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|appId}} and {{Icode|token}}  - standard authentication parameters
 +
}}
 +
 
 +
{{ArticleMetaData
 +
|platform= Web
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= Nokia Maps, JavaScript, Map Image, RESTful
 +
|dependencies=Nokia Maps 2.2.4
 +
|devices= Internet Explorer, Google Chrome , Firefox, Opera
 +
|review-by=<!-- After re-review: [[User:username]] -->
 +
|review-timestamp=<!-- After re-review: YYYYMMDD -->
 +
|update-by=  [[User:jasfox]]
 +
|update-timestamp=20120105
 +
|creationdate= 20110117
 +
|author= [[User:isalento]] 
 +
}}
 +
{{SeeAlso|
 +
* [http://developer.here.net/rest_api RESTful Map API]
 +
* [http://developer.here.net/javascript_api Nokia Maps API]
 +
* [[Nokia Maps API - Advanced Routing|Using Map Image Turnpoints and Junction Views with Nokia Maps API ]]
 +
}}

Revision as of 14:40, 14 March 2013

In short the Nokia Maps APIs allow you to integrate Nokia maps into your web pages. The 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. 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 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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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.4/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>
</body>
</html>

Note.pngNote: In the example above, the following RESTful Map API parameters have been set to match the definition of the dynamic Nokia 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, sb - The image should not attempt to redirect, no dot is required over the centre point and a scale bar is required.
  • appId and token - standard authentication parameters

Article Metadata
Tested with
Devices(s): Internet Explorer, Google Chrome , Firefox, Opera
Compatibility
Platform(s): Web
Dependencies: Nokia Maps 2.2.4
Article
Keywords: Nokia Maps, JavaScript, Map Image, RESTful
Created: isalento (17 Jan 2011)
Updated: jasfox (05 Jan 2012)
Last edited: jasfox (14 Mar 2013)
297 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×