×
Namespaces

Variants
Actions
Revision as of 03:55, 12 October 2011 by hamishwillee (Talk | contribs)

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

From Nokia Developer Wiki
Jump to: navigation, search

Contents

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 further use the coordinates to perform a reverse geocode search - all this in a form of a guessing game.

Feel free to further implement your version of this!

Prerequisites

Ovi 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"

Important 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 offering, you must get the credentials that authenticate your application against the Services. Please read through the Location API.

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.

Game code

<html>
<head>
<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>
</head>
<body onload="init()">
<div id="map" style="z-index: -1; left:0px; top:0px; width: 100%; height: 100%; position: absolute;"></div>
<script type="text/javascript">
 
//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.
ovi.mapsapi.util.ApplicationContext.set("authenticationToken", "<Token>");
 
 
//map = new ovi.mapsapi.map.Display(document.getElementById("map"), {'zoomLevel':4, 'center':[39.8, 98.57]});
map = new ovi.mapsapi.map.Display(document.getElementById("map"),
{
components: [ new ovi.mapsapi.map.component.Behavior(),
new ovi.mapsapi.map.component.ZoomBar(),
new ovi.mapsapi.map.component.Overview(),
new ovi.mapsapi.map.component.TypeSelector(),
new ovi.mapsapi.map.component.ScaleBar()],
'zoomLevel': 5,
'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("dblclick", 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 ovi.mapsapi.map.Marker(clicked_location);
map.objects.add(myMarker);
mapStartReverseGeoCode();
}
 
function mapStartReverseGeoCode(){
 
searchManager = new ovi.mapsapi.search.Manager();
searchManager.addObserver("state",
function(observedManager, key, value) {
if(value == "finished") {
if (observedManager.locations.length > 0) {
console.log("SEARCH ENDED SUCCESSFULLY");
console.log(observedManager.locations[0].address.country);
clicked_country = observedManager.locations[0].address.country;
console.log(clicked_country);
clicked_state = observedManager.locations[0].address.state;
console.log(clicked_state);
clicked_county = observedManager.locations[0].address.county;
console.log(clicked_county);
clicked_district = observedManager.locations[0].address.district;
console.log(clicked_district);
show_results();
 
}
} else if(value == "failed") {
alert("SEARCH FAILED");
}
});
 
console.log("Reverse geocoding: "+clicked_location.toString());
searchManager.reverseGeocode(clicked_location);
 
}
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 Ovi 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

333 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.

×