×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - Find a USA state (simple game on map utilizing reverse geocoding)

From Nokia Developer Wiki
Jump to: navigation, search
Maveric (Talk | contribs)
(Maveric -)
 
jasfox (Talk | contribs)
m (Jasfox -)
(23 intermediate revisions by 6 users not shown)
Line 1: Line 1:
[[Category:Ovi]][[Category:Web]][[Category:Browser]]
+
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]]
 +
{{Abstract|A simple map game demonstrating how to used reverse geocoding in Nokia Maps}}
 +
 
 +
{{ArticleMetaData
 +
|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= Google Chrome, Firefox
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= Web browser
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies=Nokia Maps 2.2.3
 +
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= Reverse Geocoding, Nokia Maps, JavaScript
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by=<!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by=[[User:avnee.nathani]]
 +
|update-timestamp=20111231
 +
|creationdate=20110621
 +
|author=[[User:Maveric]]
 +
}}
 +
 
 +
{{SeeAlso|
 +
* [http://developer.here.net/javascript_api Nokia Maps API]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/events/map-coordinate-on-click.htmll Coordinates on click]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/places-search/reverse-geocode.html Reverse geocode example]  }}
 +
 
 
==Introduction==
 
==Introduction==
  
This simple game will introduce how to use the map Event listener for user map clicks, how to find the geocoordinates under the clicked mouse point and how to  
+
This simple game will introduce how to use the map Event listener for user map clicks, how to find the {{Icode|geocoordinate}} under the clicked mouse point and how to  
further use the coordinates to perform a reverse geocode search - all this in a form of a guessing game.
+
further use the coordinates to perform a {{Icode|nokia.places.search.manager.reverseGeoCode()}} search - all this in a form of a guessing game.
 +
 
 +
[[File:find-a-us-state.png]]
  
Feel free to further implement your version of this!
+
Feel free to modify and further implement your own version of this game.
  
 
==Prerequisites==
 
==Prerequisites==
  
Ovi Maps API supported web browser (basically any modern web browser)
+
Nokia Maps API supported web browser (basically any modern web browser)
  
The example assumes you have already added the Ovi Maps to your web page as explained in the previous article "Ovi Maps - add the map to any web page"
+
The example assumes you have already added the Nokia Maps to your web page as explained in the previous article [http://www.developer.nokia.com/Community/Wiki/Nokia_Maps_API_-_Add_Maps_To_Any_Web_Page Add Maps to Any Web Page]
  
==Important about Maps credentials==
+
==Important note about maps credentials==
  
With Ovi 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
+
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.
offering, you must get the credentials that authenticate your application against the Services. Please read through the Location API.
+
Please read the [http://www.developer.nokia.com/Develop/Maps/Quota/ Location API Business Models and Usage Restrictions 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 from the [https://api.developer.nokia.com/ovi-api Nokia Developer API Registration page].
 
+
For more information on how to obtain the credentials, please start with the Ovi Maps API Developers Guide section "Acquiring API credentials"
+
  
 
In the code example below is all required HTML and embedded JavaScript, a full functional application.
 
In the code example below is all required HTML and embedded JavaScript, a full functional application.
  
 
==Game code==
 
==Game code==
 +
The full HTML and JavaScript for the guessing game can be found below. Remember to add in your own [[How to Obtain Your Own Nokia appID and Token| AppId and Token]] to get it to work.
 +
<code javascript>
 +
<!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>
 +
      <title>Nokia Maps game - Locate the states of USA</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 onload="init()" >
  
<code java>
+
        <div id="map" style="width:80%; height:80%; position: absolute; "></div>
<html>
+
<head>
+
        <script type="text/javascript">
<title>Ovi Maps game - Locate the states of USA</title>
+
/////////////////////////////////////////////////////////////////////////////////////
<script src="http://api.maps.ovi.com/jsl.js" type="text/javascript" charset="utf-8"></script>
+
// Don't forget to set your API credentials
</head>
+
//
<body onload="init()">
+
// Replace with your appId and token which you can obtain when you
<div id="map" style="z-index: -1; left:0px; top:0px; width: 100%; height: 100%; position: absolute;"></div>
+
// register on http://api.developer.nokia.com/
<script type="text/javascript">
+
//
 +
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
 +
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
  
 +
//
 +
/////////////////////////////////////////////////////////////////////////////////////
 +
 
//Globals
 
//Globals
 
+
 
     var clicked_location = "";
 
     var clicked_location = "";
 
     var myContainer;
 
     var myContainer;
Line 42: Line 90:
 
     var clicked_state;
 
     var clicked_state;
 
     var map;
 
     var map;
     var statesArray = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","District of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Marshall Islands","Maryland",  "Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania",    "Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"];
+
     var statesArray = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut",
     var stateAbbrev = ["AL","AK","AZ","AR","CA","CO","CT","DE","DC","FL","GA","HI","ID","IL","IN","IA","KS","KY","LA","ME","MH","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NM","NY","ND","NC","OH","OK","OR","PA",
+
"Delaware","District of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas",
    "RI", "SC", "SD", "TN", "TX", "UT", "VT","VI","WA","WV","WI","WY"]
+
"Kentucky","Louisiana","Maine","Marshall Islands","Maryland",  "Massachusetts","Michigan","Minnesota",
 
+
"Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico",
 +
"New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania",    "Rhode Island",
 +
"South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington",
 +
"West Virginia","Wisconsin","Wyoming"];
 +
     var stateAbbrev = ["AL","AK","AZ","AR","CA","CO","CT","DE","DC","FL","GA","HI","ID","IL","IN","IA",
 +
"KS","KY","LA","ME","MH","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NM","NY","ND",
 +
"NC","OH","OK","OR","PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT","VI","WA","WV","WI","WY"]
 +
 
     var correct_answers = 0;
 
     var correct_answers = 0;
 
     var wrong_answers = 0;
 
     var wrong_answers = 0;
 
     var randomnumber=Math.floor(Math.random()*51);
 
     var randomnumber=Math.floor(Math.random()*51);
 
+
 
function random_State()
 
function random_State()
 
{
 
{
Line 55: Line 110:
 
     alert("DOUBLE CLICK WHERE YOU THINK IS : "+statesArray[randomnumber]);
 
     alert("DOUBLE CLICK WHERE YOU THINK IS : "+statesArray[randomnumber]);
 
}
 
}
 
+
 
+
 
function init()
 
function init()
 
{
 
{
 
+
 
     alert("Hello! Welcome to the game. Click OK to start.");
 
     alert("Hello! Welcome to the game. Click OK to start.");
 
+
 
     // Set the authentication token, which is needed by the web-services to authenticate your application.
 
     // Set the authentication token, which is needed by the web-services to authenticate your application.
     ovi.mapsapi.util.ApplicationContext.set("authenticationToken", "<Token>");
+
     nokia.maps.util.ApplicationContext.set("authenticationToken", "<Token>");
 
+
 
+
     //map = new ovi.mapsapi.map.Display(document.getElementById("map"), {'zoomLevel':4, 'center':[39.8, 98.57]});     
+
     //map = new nokia.maps.map.Display(document.getElementById("map"), {'zoomLevel':4, 'center':[39.8, 98.57]});     
     map = new ovi.mapsapi.map.Display(document.getElementById("map"),  
+
     map = new nokia.maps.map.Display(document.getElementById("map"),  
 
     {
 
     {
               components: [ new ovi.mapsapi.map.component.Behavior(),
+
               components: [ new nokia.maps.map.component.Behavior(),
                     new ovi.mapsapi.map.component.ZoomBar(),
+
                     new nokia.maps.map.component.ZoomBar(),
                     new ovi.mapsapi.map.component.Overview(),                             
+
                     new nokia.maps.map.component.Overview(),                             
                     new ovi.mapsapi.map.component.TypeSelector(),     
+
                     new nokia.maps.map.component.TypeSelector(),     
                     new ovi.mapsapi.map.component.ScaleBar()],
+
                     new nokia.maps.map.component.ScaleBar()],
             'zoomLevel': 5,
+
             'zoomLevel': 4,
 
             'center':[48.166667, -100.166667] // Geographical center of the USA
 
             'center':[48.166667, -100.166667] // Geographical center of the USA
 
+
 
     });
 
     });
 
+
 
     map.removeComponent(map.getComponentById("zoom.DoubleClick"));
 
     map.removeComponent(map.getComponentById("zoom.DoubleClick"));
 
     //This will remove the default functionality on the map, where double clicking on it would zoom the map. We need
 
     //This will remove the default functionality on the map, where double clicking on it would zoom the map. We need
Line 84: Line 139:
 
     //We would like to keep the default zoom level. The user will still have the possibility to zoom the map with the
 
     //We would like to keep the default zoom level. The user will still have the possibility to zoom the map with the
 
     //mouse scroll wheel.
 
     //mouse scroll wheel.
 
+
     map.addListener("dblclick", eventListener);  // add the listener for mouse click
+
     map.addListener("click", eventListener);  // add the listener for mouse click
 
+
 
     map.set("baseMapType", map.NORMAL);
 
     map.set("baseMapType", map.NORMAL);
 
+
 
     random_State();
 
     random_State();
 
+
 
     function eventListener(event){
 
     function eventListener(event){
 
         console.log("in EventListener");
 
         console.log("in EventListener");
Line 99: Line 154:
 
         add_Marker_where_clicked();
 
         add_Marker_where_clicked();
 
     }
 
     }
 
+
 
}
 
}
 
+
 
function add_Marker_where_clicked(){
 
function add_Marker_where_clicked(){
     myMarker = new ovi.mapsapi.map.Marker(clicked_location);
+
     myMarker = new nokia.maps.map.Marker(clicked_location);
 
     map.objects.add(myMarker);
 
     map.objects.add(myMarker);
 
     mapStartReverseGeoCode();
 
     mapStartReverseGeoCode();
 
}
 
}
  
function mapStartReverseGeoCode(){
+
var processResults = function (data, requestStatus, requestId) {
 
+
                     
            searchManager = new ovi.mapsapi.search.Manager();
+
      if (requestStatus == "OK") {
            searchManager.addObserver("state",
+
      console.log (data);
                        function(observedManager, key, value) {
+
                            if(value == "finished") {  
+
                            if (observedManager.locations.length > 0) {
+
 
                             console.log("SEARCH ENDED SUCCESSFULLY");  
 
                             console.log("SEARCH ENDED SUCCESSFULLY");  
                               console.log(observedManager.locations[0].address.country);
+
                               console.log(data.location.address.country);
                             clicked_country = observedManager.locations[0].address.country;
+
                             clicked_country = data.location.address.country;
 
                             console.log(clicked_country);
 
                             console.log(clicked_country);
                             clicked_state = observedManager.locations[0].address.state;
+
                             clicked_state = data.location.address.state;
 
                             console.log(clicked_state);
 
                             console.log(clicked_state);
                             clicked_county = observedManager.locations[0].address.county;
+
                             clicked_county = data.location.address.county;
 
                             console.log(clicked_county);
 
                             console.log(clicked_county);
                             clicked_district = observedManager.locations[0].address.district;
+
                             clicked_district = data.location.address.district;
 
                             console.log(clicked_district);
 
                             console.log(clicked_district);
 
                             show_results();
 
                             show_results();
 
+
                    }
+
                 
                 } else if(value == "failed") {
+
                 } else if(requestStatus == "ERROR") {
 
                         alert("SEARCH FAILED");  
 
                         alert("SEARCH FAILED");  
 
                 }
 
                 }
             });
+
             };
       
+
            console.log("Reverse geocoding: "+clicked_location.toString());
+
function mapStartReverseGeoCode(){
            searchManager.reverseGeocode(clicked_location);
+
 
                     
+
console.log("Reverse geocoding: "+clicked_location.toString());
 +
nokia.places.search.manager.reverseGeoCode({
 +
latitude: clicked_location.latitude,
 +
longitude: clicked_location.longitude,
 +
onComplete: processResults
 +
});
 +
 
}
 
}
function show_results(){
 
  
 +
function show_results(){
 +
 
   //    alert("YOU HAD SELECTED: "+clicked_state+" "+clicked_country);
 
   //    alert("YOU HAD SELECTED: "+clicked_state+" "+clicked_country);
 
+
 
     if (stateAbbrev[randomnumber] == clicked_state)
 
     if (stateAbbrev[randomnumber] == clicked_state)
 
       {
 
       {
Line 151: Line 210:
 
         alert("That was WRONG! You got 1 point"+" Correct ones: "+correct_answers+" "+"Wrong ones:"+wrong_answers);
 
         alert("That was WRONG! You got 1 point"+" Correct ones: "+correct_answers+" "+"Wrong ones:"+wrong_answers);
 
       }
 
       }
 
+
 
  random_State();
 
  random_State();
 
+
 
}
 
}
 
 
 
</script>
 
</script>
 
</body>
 
</body>
 
</html>
 
</html>
  
 +
 
</code>
 
</code>
  
 +
==For more on the Nokia Maps API==
  
==For more on Ovi Maps API==
+
Please check out the Nokia Maps API full documentation and API reference here:
 
+
* [http://developer.here.net/javascript_api Nokia Maps API]
Please check out the Ovi Maps API full documentation and API reference here:
+
 
+
http://api.maps.ovi.com
+
 
+
==Tested on==
+
 
+
Google Chrome 11.0x
+
  
Mozilla Firefox 5.0
+
You may also access the interactive API explorer
 +
* [http://developer.here.net/javascript_api_explorer API explorer]

Revision as of 14:39, 4 January 2013

A simple map game demonstrating how to used reverse geocoding in Nokia Maps

Article Metadata
Tested with
Devices(s): Google Chrome, Firefox
Compatibility
Platform(s): Web browser
Dependencies: Nokia Maps 2.2.3
Article
Keywords: Reverse Geocoding, Nokia Maps, JavaScript
Created: Maveric (21 Jun 2011)
Updated: avnee.nathani (31 Dec 2011)
Last edited: jasfox (04 Jan 2013)

Contents

Introduction

This simple game will introduce how to use the map Event listener for user map clicks, how to find the geocoordinate under the clicked mouse point and how to further use the coordinates to perform a nokia.places.search.manager.reverseGeoCode() search - all this in a form of a guessing game.

Find-a-us-state.png

Feel free to modify and further implement your own version of this game.

Prerequisites

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

The example assumes you have already added the Nokia Maps to your web page as explained in the previous article Add Maps to Any Web Page

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 Location API Business Models and Usage Restrictions 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 from the Nokia Developer API Registration page.

In the code example below is all required HTML and embedded JavaScript, a full functional application.

Game code

The full HTML and JavaScript for the guessing game can be found below. Remember to add in your own AppId and Token to get it to work.

<!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>
<title>Nokia Maps game - Locate the states of USA</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 onload="init()" >
 
<div id="map" style="width:80%; height:80%; position: absolute; "></div>
 
<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////
// 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");
 
//
/////////////////////////////////////////////////////////////////////////////////////
 
//Globals
 
var clicked_location = "";
var myContainer;
var searchManager;
var clicked_country;
var clicked_state;
var map;
var statesArray = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut",
"Delaware","District of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas",
"Kentucky","Louisiana","Maine","Marshall Islands","Maryland", "Massachusetts","Michigan","Minnesota",
"Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico",
"New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania", "Rhode Island",
"South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington",
"West Virginia","Wisconsin","Wyoming"];
var stateAbbrev = ["AL","AK","AZ","AR","CA","CO","CT","DE","DC","FL","GA","HI","ID","IL","IN","IA",
"KS","KY","LA","ME","MH","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NM","NY","ND",
"NC","OH","OK","OR","PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT","VI","WA","WV","WI","WY"]
 
var correct_answers = 0;
var wrong_answers = 0;
var randomnumber=Math.floor(Math.random()*51);
 
function random_State()
{
randomnumber=Math.floor(Math.random()*51);
alert("DOUBLE CLICK WHERE YOU THINK IS : "+statesArray[randomnumber]);
}
 
 
function init()
{
 
alert("Hello! Welcome to the game. Click OK to start.");
 
// Set the authentication token, which is needed by the web-services to authenticate your application.
nokia.maps.util.ApplicationContext.set("authenticationToken", "<Token>");
 
 
//map = new nokia.maps.map.Display(document.getElementById("map"), {'zoomLevel':4, 'center':[39.8, 98.57]});
map = new nokia.maps.map.Display(document.getElementById("map"),
{
components: [ new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Overview(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar()],
'zoomLevel': 4,
'center':[48.166667, -100.166667] // Geographical center of the USA
 
});
 
map.removeComponent(map.getComponentById("zoom.DoubleClick"));
//This will remove the default functionality on the map, where double clicking on it would zoom the map. We need
//to do this to prevent that the user doubleclick would only be registered by the game and not zooming the map.
//We would like to keep the default zoom level. The user will still have the possibility to zoom the map with the
//mouse scroll wheel.
 
map.addListener("click", eventListener); // add the listener for mouse click
 
map.set("baseMapType", map.NORMAL);
 
random_State();
 
function eventListener(event){
console.log("in EventListener");
event.preventDefault();
clicked_location = map.pixelToGeo(event.displayX, event.displayY);
console.log(clicked_location.toString());
console.log("Adding a Marker there");
add_Marker_where_clicked();
}
 
}
 
function add_Marker_where_clicked(){
myMarker = new nokia.maps.map.Marker(clicked_location);
map.objects.add(myMarker);
mapStartReverseGeoCode();
}
 
var processResults = function (data, requestStatus, requestId) {
 
if (requestStatus == "OK") {
console.log (data);
console.log("SEARCH ENDED SUCCESSFULLY");
console.log(data.location.address.country);
clicked_country = data.location.address.country;
console.log(clicked_country);
clicked_state = data.location.address.state;
console.log(clicked_state);
clicked_county = data.location.address.county;
console.log(clicked_county);
clicked_district = data.location.address.district;
console.log(clicked_district);
show_results();
 
 
} else if(requestStatus == "ERROR") {
alert("SEARCH FAILED");
}
};
 
function mapStartReverseGeoCode(){
 
console.log("Reverse geocoding: "+clicked_location.toString());
nokia.places.search.manager.reverseGeoCode({
latitude: clicked_location.latitude,
longitude: clicked_location.longitude,
onComplete: processResults
});
 
}
 
function show_results(){
 
// alert("YOU HAD SELECTED: "+clicked_state+" "+clicked_country);
 
if (stateAbbrev[randomnumber] == clicked_state)
{
correct_answers += 1;
alert("That was CORRECT! You got 1 point"+" Correct ones: "+correct_answers+" "+"Wrong ones:"+wrong_answers);
}
else
{
wrong_answers += 1;
alert("That was WRONG! You got 1 point"+" Correct ones: "+correct_answers+" "+"Wrong ones:"+wrong_answers);
}
 
random_State();
 
}
</script>
</body>
</html>

For more on the Nokia Maps API

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

You may also access the interactive API explorer

186 page views in the last 30 days.
×