×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - getting and setting the default language in application context

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - Add link.)
jasfox (Talk | contribs)
m (Jasfox - update to 2.2.4)
(8 intermediate revisions by 2 users not shown)
Line 4: Line 4:
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|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]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
+
|devices= Internet Explorer, Google Chrome, Firefox, Opera
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|platform= Web browsers
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies=Nokia Maps 2.1.0
+
|dependencies=Nokia Maps 2.2.4
 
|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= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
+
|keywords= Nokia Maps, JavaScript, default language
 
|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 22: Line 22:
 
}}
 
}}
 
{{SeeAlso|
 
{{SeeAlso|
*   [http://api.maps.nokia.com/ Nokia Maps API]
+
* [http://developer.here.net/javascript_api Nokia Maps API]
* [http://api.maps.nokia.com/2.1.1/playground/?example&#61;language Changing the language of the map]  }}
+
* [http://www.developer.nokia.com/Community/Wiki/Nokia_Maps_API_-_Setting_the_language Setting the Language]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/map/map-change-language.html Changing the language of the map]  }}
  
 
==Prerequisites==   
 
==Prerequisites==   
Line 29: Line 30:
 
Nokia Maps API supported web browser (basically any modern web browser)
 
Nokia Maps API supported web browser (basically any modern web browser)
  
==Important about Maps credentials==
+
==Important note about maps credentials==
  
With Nokia Maps API you can start without having any credentials given, but you might face a performance gap. In order to get the full potential out of the offering, you must get the credentials that authenticate your application against the Services. Please read through the Location APIFor more information on how to obtain the credentials, please start with the  Nokia Maps API Developers Guide section "Acquiring API credentials".
+
Nokia provides several services options within the Maps API offering. The service is free to use, but  you must obtain and use authentication and authorization credentials to use the services. Please read the
 +
[http://developer.here.net/terms_conditions Terms and Conditions] and check the [http://developer.here.net/web/guest/plans Pricing Plans page] to decide which business model best fits your needs. Authentication requires unique Maps API credentials, namely an AppId and a token. You can get these credentials free for free following the instructions [http://developer.here.net/docs/maps_js/topics/credentials.html#acquiring-credentials here]
  
 
==Implementation==   
 
==Implementation==   
  
This is a full HTML & JavaScript example. Feel free to modify and use for your own purposes.
+
This is a full HTML & JavaScript example. Add in your own [[How to Obtain Your Own Nokia appID and Token| AppId and Token]] and feel free to modify and use for your own purposes.
 
+
  
 
<code javascript>
 
<code javascript>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
+
<head>
<meta http-equiv="content-type" content= "text/html; charset=us-ascii" />
+
<meta http-equiv="content-type" content=
        <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
+
"text/html; charset=us-ascii" />
        <title>Setting the map language</title>
+
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
        <!-- By default we add ?kml=auto&heatmap=auto to auto load KML & heatmap package remove params if package are not needed -->
+
<title>Setting the map language</title>
        <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.1.0/jsl.js?kml=auto&amp;heatmap=auto">
+
<!-- This file loads up a map of Europe and displays it in a variety of languages.  -->
        </script>
+
<!-- No additional support is required here, just load basic capabilities -->
  </head>
+
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js"></script>
  <body>
+
</head>
      <div id="mapContainer" style= "z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;">
+
<body>
      </div>
+
<div id="mapContainer" style=
      <script type="text/javascript">
+
"z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;">
//<![CDATA[                          
+
</div>
            var appContext = nokia.maps.util.ApplicationContext;
+
<script type="text/javascript">
            // Go thru all the language options
+
//<![CDATA[                  
            var availableLanguages = ["en-US", "en-GB", "de-DE", "es-ES", "fr-FR", "it-IT", "ru-RU", "zh-CN"]
+
/////////////////////////////////////////////////////////////////////////////////////
          //get a random language
+
// Don't forget to set your API credentials
          var randomLanguageIndex = Math.floor(Math.random() * availableLanguages.length); var randomLanguage = availableLanguages[randomLanguageIndex];
+
//
          // Get and store the current map default language
+
// Replace with your appId and token which you can obtain when you
          var currentLanguage = appContext.get("defaultLanguage");  
+
// register on http://api.developer.nokia.com/
          // Display a note to the user within the document
+
//
          document.write("The Initial Default Language is " + currentLanguage);  
+
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");  
          // Write line break
+
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
          document.write("<br />");
+
//
          // Set the default language of the map
+
//////////////////////////////
          appContext.set("defaultLanguage", randomLanguage);
+
/*]]>*/        
          // Get the new language we have just set
+
</script>
          currentLanguage = appContext.get("defaultLanguage");
+
          // Write the new language
+
          document.write("Now the Default Language is " + currentLanguage);
+
  
          // Get the DOM node to which we will append the map
+
<script type="text/javascript">     
        var mapContainer = document.getElementById("mapContainer");
+
var appContext = nokia.maps.util.ApplicationContext;
 +
// Go thru all the language options
 +
var availableLanguages = ["en-US", "en-GB", "de-DE", "es-ES", "fr-FR", "it-IT", "ru-RU", "zh-CN"]
 +
//get a random language
 +
var randomLanguageIndex = Math.floor(Math.random() * availableLanguages.length); var randomLanguage = availableLanguages[randomLanguageIndex];
 +
// Get and store the current map default language
 +
var currentLanguage = appContext.get("defaultLanguage");
 +
// Display a note to the user within the document
 +
document.write("The Initial Default Language is " + currentLanguage);
 +
// Write line break
 +
document.write("<br />");
 +
// Set the default language of the map  
 +
appContext.set("defaultLanguage", randomLanguage);
 +
// Get the language we have just set
 +
currentLanguage = appContext.get("defaultLanguage");
 +
// Write the new language
 +
document.write("Now the Default Language is " + currentLanguage);  
  
        // Define the Nokia Maps  
+
// Get the DOM node to which we will append the map
        var map = new nokia.maps.map.Display(mapContainer, {
+
var mapContainer = document.getElementById("mapContainer");
 +
 
 +
// Define the Nokia Maps  
 +
var map = new nokia.maps.map.Display(mapContainer, {
 
         // initial center and zoom level of the map
 
         // initial center and zoom level of the map
            center: [53.1, 13.1],
+
        center: [53.1, 13.1],
            zoomLevel: 4,
+
        zoomLevel: 4,
            components: [
+
        components: [
 
                 new nokia.maps.map.component.ZoomBar(),  
 
                 new nokia.maps.map.component.ZoomBar(),  
 
                 new nokia.maps.map.component.Behavior(),
 
                 new nokia.maps.map.component.Behavior(),
Line 88: Line 105:
 
                 new nokia.maps.map.component.Overview(),
 
                 new nokia.maps.map.component.Overview(),
 
                 new nokia.maps.map.component.ScaleBar(),
 
                 new nokia.maps.map.component.ScaleBar(),
                 new nokia.maps.positioning.component.Positioning(),
+
                 new nokia.maps.positioning.component.Positioning()
                new nokia.maps.map.component.RightClick(),
+
                new nokia.maps.search.component.RightClick(),
+
                new nokia.maps.routing.component.RightClick()
+
 
         ]
 
         ]
    });
+
});
 
//]]>
 
//]]>
    </script>  
+
</script>  
  </body>  
+
</body>  
 
</html>
 
</html>
 
</code>
 
</code>
 
==Tested with== 
 
 
Mozilla FireFox 8.0 
 
Google Chrome 14.0.835.202 m
 

Revision as of 14:39, 14 March 2013

This articles shows how to get and set the default language in application context.

Article Metadata
Tested with
Devices(s): Internet Explorer, Google Chrome, Firefox, Opera
Compatibility
Platform(s): Web browsers
Dependencies: Nokia Maps 2.2.4
Article
Keywords: Nokia Maps, JavaScript, default language
Created: Maveric (25 Oct 2011)
Last edited: jasfox (14 Mar 2013)

Prerequisites

Nokia Maps API supported web browser (basically any modern web browser)

Important note about maps credentials

Nokia provides several services options within the Maps API offering. The service is free to use, but you must obtain and use authentication and authorization credentials to use the services. Please read the Terms and Conditions and check the Pricing Plans page to decide which business model best fits your needs. Authentication requires unique Maps API credentials, namely an AppId and a token. You can get these credentials free for free following the instructions here

Implementation

This is a full HTML & JavaScript example. Add in your own AppId and Token and feel free to modify and use for your own purposes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content=
"text/html; charset=us-ascii" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<title>Setting the map language</title>
<!-- This file loads up a map of Europe and displays it in a variety of languages. -->
<!-- No additional support is required here, just load basic capabilities -->
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js"></script>
</head>
<body>
<div id="mapContainer" style=
"z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;">
</div>
<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">
var appContext = nokia.maps.util.ApplicationContext;
// Go thru all the language options
var availableLanguages = ["en-US", "en-GB", "de-DE", "es-ES", "fr-FR", "it-IT", "ru-RU", "zh-CN"]
//get a random language
var randomLanguageIndex = Math.floor(Math.random() * availableLanguages.length); var randomLanguage = availableLanguages[randomLanguageIndex];
// Get and store the current map default language
var currentLanguage = appContext.get("defaultLanguage");
// Display a note to the user within the document
document.write("The Initial Default Language is " + currentLanguage);
// Write line break
document.write("<br />");
// Set the default language of the map
appContext.set("defaultLanguage", randomLanguage);
// Get the language we have just set
currentLanguage = appContext.get("defaultLanguage");
// Write the new language
document.write("Now the Default Language is " + currentLanguage);
 
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
 
// Define the Nokia Maps
var map = new nokia.maps.map.Display(mapContainer, {
// initial center and zoom level of the map
center: [53.1, 13.1],
zoomLevel: 4,
components: [
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.Traffic(),
new nokia.maps.map.component.PublicTransport(),
new nokia.maps.map.component.Overview(),
new nokia.maps.map.component.ScaleBar(),
new nokia.maps.positioning.component.Positioning()
]
});
//]]>
</script>
</body>
</html>
163 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.

×