×
Namespaces

Variants
Actions

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

From Nokia Developer Wiki
Jump to: navigation, search

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

Article Metadata
Code ExampleTested with
Devices(s): Google Chrome, Firefox
Compatibility
Platform(s): Web browser
Dependencies: HERE Maps 2.5.3
Article
Keywords: Reverse Geocoding, HERE Maps, JavaScript
Created: Maveric (21 Jun 2011)
Updated: avnee.nathani (31 Dec 2011)
Last edited: jasfox (20 Dec 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

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

The example assumes you have already added the HERE Maps to your web page as explained in the previous article HERE Maps API - 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 JavaScript for the guessing game can be found below. Remember to add in your own AppId and Token to get it to work.

 var statesArray = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut",
"Delaware","District of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas",
"Kentucky","Louisiana","Maine","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 right = 0;
var wrong = 0;
 
map.set("center", new nokia.maps.geo.Coordinate(42.16, -100.16));
map.set("zoomLevel", 3);
map.set("baseMapType", nokia.maps.map.Display.SATELLITE_PLAIN);
select_random_state();
addClickEventListener(map);
function select_random_state(){
randomnumber=Math.floor(Math.random()*50);
$("#question").text('Find : ' +statesArray[randomnumber]);
}
function addClickEventListener(map){
map.addListener("click",function (event){
event.preventDefault();
coordinate = map.pixelToGeo(event.displayX, event.displayY);
map.objects.add(new nokia.maps.map.Marker(coordinate));
nokia.places.search.manager.reverseGeoCode({
latitude: coordinate.latitude,
longitude: coordinate.longitude,
onComplete: processResults
})
});
}
function processResults(data, requestStatus, requestId) {	
if (requestStatus == "OK" ) {
if (data.location !== undefined){
var state = data.location.address.state;
 
if (statesArray[randomnumber] == state){
map.objects.clear();
select_random_state();
$("#answer").text("Correct answer, that was:" + state);
right += 1;
 
} else {
$("#answer").text("That was:" + state);
wrong += 1;
}
$("#correct_answers").text("Correct:" + right);
$("#incorrect_answers").text("Wrong:" + wrong);
}
}
}


A working example can be found at:

http://heremaps.github.io/examples/examples.html#find-an-american-state__index

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

This page was last modified on 20 December 2013, at 18:38.
203 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.

×