×
Namespaces

Variants
Actions
Revision as of 16:05, 29 November 2011 by Maveric (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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

From Nokia Developer Wiki
Jump to: navigation, search

Delete instructional text in italic

This article explains how to use sprite images as map marker icons Replace the abstract text with a short paragraph (or sentence) describing what the topic covers.

Contents

Introduction

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

<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.com/1945onNokiaMaps.html


Tested with

Mozilla FireFox 7.0.1


Add categories below. Remove Category:Draft when the page is complete or near complete

158 page views in the last 30 days.
×