(Difference between revisions)

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

From Nokia Developer Wiki
Jump to: navigation, search
Maveric (Talk | contribs)
m (Maveric -)
girishpadia (Talk | contribs)
m (Girishpadia - added article metadata)
Line 1: Line 1:
[[Category:Location]][[Category:Web]][[Category:Ovi Maps]]
[[Category:Location]][[Category:Web]][[Category:Ovi Maps]]
{{Abstract|This article explains how to use sprite images as map marker icons }}  
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
|Tested-with = Mozilla FireFox 7.0.1
|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'') -->
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
|id= <!-- Article Id (Knowledge base articles only) -->
|language=<!-- Language category code for non-English topics - e.g. Lang-Chinese -->
|review-by=<!-- After re-review: [[User:username]] -->
|review-timestamp=<!-- After re-review: YYYYMMDD -->
|update-by=<!-- After significant update: [[User:username]]-->
|update-timestamp=<!-- After significant update: YYYYMMDD -->
|creationdate= 20111129
|author= [[User:Maveric]]
== Introduction ==
== Introduction ==
Line 18: Line 38:
Note: this image is partially edited for transparency.
Note: this image is partially edited for transparency.
<code java>
<code javascript>

Revision as of 11:03, 30 November 2011

Article Metadata
Created: Maveric (29 Nov 2011)
Last edited: girishpadia (30 Nov 2011)



In computer graphics, a sprite (also known by other names; see Synonyms below) is a two-dimensional image or animation that is integrated into a larger scene. Initially used to describe graphical objects handled separately of the memory bitmap of a video display, the term has since been applied more loosely to refer to various manner of graphical overlays.

(Source: Wikipedia.org)

Example code

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.

<title>Sprite Markers</title>
<script src="http://api.maps.nokia.com/2.0.0/jsl.js" type="text/javascript" charset="utf-8"></script>
<body onLoad="runGame();">
<div id="d1"></div>
<script type="text/javascript">
var iconPackUrl = "http://mapswidgets.mobi/sprites/1945.png",
map = new nokia.maps.map.Display(document.getElementById("d1"), {
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
// Add marker 2 to the container
// Add the container to the map
// Zoom the map to cover the markers of the container

See this example online


Tested with

Mozilla FireFox 7.0.1

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