Using the RESTful Map API together with HERE Maps API
m (Jasfox - links) |
m (Jasfox - Nokia -> HERE) |
||
| (5 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | [[Category:Code Snippet]][[Category: | + | [[Category:Code Snippet]][[Category:HERE Maps]][[Category:JavaScript]][[Category:HTTP]] |
| − | In short the | + | In short the HERE Maps APIs allow you to integrate HERE Maps into your web pages. |
| − | The [http://developer.here.net/javascript_api | + | The [http://developer.here.net/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. | ||
| Line 13: | Line 13: | ||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | ||
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" /> | <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" /> | ||
| − | <title>RESTful Map API Image with | + | <title>RESTful Map API Image with HERE Map API for JavaScript</title> |
<!-- No additional support required here. --> | <!-- No additional support required here. --> | ||
| − | <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2. | + | <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js"></script> |
<script type="text/javascript"> | <script type="text/javascript"> | ||
/*<![CDATA[*/ | /*<![CDATA[*/ | ||
| Line 56: | Line 56: | ||
</code> | </code> | ||
| − | {{Note | In the example above, the following RESTful Map API parameters have been set to match the definition of the dynamic | + | {{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° latitude 15.5 ° longitude | * {{Icode|c}} - Centre Point 50.5° latitude 15.5 ° longitude | ||
| − | * {{Icode|h}} - Height 334 | + | * {{Icode|h}} - Height 334 pixels, same as the height style of the map container {{Icode|<div>}} |
* {{Icode|w}} - width 540 pixels, same as the width style of the map container {{Icode|<div>}} | * {{Icode|w}} - width 540 pixels, same as the width style of the map container {{Icode|<div>}} | ||
* {{Icode|z}} - zoom level 4, same as the map. | * {{Icode|z}} - zoom level 4, same as the map. | ||
| Line 65: | Line 65: | ||
}} | }} | ||
| − | {{ArticleMetaData | + | {{ArticleMetaData <!-- v1.2 --> |
| + | |sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] --> | ||
| + | |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.2.4 | ||
| + | |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= | + | |keywords= HERE Maps, JavaScript, Map Image, RESTful |
| − | | | + | |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese --> |
| − | | | + | |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= | + | |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.net/rest_api RESTful Map API] | ||
| − | * [http://developer.here.net/javascript_api | + | * [http://developer.here.net/javascript_api HERE Maps API] |
| − | * [[ | + | * [[HERE Maps API - Advanced Routing]] |
}} | }} | ||
Latest revision as of 19:22, 24 April 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 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 HERE 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&h=334&w=540&z=4&nord&nodot&sb=k&appId=YOUR APP ID GOES HERE&token=YOUR AUTHENTICATION TOKEN GOES HERE" onclick="showFullMap();" alt="Map of Europe" />
</div>
</body>
</html>
Note: 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, 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
