×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - Using the geocoding service

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - Add link.)
jasfox (Talk | contribs)
m (Jasfox - Updated example to use Nokia Maps API 2.2)
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
 +
|platform= Web
 
|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= Web browser
 
 
|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.0
 
|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. -->
Line 26: Line 26:
 
{{SeeAlso|
 
{{SeeAlso|
 
*  [http://api.maps.nokia.com/ Nokia Maps API]  
 
*  [http://api.maps.nokia.com/ Nokia Maps API]  
* [http://api.maps.nokia.com/2.1.1/playground/?example&#61;search Search example]
+
* [http://api.maps.nokia.com/en/playground/examples/maps/services/search.html Search example]
 
  }}
 
  }}
  
Line 76: Line 76:
  
 
<code java>
 
<code java>
<html>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html>  
 
<head>
 
<head>
<script type="text/javascript"
+
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.0/jsl.js"></script>
    src="http://api.maps.nokia.com/2.0.0/jsl.js" charset="utf-8">
+
    <title>Search example</title>
</script>
+
      <link rel="stylesheet" href="style.css" />
+
 
</head>
 
</head>
<div id="map" style="width:100%; height:80%;"></div>
+
<body>
<body style = "width:80%; height:80%;">
+
<div id="extra" style="top:0%; position: absolute;">  
<div id="extra">                  
+
<label for="geo_text_box"> Geocode </label><br/>             
<input type=text id="geo_text_box">
+
<input type="text" id="geo_text_box"/>
   <INPUT TYPE=BUTTON VALUE="Geo code with name" ONCLICK="mapStartGeoCode()">
+
   <input type="button" value="Geo code with name" onclick="mapStartGeoCode()"/>
   <br>  
+
   <br/>
 +
  <label for="geo_text_box"> Free text search</label><br/>   
 +
  <input type="text" id="free_text_text_box"/>
 +
  <input type="button" value="Search" onclick="mapStartFreeTextSearch()"/>
 
</div>
 
</div>
</body>
+
<div id="map" style="top:30%; width:100%; height:70%; position: absolute;"></div>
<script type="text/javascript">
+
 
+
  
 +
<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");
 +
//
 +
/////////////////////////////////////////////////////////////////////////////////////
 +
 +
 
var map;
 
var map;
 
+
 
map = new nokia.maps.map.Display(document.getElementById("map"),  
 
map = new nokia.maps.map.Display(document.getElementById("map"),  
 
{
 
{
 
+
 
     components: [ new nokia.maps.map.component.Behavior(),
 
     components: [ new nokia.maps.map.component.Behavior(),
 
                 new nokia.maps.map.component.ZoomBar(),
 
                 new nokia.maps.map.component.ZoomBar(),
Line 104: Line 117:
 
                 new nokia.maps.map.component.TypeSelector(),     
 
                 new nokia.maps.map.component.TypeSelector(),     
 
                 new nokia.maps.map.component.ScaleBar()],
 
                 new nokia.maps.map.component.ScaleBar()],
     'zoomLevel': 3,  
+
     'zoomLevel': 10,  
 
});
 
});
  
function mapStartGeoCode(){
+
map.setCenter (new nokia.maps.geo.Coordinate(18.975, 72.825833));
  var searchTerm,
+
                rs,
+
                prox = {
+
                    center: new nokia.maps.geo.Coordinate(52.5, 13.3333),
+
                    radius: 1200
+
                },
+
                bbox = new nokia.maps.geo.BoundingBox(
+
                    new nokia.maps.geo.Coordinate(50.1146125793467, 8.68348503112893),
+
                    new nokia.maps.geo.Coordinate(50.07635498046865, 8.517169952392568)
+
                );
+
  var searchManager = new nokia.maps.search.Manager();
+
            searchManager.addObserver("state", function(observedManager, key, value) {
+
                if(value == "finished") {
+
                    if (observedManager.locations.length > 0) {
+
                        if (rs) map.objects.remove(rs);
+
                        rs = (new nokia.maps.search.component.SearchResultSet(observedManager.locations)).container;
+
  
                        alert("SEARCH ENDED SUCCESSFULLY");
+
var onGeocodeComplete = function (data, requestStatus , requestId) {
                        map.objects.add(rs);
+
                        map.zoomTo(rs.getBoundingBox(), true);
+
if (requestStatus == "OK") { 
                    }
+
    alert("GEOCODE ENDED SUCCESSFULLY");
                } else if(value == "failed") {
+
    var marker = new nokia.maps.map.StandardMarker(data.location.position);
 +
    map.objects.add(marker);  
 +
    map.zoomTo(marker.getBoundingBox(), true);
  
                    alert("SEARCH FAILED.");
+
    } else if(requestStatus == "ERROR") {
                }
+
        alert("GEOCODE FAILED.");
            });
+
    }
 +
};
 
              
 
              
 +
var onSearchComplete = function (data, requestStatus , requestId) {
 +
 +
if (requestStatus == "OK") { 
 +
alert("SEARCH ENDED SUCCESSFULLY");
 +
// Convert all found locations into a set of markers
 +
var resultSet = new nokia.maps.map.Container();
 +
var locations = data.results.items;
 +
for (i = 0, len = locations.length; i < len; i++) {
 +
marker = new nokia.maps.map.StandardMarker(locations[i].position, { text: i+1 });
 +
resultSet.objects.add(marker);
 +
}
 +
// Next we add the marker(s) to the map's object collection so they will be rendered onto the map
 +
map.objects.add(resultSet);
 +
// We zoom the map to a view that encapsulates all the markers into map's viewport
 +
map.zoomTo(resultSet.getBoundingBox(), false);
 +
} else if(requestStatus == "ERROR") {
 +
alert("SEARCH FAILED.");
 +
}
 +
};           
 +
 +
function mapStartGeoCode(){
 
   var geocode = document.getElementById("geo_text_box");
 
   var geocode = document.getElementById("geo_text_box");
   alert(geocode.value);
+
 
  searchTerm = geocode.value;
+
   nokia.places.search.manager.geoCode({
  searchManager.geocode(searchTerm, prox);
+
      searchTerm geocode.value,
 +
onComplete:  onGeocodeComplete
 +
  });  
 
}
 
}
 +
 +
function mapStartFreeTextSearch(){
 +
  var freetext = document.getElementById("free_text_text_box");
 +
 
 +
  nokia.places.search.manager.findPlaces({
 +
searchTerm :  freetext.value,
 +
onComplete:  onSearchComplete,
 +
searchCenter: map.center
 +
});
 +
 
 +
 
 +
}
 +
 
</script>
 
</script>
 +
</body>
 
</html>
 
</html>
<code java>
 
  
 
</code>
 
</code>

Revision as of 18:17, 12 April 2012

This article explains how to use Nokia Maps search and geocoding service.

Article Metadata
Tested with
Devices(s): Internet Explorer, Google Chrome , Firefox
Compatibility
Platform(s): Web
Dependencies: Nokia Maps 2.2.0
Article
Created: Maveric (21 Jun 2011)
Updated: avnee.nathani (31 Dec 2011)
Last edited: jasfox (12 Apr 2012)

Contents

Introduction

In this example we will create a small online tool for the user to search the globe for a city, country and so on.

We will utilize the Nokia Maps Search and geocoding service for this.

The user can enter any string to the text box and if the search text can be geocoded to a physical location, we will put a Marker on the map for each of the found target on the result list.

For example a search for "Berlin" would result in several map Markers, as there are more than one city on the globe with that name.


Prerequisites

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

Important about Maps credentials

Nokia provides several services options within the Maps API offering. The service is free to use, but if you complete the free registration process and obtain authentication and authorization credentials, your application will have priority access to the service and will thus avoid a potential performance penalty. 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 from the Nokia Developer API Registration page.

Implementation

The full example code is provided below.

Comments on the code

We will utilize the zoomTo to cover all the findings, so the map will be zoomed out far enough for them all to become visible. For the zoomTo we must provide the name of the boundingBox, keepCenter (false by default) and optionally animation name.

If the keepCenter flag is used (true) the size of the viewport will be increased such that the original map center is still located in the center of the viewport.

var searchTerm The object used for the search var searchTerm rs is the search result

The searchManager is instantiated with : var searchManager = new nokia.maps.search.Manager();

The check for if(value == "finished") will define what will happen when the search is finished.

With the rs = (new nokia.maps.search.component.SearchResultSet(observedManager.locations)).container; we will put the Markers on the map.

The bbox = new nokia.maps.geo.BoundingBox... sets a fixed bounding box.


Example code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.0/jsl.js"></script>
<title>Search example</title>
</head>
<body>
<div id="extra" style="top:0%; position: absolute;">
<label for="geo_text_box"> Geocode </label><br/>
<input type="text" id="geo_text_box"/>
<input type="button" value="Geo code with name" onclick="mapStartGeoCode()"/>
<br/>
<label for="geo_text_box"> Free text search</label><br/>
<input type="text" id="free_text_text_box"/>
<input type="button" value="Search" onclick="mapStartFreeTextSearch()"/>
</div>
<div id="map" style="top:30%; width:100%; height:70%; 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");
//
/////////////////////////////////////////////////////////////////////////////////////
 
 
var map;
 
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': 10,
});
 
map.setCenter (new nokia.maps.geo.Coordinate(18.975, 72.825833));
 
 
var onGeocodeComplete = function (data, requestStatus , requestId) {
 
if (requestStatus == "OK") {
alert("GEOCODE ENDED SUCCESSFULLY");
var marker = new nokia.maps.map.StandardMarker(data.location.position);
map.objects.add(marker);
map.zoomTo(marker.getBoundingBox(), true);
 
} else if(requestStatus == "ERROR") {
alert("GEOCODE FAILED.");
}
};
 
var onSearchComplete = function (data, requestStatus , requestId) {
 
if (requestStatus == "OK") {
alert("SEARCH ENDED SUCCESSFULLY");
// Convert all found locations into a set of markers
var resultSet = new nokia.maps.map.Container();
var locations = data.results.items;
for (i = 0, len = locations.length; i < len; i++) {
marker = new nokia.maps.map.StandardMarker(locations[i].position, { text: i+1 });
resultSet.objects.add(marker);
}
// Next we add the marker(s) to the map's object collection so they will be rendered onto the map
map.objects.add(resultSet);
// We zoom the map to a view that encapsulates all the markers into map's viewport
map.zoomTo(resultSet.getBoundingBox(), false);
} else if(requestStatus == "ERROR") {
alert("SEARCH FAILED.");
}
};
 
function mapStartGeoCode(){
var geocode = document.getElementById("geo_text_box");
 
nokia.places.search.manager.geoCode({
searchTerm : geocode.value,
onComplete: onGeocodeComplete
});
}
 
function mapStartFreeTextSearch(){
var freetext = document.getElementById("free_text_text_box");
 
nokia.places.search.manager.findPlaces({
searchTerm : freetext.value,
onComplete: onSearchComplete,
searchCenter: map.center
});
 
 
}
 
</script>
</body>
</html>

Screenshots

NokiaMapsGeocoding.png

For more on Nokia Maps API

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

You may also access the interactive Nokia Maps API playground,

Tested with

  • Google Chrome 11.0x
  • Mozilla Firefox 5.0
965 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.

×