HERE Maps API - How to use sprite images as map marker icons
hamishwillee
(Talk | contribs) m (Hamishwillee - Add dependency) |
hamishwillee
(Talk | contribs) m (Hamishwillee - Add Abstract) |
||
| Line 1: | Line 1: | ||
[[Category:Location]][[Category:Web]][[Category:Nokia Maps]] | [[Category:Location]][[Category:Web]][[Category:Nokia Maps]] | ||
| + | {{Abstract|A [http://en.wikipedia.org/wiki/Sprite_(computer_graphics) 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.}} | ||
{{ArticleMetaData | {{ArticleMetaData | ||
|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= Mozilla FireFox 7.0.1 |
|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= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later --> | |platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later --> | ||
| Line 11: | Line 11: | ||
|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. --> | ||
| − | |keywords=nokia.maps.map. | + | |keywords=nokia.maps.map.Marker |
|id= <!-- Article Id (Knowledge base articles only) --> | |id= <!-- Article Id (Knowledge base articles only) --> | ||
|language=<!-- Language category code for non-English topics - e.g. Lang-Chinese --> | |language=<!-- Language category code for non-English topics - e.g. Lang-Chinese --> | ||
| Line 23: | Line 23: | ||
== Introduction == | == 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. | 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. | These bitmaps will then be attached to map marker icons to be displayed onscreen. | ||
| Line 35: | Line 31: | ||
Note: this image is partially edited for transparency. | Note: this image is partially edited for transparency. | ||
| + | == Example Code == | ||
<code javascript> | <code javascript> | ||
<html> | <html> | ||
Revision as of 01:24, 7 December 2011
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: hamishwillee
(07 Dec 2011)
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
<html>
<head>
<title>Sprite Markers</title>
<script src="http://api.maps.nokia.com/2.0.0/jsl.js" type="text/javascript" charset="utf-8"></script>
</head>
<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
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.
Tested with
Mozilla FireFox 7.0.1
