×
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 - Remove Category)
jasfox (Talk | contribs)
m (Jasfox - Recoded example to use Nokia Maps)
Line 1: Line 1:
[[Category:Web]][[Category:Browser]][[Category:Code Snippet]][[Category:Nokia Maps]]
+
[[Category:Code Snippet]][[Category:Nokia Maps]][[Category:JavaScript]]
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 Nokia [http://www.developer.nokia.com/Develop/Maps/Maps_API_for_JavaScript.xhtml Maps API for JavaScript] offers a variety of essential map functionality out of the box like, panning, zooming and support for W3C positioning inbuilt in modern browsers.
 
However in some situations it is just enough to show the map image. This is where the Map Image API comes into play.
 
However in some situations it is just enough to show the map image. This is where the Map Image API comes into play.
  
Map Image 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://www.developer.nokia.com/Develop/Maps/Map_Image_API/ Map Image 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 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 offerings. JavaScript is not supported on some 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 interactive Map 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.  
  
 
<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 HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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>Nokia Map Image with Nokia Map API for JavaScript</title>
        </script>
+
<!-- By default we add ?kml=auto&heatmap=auto to auto load KML & heatmap package remove params if package are not needed -->
        <script type="text/javascript">
+
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.1.0/jsl.js?kml=auto&heatmap=auto"></script>
           
+
<script type="text/javascript">
           
+
            function showFullMap(){
+
// Don't forget to set your API credentials
                document.getElementById("map").innerHTML = "";
+
// nokia.maps.util.ApplicationContext.set({"appId": "YOUR APPID", "authenticationToken": "YOUR TOKEN"});
                var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
+
 
                    components: [
+
 
new ovi.mapsapi.map.component.Behavior(),
+
function showFullMap(){
new ovi.mapsapi.map.component.ZoomBar(),
+
    var mapContainer = document.getElementById("mapContainer");
new ovi.mapsapi.map.component.Overview(),
+
    mapContainer.innerHTML = "";
new ovi.mapsapi.map.component.TypeSelector(),
+
    // Create a map inside the map container DOM node
new ovi.mapsapi.map.component.ScaleBar()],
+
    var map = new nokia.maps.map.Display(mapContainer, {
                   
+
        zoomLevel: 4, //zoom level for the map
                    'zoomLevel': 10, //zoom level for the map
+
        center: [50.5,15.5], // center coordinates
                    'center': [61.2953, 23.4553] // center coordinates
+
        components : [
                });
+
          new nokia.maps.map.component.ZoomBar(),  
            }
+
          new nokia.maps.map.component.Behavior(),
        </script>
+
          new nokia.maps.map.component.TypeSelector(),
    </head>
+
          new nokia.maps.map.component.Overview(),
    <body>
+
          new nokia.maps.map.component.ScaleBar()]                  
        <div>
+
    });
            Map
+
}
        </div>
+
</script>
        <div id="map" style="width:540px; height:334px;">
+
</head>
            <img src='http://m.ovi.me/?c=61.2953,23.4553&h=334&w=540&z=10' onclick='showFullMap();'/>
+
<body>
        </div>
+
  <div id="mapContainer" style="width:540px; height:334px;">
    </body>
+
    <img src="http://m.nokia.me/?c=50.5,15.5&h=334&w=540&z=4&nord&nodot&sb=k" onclick="showFullMap();" />
 +
  </div>
 +
</body>
 
</html>
 
</html>
 
</code>
 
</code>
 +
 +
{{SeeAlso|
 +
*  [http://www.developer.nokia.com/Develop/Maps/Map_Image_API/ Map Image API]
 +
*  [http://www.developer.nokia.com/Develop/Maps/Maps_API_for_JavaScript.xhtml Maps API for JavaScript]
 +
}}

Revision as of 16:37, 31 January 2012

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

The Map Image 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 offerings. JavaScript is not supported on some 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 interactive Map 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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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>Nokia Map Image with Nokia Map API for JavaScript</title>
<!-- By default we add ?kml=auto&heatmap=auto to auto load KML & heatmap package remove params if package are not needed -->
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.1.0/jsl.js?kml=auto&heatmap=auto"></script>
<script type="text/javascript">
 
// Don't forget to set your API credentials
// nokia.maps.util.ApplicationContext.set({"appId": "YOUR APPID", "authenticationToken": "YOUR TOKEN"});
 
 
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.nokia.me/?c=50.5,15.5&h=334&w=540&z=4&nord&nodot&sb=k" onclick="showFullMap();" />
</div>
</body>
</html>
352 page views in the last 30 days.
×