Namespaces
Variants
Actions
(Difference between revisions)

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

Jump to: navigation, search
m (Maveric - - →Example code)
m (Jasfox - version)
(14 intermediate revisions by 6 users not shown)
Line 1: Line 1:
−
[[Category:Draft]]
+
[[Category:Nokia Maps]][[Category:Code Snippet]][[Category:JavaScript]]
−
''Delete instructional text in italic''
+
{{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.}}
−
 
+
−
{{Abstract|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.''
+
  
 +
{{ArticleMetaData
 +
|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]]) -->
 +
|devices=  Mozilla FireFox , Internet Exploere, Google Chrome, Safari
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= Web
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies=Nokia Maps 2.2.3
 +
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= Nokia Maps, JavaScript, sprites, markers
 +
|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]]
 +
}}
 +
{{SeeAlso|
 +
* [http://developer.here.net/javascript_api Nokia Maps API]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/image-markers-using-css-sprite.html Image Markers using Sprites]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/svg-marker.html Creating a SVG marker]
 +
}}
 
== Introduction ==
 
== Introduction ==
  
−
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.
+
The example code below will load an online icon pack image (iconPackUrl) and then use the Map API's GFX library method ({{Icode|gfx.BitmapImage}}) to pick up images out of the pack defined by a position and a size.
−
 
+
−
(Source: Wikipedia.org)
+
−
 
+
−
[[Category:Location]][[Category:Web]][[Category:Ovi Maps]]
+
−
== 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.
 
These bitmaps will then be attached to map marker icons to be displayed onscreen.
  
Line 20: Line 36:
 
Note: this image is partially edited for transparency.
 
Note: this image is partially edited for transparency.
  
−
<code java>
+
== Example Code ==
−
<html>
+
<code javascript>
−
  <head>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
−
<title>Sprite Markers</title>
+
<html xmlns="http://www.w3.org/1999/xhtml">
−
<script src="http://api.maps.nokia.com/2.0.0/jsl.js" type="text/javascript" charset="utf-8"></script>
+
    <head>
−
</head>
+
      <title>Sprite Images</title>
−
<body onLoad="runGame();">
+
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
−
<div id="d1"></div>
+
      <script type="text/javascript"
−
<script type="text/javascript">
+
            src="http://api.maps.nokia.com/2.2.3/jsl.js" charset="utf-8">
−
+
        </script>
−
var iconPackUrl = "http://mapswidgets.mobi/sprites/1945.png",
+
    </head>
−
map = new nokia.maps.map.Display(document.getElementById("d1"), {
+
    <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),
 
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 64: 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 ==
−
 
 
http://mapswidgets.mobi/1945onNokiaMaps.html
 
http://mapswidgets.mobi/1945onNokiaMaps.html
  
−
== Tested with ==
+
== Sceenshots ==  
−
 
+
You can see sprite images a Map marker icons below.  
−
Mozilla FireFox 7.0.1
+
−
 
+
−
 
+
  
−
''Add categories below. Remove Category:Draft when the page is complete or near complete''
+
[[File:MapImg2.png]]
 +
[[File:MapImg1.png]]

Revision as of 15:16, 3 January 2013

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 , Internet Exploere, Google Chrome, Safari
Compatibility
Platform(s): Web
Dependencies: Nokia Maps 2.2.3
Article
Keywords: Nokia Maps, JavaScript, sprites, markers
Created: Maveric (29 Nov 2011)
Last edited: jasfox (03 Jan 2013)

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.3/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

Retrieved from "http://www.developer.nokia.com/Community/Wiki/index.php?title=HERE_Maps_API_-_How_to_use_sprite_images_as_map_marker_icons&oldid=181872"
363 page views in the last 30 days.
Featured links
Develop
Distribution
Blogs
Community
Resources
Site Map
Terms & Conditions
Privacy Policy
Nokia Developer aims to help you create apps and publish them so you can connect with users around the world.

京ICP备05048969号  © Copyright Nokia 2013 All rights reserved