×
Namespaces

Variants
Actions

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

From Nokia Developer Wiki
Jump to: navigation, search

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
Code Example
Source file: sprite-markers.html
Tested with
Devices(s): Mozilla FireFox , Internet Exploere, Google Chrome, Safari
Compatibility
Platform(s): Web
Dependencies: HERE Maps 2.5.3
Article
Keywords: HERE Maps, JavaScript, sprites, markers
Created: Maveric (29 Nov 2011)
Last edited: jasfox (28 Nov 2013)

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

function addSpritesToMap(map){
 
 
var iconPackUrl = "./img/sprites.png";
 
// create an icon from the icon pack url, specify the size (30px x 30px) and an offset
// in the image where icon is (35px from the left border, 35px from the top).
greyPlaneBitmap = new nokia.maps.gfx.BitmapImage(iconPackUrl, null, 30, 30, 35, 35),
// create a second icon from the same url, specify the size (28px x 27px) and another offset
// in the image where icon is (5px from the left border, 72px from the top).
greenPlaneBitmap = new nokia.maps.gfx.BitmapImage(iconPackUrl, null, 28, 27, 5, 72),
// Create marker no 1
plane1 = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(1.381667, 173.166944), {
icon: greyPlaneBitmap
}),
// Create marker no 2
plane2 = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(1.371667, 173.146944), {
icon: greenPlaneBitmap
});
 
// Create a new container
container = new nokia.maps.map.Container()
container.objects.addAll([plane1, plane2]);
map.objects.add(container);
map.zoomTo(container.getBoundingBox());
map.set("baseMapType", map.SATELLITE);
}

To see this example online:

http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/advanced-examples/sprite-markers.html

Sceenshots

You can see sprite images a Map marker icons below.

MapImg2.png MapImg1.png

This page was last modified on 28 November 2013, at 11:31.
192 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.

×