×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to use sprite images as map marker icons

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 38: Line 38:
 
== Example Code ==
 
== Example Code ==
 
<code javascript>
 
<code javascript>
<html>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <head>
+
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Sprite Markers</title>
+
    <head>
<script src="http://api.maps.nokia.com/2.0.0/jsl.js" type="text/javascript" charset="utf-8"></script>
+
      <title>Sprite Images</title>
</head>
+
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body onLoad="runGame();">
+
      <script type="text/javascript"
<div id="d1"></div>
+
            src="http://api.maps.nokia.com/2.2.0/jsl.js" charset="utf-8">
<script type="text/javascript">
+
        </script>
+
    </head>
var iconPackUrl = "http://mapswidgets.mobi/sprites/1945.png",
+
    <body>
map = new nokia.maps.map.Display(document.getElementById("d1"), {
+
 
 +
        <div id="mapContainer" style="z-index: -1; left:0px; top:0px; width: 100%; 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");
 +
 +
//
 +
/////////////////////////////////////////////////////////////////////////////////////
 +
 
 +
var iconPackUrl = "http://mapswidgets.mobi/sprites/1945.png",
 +
map = new nokia.maps.map.Display(document.getElementById("mapContainer"), {
 
center: new nokia.maps.geo.Coordinate(1.381667, 173.146944),
 
center: new nokia.maps.geo.Coordinate(1.381667, 173.146944),
 
zoomLevel: 3,
 
zoomLevel: 3,
 
components: [ new nokia.maps.map.component.Behavior() ]
 
components: [ new nokia.maps.map.component.Behavior() ]
 
}),
 
}),
+
 
// create an icon from the icon pack url, specify the size (30px x 30px) and an offset
 
// create an icon from the icon pack url, specify the size (30px x 30px) and an offset
 
// in the image where icon is (30px from the left border, 30px from the top).
 
// in the image where icon is (30px from the left border, 30px from the top).
Line 81: Line 97:
 
map.objects.add(markerContainer);
 
map.objects.add(markerContainer);
 
// Zoom the map to cover the markers of the container
 
// Zoom the map to cover the markers of the container
map.zoomTo(markerContainer.getBoundingBox(),false,true);
+
map.zoomTo(markerContainer.getBoundingBox(),false,true);
 
 
</script>
+
</script>
</body>
+
</body>
 
</html>
 
</html>
</code>
+
</code>
  
 
== See this example online ==
 
== See this example online ==

Revision as of 15:45, 13 April 2012

A sprite is a two-dimensional image or animation that is integrated or overlaid into a larger scene. This article shows how to overlay sprites over a map using the Nokia Map API's GFX library method.

Article Metadata
Tested with
Devices(s): Mozilla FireFox 7.0.1
Dependencies: Nokia Maps 2.0.0
Article
Keywords: nokia.maps.map.Marker
Created: Maveric (29 Nov 2011)
Last edited: jasfox (13 Apr 2012)

Contents

Introduction

The example code below will load an online icon pack image (iconPackUrl) and then use the Map API's GFX library method (gfx.BitmapImage) to pick up images out of the pack defined by a position and a size. These bitmaps will then be attached to map marker icons to be displayed onscreen.

The icon image is a free icon pack called "1945" and can be obtained in various image formats, one is located here: http://www.2dgamecreators.com/tutorials/stripanimmakerlite/1945.bmp

Note: this image is partially edited for transparency.

Example Code

<!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>Sprite Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript"
src="http://api.maps.nokia.com/2.2.0/jsl.js" charset="utf-8">
</script>
</head>
<body>
 
<div id="mapContainer" style="z-index: -1; left:0px; top:0px; width: 100%; 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");
 
//
/////////////////////////////////////////////////////////////////////////////////////
 
var iconPackUrl = "http://mapswidgets.mobi/sprites/1945.png",
map = new nokia.maps.map.Display(document.getElementById("mapContainer"), {
center: new nokia.maps.geo.Coordinate(1.381667, 173.146944),
zoomLevel: 3,
components: [ new nokia.maps.map.component.Behavior() ]
}),
 
// create an icon from the icon pack url, specify the size (30px x 30px) and an offset
// in the image where icon is (30px from the left border, 30px from the top).
shipBitmap = new nokia.maps.gfx.BitmapImage(iconPackUrl, null, 32, 180, 470, 310),
// create a second icon from the same url, specify the size (30px x 30px) and another offset
// in the image where icon is (52px from the left border, 13px from the top).
planeBitmap = new nokia.maps.gfx.BitmapImage(iconPackUrl, null, 50, 44, 308, 112),
// Create marker no 1
ship = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(1.381667, 173.166944), {
icon: shipBitmap
}),
// Create marker no 2
plane = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(1.371667, 173.146944), {
icon: planeBitmap
});
// Set Map center point
map.set("center", [-1.366667, 176.466667]);
// Define the map type to be SATELLITE
map.set("baseMapType", map.SATELLITE);
// Create a new container
markerContainer = new nokia.maps.map.Container()
// Add marker 1 to the container
markerContainer.objects.add(ship);
// Add marker 2 to the container
markerContainer.objects.add(plane);
// Add the container to the map
map.objects.add(markerContainer);
// Zoom the map to cover the markers of the container
map.zoomTo(markerContainer.getBoundingBox(),false,true);
 
</script>
</body>
</html>

See this example online

http://mapswidgets.mobi/1945onNokiaMaps.html

Sceenshots

You can see sprite images a Map marker icons below.

MapImg2.png MapImg1.png

Tested with

Mozilla FireFox 7.0.1

248 page views in the last 30 days.
×