×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to add map markers

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
jasfox (Talk | contribs)
m (Jasfox - Update to Nokia Maps.)
Line 18: Line 18:
 
|review-by=<!-- After re-review: [[User:username]] -->
 
|review-by=<!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
|update-by= <!-- After significant update: [[User:username]]-->
+
|update-by= [[User:jasfox]]
|update-timestamp= <!-- After significant update: YYYYMMDD -->
+
|update-timestamp= 20120206
 
|creationdate=20110621
 
|creationdate=20110621
 
|author=[[User:Maveric]]
 
|author=[[User:Maveric]]
 
}}
 
}}
 +
{{SeeAlso|
 +
* [[Nokia Maps API - Add Maps To Any Web Page]]
 +
*  [http://api.maps.nokia.com/ Nokia Maps API]  }}
  
  
Line 33: Line 36:
 
A supported web browser (basically any modern web browser)
 
A 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 [[Nokia Maps API - Add Maps To Any Web Page]]
  
 
==Important about Maps credentials==
 
==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  
+
With the 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 API.
 
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"
+
For more information on how to obtain the credentials, please start with the  Nokia Maps API Developers Guide section "Acquiring API credentials"
 
   
 
   
 
==Implementation==
 
==Implementation==
  
First we will need to define the Marker. This will be done by specifying:
+
First we will need to define the Marker. This will be done by specifying the location as a GeoCoordinate and then defining the marker:
 
+
 
<code java>
 
<code java>
    myMarker = new ovi.mapsapi.map.Marker([50.1,13.1]);
+
  var center =   new nokia.maps.geo.Coordinate(40.738728,-73.99236);
 +
  var    marker = new nokia.maps.map.StandardMarker(center);
 
</code>
 
</code>
  
The Marker needs geocoordinates as parameters, that is, the latitude and longitude it will be placed on the map. In our example we are using 50.1 for the
+
The Marker needs geocoordinates as parameters, that is, the latitude and longitude it will be placed on the map. In our example we are using 40.738728 for the
latitude and 13.1 for the longitude. myMarker now contains a new Marker object.
+
latitude and -73.99236 for the longitude This will place a marker in Central New York. ''marker'' now contains a new ''StandardMarker'' object.
  
To be able to put the Marker on the map, we will need to introduce a new Container. A Container is used to group Objects, thus allowing it to operate on  
+
We may place the ''StandardMarker''on the map, or we can add it to a new Container. A Container is used to group Objects, thus allowing it to operate on  
 
a whole group of objects without the need to iteratively visit each Object (i.e., for changing the visibility).
 
a whole group of objects without the need to iteratively visit each Object (i.e., for changing the visibility).
  
<code java>
+
<code javascript>
    var myContainer = new ovi.mapsapi.map.Container()
+
  var container = new nokia.maps.map.Container()
 
</code>
 
</code>
  
Now that we have the Container ready, we can add the Marker into it:
+
Now that we have the ''Container'' ready, we can add the ''StandardMarker'' into it:
  
 
<code java>
 
<code java>
     myContainer.objects.add(myMarker);
+
     container .objects.add(marker);
     //or another way of putting this e.g. myContainer.objects.add(new ovi.mapsapi.map.StandardMarker([52.45705,13.21173]));
+
     //or another way of putting this e.g. container.objects.add( new nokia.maps.map.StandardMarker( new nokia.maps.geo.Coordinate(40.738728,-73.99236)));
 
</code>
 
</code>
 
                  
 
                  
And then when the Marker is in the Container, we will need to add the Container to the map objects collection, to be able to show the content on it:
+
And then when the ''StandardMarker'' is in the ''Container'', we will need to add the ''Container'' to the map objects collection, to be able to show the content on it:
  
 
<code java>
 
<code java>
     map.objects.add(myContainer);         
+
     map.objects.add(container);         
 
</code>
 
</code>
  
The properties of the Marker can be further manipulated, e.g. you can make the Marker draggable (it is not that by default) if you wish:
+
The properties of the ''StandardMarker'' can be further manipulated, e.g. you can make the ''Marker'' draggable (it is not that by default) if you wish:
  
<code java>
+
<code javascript>
     myMarker.set("draggable",true);     
+
     marker.set("draggable",true);     
 
</code>
 
</code>
  
And to make the Marker static again, you would give:
+
And to make the ''StandardMarker' 'static again, you would give:
  
<code java>
+
<code javascript>
     myMarker.set("draggable",false);
+
     marker.set("draggable",false);
 
</code>
 
</code>
  
For a marker you can set a text e.g.  
+
For a ''StandardMarker''you can set the text e.g.  
  
<code>
+
<code javascript>
     myMarker.set("text","Your marker!")
+
     marker.set("text","Your marker!")
 
</code>
 
</code>
   
+
Sometimes it may be useful to know if a ''Container'' has been added to the ''Display''. Earlier we could have initiated the ''Display'' object e.g. like this:
An external image can be attached as follows:
+
 
+
<code java>
+
    MyMarker.set("icon","https://lh4.googleusercontent.com/-KF_2mI6ah7k/TQdNED2s0PI/AAAAAAAAABw/gxMRWz4rY78/DSCF0469.JPG");
+
</code>
+
   
+
Or you can select from the predefined list of shapes:
+
 
+
<code java>
+
    var use_this_shape = "star";
+
    myMarker.set("shape", use_this_shape);   
+
 
+
 
+
Sometimes it may be useful to know if a Container has been added to the Display. Earlier we could have initiated the Display object e.g. like this:
+
  
<code>
+
<code javascript>
 
...
 
...
     var map = new ovi.mapsapi.map.Display(document.getElementById("map"),  
+
     var map = nokia.maps.map.Display(document.getElementById("map"),  
 
...
 
...
 
</code>
 
</code>
Line 115: Line 104:
  
 
<code java>
 
<code java>
     test = myMarkerContainer.isAdded (map)
+
     test = marker.isAdded (map)
 
</code>
 
</code>
  
Line 121: Line 110:
  
  
With the isVisible (display) : Boolean  we will get true if the object's visibility as well as all parent's visibilities are true and if the object is
+
With the'' isVisible (display) : Boolean'' we will get true if the object's visibility as well as all parent's visibilities are true and if the object is
attached to a map (i.e. parent chain ends with a map). The returned value is only valid for the given ovi.mapsapi.map.Display object.  
+
attached to a map (i.e. parent chain ends with a map). The returned value is only valid for the given ''nokia.maps.map.Display'' object.  
  
 
Parameters:
 
Parameters:
  
{ovi.mapsapi.map.Display}  
+
{nokia.maps.map.Display}  
 
display    The display to check.  
 
display    The display to check.  
  
Line 132: Line 121:
  
 
<code java>
 
<code java>
     test = myMarkerContainer.isVisible(map);
+
     test = marker.isVisible(map);
 
</code>
 
</code>
  
 
Again, this would result in “true”.
 
Again, this would result in “true”.
  
With the getParent (display) we can get the parent of the map object.
+
With the'' getParent (display)'' we can get the parent of the map object.
 
   
 
   
 
Parameters:
 
Parameters:
  
{ovi.mapsapi.map.Display}  
+
{nokia.maps.map.Display}  
 
display    The display for which to return the parent object.  
 
display    The display for which to return the parent object.  
  
 
Returns:
 
Returns:
{ovi.mapsapi.map.Object}  
+
{nokia.maps.map.Object}  
The parent object of this object for the given display or undefined if this map object has no parent.  
+
The ''parent'' object of this object for the given display or undefined if this map object has no parent.  
  
 
<code java>
 
<code java>
     test = myMarkerContainer.getParent(map);
+
     test = marker.getParent(map);
 
</code>
 
</code>
  
If we want to get the Display names that the Container is attached to, this could be queried as follows:
+
If we want to get the ''Display'' names that the ''Container'' is attached to, this could be queried as follows:
 
<code java>
 
<code java>
     test = myMarkerContainer.getDisplays();
+
     test = marker.getDisplays();
 
</code>
 
</code>
  
This case we would know already there is the “map” Display, so requesting now the question myMarkerContainer.isAdded (test) would give us “true”,  
+
This case we would know already there is the “map” Display, so requesting now the question'' marker.isAdded (test)'' would give us “true”,  
because myMarkerContainer is attached to the “map”.
+
because ''marker'' is attached to the “map”.
  
 
==Example code==
 
==Example code==
Line 164: Line 153:
 
Here is a full example with required HTML and embedded JavaScript.
 
Here is a full example with required HTML and embedded JavaScript.
  
<code java>
+
<code javascript>
<html>
+
<!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>
 
<head>
 +
<meta name="generator" content=
 +
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
 +
<meta http-equiv="content-type" content=
 +
"text/html; charset=us-ascii" />
 +
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
 
<title>Marker on the Map</title>
 
<title>Marker on the Map</title>
<script src="http://api.maps.ovi.com/jsl.js" type="text/javascript" charset="utf-8"></script>
+
<!-- By default we add ?kml=auto&heatmap=auto to auto load KML & heatmap package remove params if package are not needed -->
 +
 
 +
<script type="text/javascript" charset="UTF-8" src=
 +
"http://api.maps.nokia.com/2.1.0/jsl.js?kml=auto&amp;heatmap=auto">
 +
</script>
 
</head>
 
</head>
 
<body>
 
<body>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 100%; height: 100%; position: absolute;"></div>
+
<div id="mapContainer" style=
 +
"z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;">
 +
</div>
 
<script type="text/javascript">
 
<script type="text/javascript">
 +
//<![CDATA[
 +
                        // Don't forget to set your API credentials
 +
                        // nokia.maps.util.ApplicationContext.set({"appId": "YOUR APPID", "authenticationToken": "YOUR TOKEN"});
 +
        ///            THE LAT AND LONG HERE ARE IN CENTRAL NEW YORK
 +
        var center =    new nokia.maps.geo.Coordinate(40.738728,-73.99236);
 +
       
 +
// Get the DOM node to which we will append the map
 +
var mapContainer = document.getElementById("mapContainer");
  
// Set the authentication token, which is needed by the web-services to authenticate your application.
+
// Create a map inside the map container DOM node
ovi.mapsapi.util.ApplicationContext.set("authenticationToken", "<Token>");
+
var map = new nokia.maps.map.Display(mapContainer, {
 
+
        // initial center and zoom level of the map
var map = new ovi.mapsapi.map.Display(document.getElementById("map"), {'zoomLevel':8, 'center':[53.1, 15.1]});
+
        center: center,
 
+
        zoomLevel: 15,
map.set("baseMapType", map.SATELLITE);
+
        components: [
 
+
                new nokia.maps.map.component.ZoomBar(),
myMarker = new ovi.mapsapi.map.Marker([52.52,13.4]);
+
                new nokia.maps.map.component.Behavior(),
var myContainer = new ovi.mapsapi.map.Container()
+
                new nokia.maps.map.component.TypeSelector(),
myContainer.objects.add(myMarker);
+
                new nokia.maps.map.component.Traffic(),
map.objects.add(myContainer)
+
                new nokia.maps.map.component.PublicTransport(),
 +
                new nokia.maps.map.component.Overview(),
 +
                new nokia.maps.map.component.ScaleBar(),
 +
                new nokia.maps.positioning.component.Positioning(),
 +
                new nokia.maps.map.component.RightClick(),
 +
                new nokia.maps.search.component.RightClick(),
 +
                new nokia.maps.routing.component.RightClick()
 +
        ]
 +
});
 +
var   marker = new nokia.maps.map.StandardMarker(center);
 +
map.objects.add(marker);
 +
//]]>
 
</script>
 
</script>
 
</body>
 
</body>
Line 190: Line 211:
 
</code>
 
</code>
  
 +
==For more on Nokia Maps API==
  
For more on Ovi Maps API
+
Please check out the Nokia Maps API full documentation and API reference here:
 
+
* http://api.maps.nokia.com/
Please check out the Ovi Maps API full documentation and API reference here:
+
 
+
http://api.maps.ovi.com
+
  
Tested on
+
You may also access the interactive Nokia Maps API playground,
 +
* http://api.maps.nokia.com/2.1.0/playground/index.html
  
Google Chrome 11.0x
+
==Tested on==
  
Mozilla Firefox 5.0
+
* Google Chrome 11.0x
 +
* Mozilla Firefox 4.0x, 5.0

Revision as of 14:40, 6 February 2012

Article Metadata
Article
Created: Maveric (21 Jun 2011)
Updated: jasfox (06 Feb 2012)
Last edited: jasfox (06 Feb 2012)


Contents

Introduction

In this article we will go thru on how to add one or more Markers to the map. A marker defines an Object that may display an icon on the map view.

Prerequisites

A 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 Nokia Maps API - Add Maps To Any Web Page

Important about Maps credentials

With the 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 API.

For more information on how to obtain the credentials, please start with the Nokia Maps API Developers Guide section "Acquiring API credentials"

Implementation

First we will need to define the Marker. This will be done by specifying the location as a GeoCoordinate and then defining the marker:

   var center =    new nokia.maps.geo.Coordinate(40.738728,-73.99236);
var marker = new nokia.maps.map.StandardMarker(center);

The Marker needs geocoordinates as parameters, that is, the latitude and longitude it will be placed on the map. In our example we are using 40.738728 for the latitude and -73.99236 for the longitude This will place a marker in Central New York. marker now contains a new StandardMarker object.

We may place the StandardMarkeron the map, or we can add it to a new Container. A Container is used to group Objects, thus allowing it to operate on a whole group of objects without the need to iteratively visit each Object (i.e., for changing the visibility).

   var container = new nokia.maps.map.Container()

Now that we have the Container ready, we can add the StandardMarker into it:

    container .objects.add(marker);
//or another way of putting this e.g. container.objects.add( new nokia.maps.map.StandardMarker( new nokia.maps.geo.Coordinate(40.738728,-73.99236)));

And then when the StandardMarker is in the Container, we will need to add the Container to the map objects collection, to be able to show the content on it:

    map.objects.add(container);

The properties of the StandardMarker can be further manipulated, e.g. you can make the Marker draggable (it is not that by default) if you wish:

    marker.set("draggable",true);

And to make the StandardMarker' 'static again, you would give:

    marker.set("draggable",false);

For a StandardMarkeryou can set the text e.g.

    marker.set("text","Your marker!")

Sometimes it may be useful to know if a Container has been added to the Display. Earlier we could have initiated the Display object e.g. like this:

...
var map = nokia.maps.map.Display(document.getElementById("map"),
...

Now, with the reference to “map”, we can request:

    test = marker.isAdded (map)

In our case test would result in “true”.


With the isVisible (display) : Boolean we will get true if the object's visibility as well as all parent's visibilities are true and if the object is attached to a map (i.e. parent chain ends with a map). The returned value is only valid for the given nokia.maps.map.Display object.

Parameters:

{nokia.maps.map.Display} display The display to check.

In our case we could ask:

    test = marker.isVisible(map);

Again, this would result in “true”.

With the getParent (display) we can get the parent of the map object.

Parameters:

{nokia.maps.map.Display} display The display for which to return the parent object.

Returns: {nokia.maps.map.Object} The parent object of this object for the given display or undefined if this map object has no parent.

    test = marker.getParent(map);

If we want to get the Display names that the Container is attached to, this could be queried as follows:

    test = marker.getDisplays();

This case we would know already there is the “map” Display, so requesting now the question marker.isAdded (test) would give us “true”, because marker is attached to the “map”.

Example code

Here is a full example with required HTML and embedded JavaScript.

<!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 name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<meta http-equiv="content-type" content=
"text/html; charset=us-ascii" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<title>Marker on the Map</title>
<!-- By default we add ?kml=auto&heatmap=auto to auto load KML & heatmap package remove params if package are not needed -->
 
<script type="text/javascript" charset="UTF-8" src=
"http://api.maps.nokia.com/2.1.0/jsl.js?kml=auto&amp;heatmap=auto">
</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
// nokia.maps.util.ApplicationContext.set({"appId": "YOUR APPID", "authenticationToken": "YOUR TOKEN"});
/// THE LAT AND LONG HERE ARE IN CENTRAL NEW YORK
var center = new nokia.maps.geo.Coordinate(40.738728,-73.99236);
 
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
 
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// initial center and zoom level of the map
center: center,
zoomLevel: 15,
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(),
new nokia.maps.map.component.RightClick(),
new nokia.maps.search.component.RightClick(),
new nokia.maps.routing.component.RightClick()
]
});
var marker = new nokia.maps.map.StandardMarker(center);
map.objects.add(marker);
//]]>
</script>
</body>
</html>

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 on

  • Google Chrome 11.0x
  • Mozilla Firefox 4.0x, 5.0
474 page views in the last 30 days.