×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - Reading and displaying Map Features

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - links)
jasfox (Talk | contribs)
m (Jasfox - Update links)
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Browser]][[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]]
+
[[Category:HERE Maps]][[Category:JavaScript]][[Category:Code Examples]]
 
{{ArticleMetaData
 
{{ArticleMetaData
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
|sourcecode= [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/advanced-examples/reading-map-features.html reading-map-features.html]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices= Google Chrome 20.0 x, Firefox 13.0
 
|devices= Google Chrome 20.0 x, Firefox 13.0
Line 7: Line 7:
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= Nokia Maps 2.2.3
+
|dependencies= HERE Maps 2.5.3
 
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|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, features
+
|keywords= HERE Maps, JavaScript, features
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
Line 29: Line 29:
 
== Introduction ==
 
== Introduction ==
  
This example uses the Nokia Maps API {{Icode|Feature}} manipulation functionality, described in the API Reference here:
+
This example uses the HERE Maps API {{Icode|Feature}} manipulation functionality, described in the API Reference here:
  
 
http://developer.here.net/docs/maps_js/topics_api_pub/nokia.Features.html
 
http://developer.here.net/docs/maps_js/topics_api_pub/nokia.Features.html
Line 37: Line 37:
 
== Prerequisites ==
 
== Prerequisites ==
  
Nokia Maps API supported web browser (basically any modern web browser will do).
+
HERE Maps API supported web browser (basically any modern web browser will do).
  
  
Line 46: Line 46:
  
 
<code javascript>
 
<code javascript>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
function retrieveMapFeatures(map){
<html xmlns="http://www.w3.org/1999/xhtml">
+
    <head>
+
      <title>Map Features</title>
+
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
      <script type="text/javascript"
+
            src="http://api.maps.nokia.com/2.2.3/jsl.js" charset="utf-8">
+
        </script>
+
    </head>
+
    <body>
+
  
        <div id="mapContainer" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>
+
var list = nokia.maps.Features.getFeatureMap();  
        <script type="text/javascript">
+
/////////////////////////////////////////////////////////////////////////////////////
+
// Loop through the features and show them in an alert
// Don't forget to set your API credentials
+
// Returns a map of implementations for each registered feature.  
//
+
for( var i in list ) {
// Replace with your appId and token which you can obtain when you
+
if ( list.hasOwnProperty(i) ) {
// register on http://api.developer.nokia.com/
+
alert("Feature Map: "+list[i]);
//
+
}
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
+
}
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
+
  
//
+
var list = nokia.maps.Features.getLoadedMap();
/////////////////////////////////////////////////////////////////////////////////////
+
// Loop through the features and show them in an alert
 +
// Returns a map of the names of fully loaded feature
 +
// implementations per feature.
 +
for( var i in list ) {
 +
if ( list.hasOwnProperty(i) ) {
 +
alert("Loaded Map:" +list[i]);
 +
}
 +
}
  
// This example will first display the full Feature Map components and then of those what
+
var load_Successful =function (result){
// are being used in the current map that is loaded and in use.
+
alert("SUCCESSFUL FEATURE LOADING");
+
}
var map;
+
var load_Failed =function (result){
map = new nokia.maps.map.Display(document.getElementById("mapContainer"),
+
alert("FEATURE LOADING FAILED");
    {
+
}
                  components: [ new nokia.maps.map.component.Behavior(),
+
 
                            new nokia.maps.map.component.ZoomBar(),
+
nokia.maps.Features.load(
                            new nokia.maps.map.component.Overview(),                           
+
{"map": "auto", "routing": "auto"}, load_Successful, load_Failed);  
                            new nokia.maps.map.component.TypeSelector(),   
+
nokia.maps.Features.load({"map": "auto", "search": "auto"}, load_Successful, load_Failed);  
                            new nokia.maps.map.component.ScaleBar() ],
+
}
                  zoomLevel: 4,
+
                  center: [52.51, 13.4]  // default map center point (not the location retrieved)
+
+
    });
+
+
    //Retrieve Feature Map
+
+
    var list = nokia.maps.Features.getFeatureMap();
+
+
    // Loop through the features and show them in an alert
+
    // Returns a map of implementations for each registered feature.
+
+
    for( var i in list )
+
    { if ( list.hasOwnProperty(i) )
+
    alert("Feature Map: "+list[i]);  
+
    }
+
+
    // Retrieve Loaded Map
+
+
    var list = nokia.maps.Features.getLoadedMap();
+
+
    // Loop through the features and show them in an alert
+
    // Returns a map of the names of fully loaded feature implementations per feature.
+
+
+
    for( var i in list )
+
    { if ( list.hasOwnProperty(i) )
+
    alert("Loaded Map:" +list[i]);  
+
    }
+
+
    nokia.maps.Features.load({"map": "auto", "routing": "auto"}, load_Successful, load_Failed);  
+
+
    nokia.maps.Features.load({"map": "auto", "search": "auto"}, load_Successful, load_Failed);  
+
+
    function load_Successful(result){
+
      alert("SUCCESSFUL FEATURE LOADING");
+
    }
+
+
    function load_Failed(result){
+
      alert("FEATURE LOADING FAILED");
+
    }
+
</script>
+
</body>
+
</html>
+
 
</code>
 
</code>
 +
 +
A fully working example can be found at:
 +
 +
https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/advanced-examples/reading-map-features.html
  
 
== Summary ==
 
== Summary ==
Line 132: Line 89:
 
Feel free to modify the code for your own purposes.
 
Feel free to modify the code for your own purposes.
  
==For more on the Nokia Maps API==
+
==For more on the HERE Maps API==
  
Please check out the Nokia Maps API full documentation and API reference here:
+
Please check out the HERE Maps API full documentation and API reference here:
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.com/javascript_api HERE Maps API]
  
 
You may also access the interactive API explorer
 
You may also access the interactive API explorer
* [http://developer.here.net/javascript_api_explorer API explorer]
+
* [http://developer.here.com/javascript_api_explorer API explorer]
  
 
== Tested with ==
 
== Tested with ==

Latest revision as of 14:49, 28 November 2013

Article Metadata
Code ExampleTested with
Devices(s): Google Chrome 20.0 x, Firefox 13.0
Dependencies: HERE Maps 2.5.3
Article
Keywords: HERE Maps, JavaScript, features
Created: Maveric (27 Jun 2011)
Updated: avnee.nathani (18 Jan 2012)
Last edited: jasfox (28 Nov 2013)


This article features an example on how to read, display and load Map Features

Contents

[edit] Introduction

This example uses the HERE Maps API Feature manipulation functionality, described in the API Reference here:

http://developer.here.net/docs/maps_js/topics_api_pub/nokia.Features.html

Please check it out for detailed description on the subject.

[edit] Prerequisites

HERE Maps API supported web browser (basically any modern web browser will do).


[edit] Example code

This example loops through and displays all supported features/sets and features of the current map. It also attempts to load features and handles success and failure, and in this example the load should be a success.

function retrieveMapFeatures(map){
 
var list = nokia.maps.Features.getFeatureMap();
 
// Loop through the features and show them in an alert
// Returns a map of implementations for each registered feature.
for( var i in list ) {
if ( list.hasOwnProperty(i) ) {
alert("Feature Map: "+list[i]);
}
}
 
var list = nokia.maps.Features.getLoadedMap();
// Loop through the features and show them in an alert
// Returns a map of the names of fully loaded feature
// implementations per feature.
for( var i in list ) {
if ( list.hasOwnProperty(i) ) {
alert("Loaded Map:" +list[i]);
}
}
 
var load_Successful =function (result){
alert("SUCCESSFUL FEATURE LOADING");
}
var load_Failed =function (result){
alert("FEATURE LOADING FAILED");
}
 
nokia.maps.Features.load(
{"map": "auto", "routing": "auto"}, load_Successful, load_Failed);
nokia.maps.Features.load({"map": "auto", "search": "auto"}, load_Successful, load_Failed);
}

A fully working example can be found at:

https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/advanced-examples/reading-map-features.html

[edit] Summary

Feel free to modify the code for your own purposes.

[edit] For more on the HERE Maps API

Please check out the HERE Maps API full documentation and API reference here:

You may also access the interactive API explorer

[edit] Tested with

  • Google Chrome 20.0 x
  • Firefox 13.0
This page was last modified on 28 November 2013, at 14:49.
258 page views in the last 30 days.
×