×
Namespaces

Variants
Actions
(Difference between revisions)

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

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - version)
jasfox (Talk | contribs)
m (Jasfox - Update links)
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:Code Snippet]][[Category:JavaScript]]
+
[[Category:HERE Maps]][[Category:JavaScript]][[Category:Code Examples]]
 
{{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|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= [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/advanced-examples/sprite-markers.html sprite-markers.html]
 
|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=  Mozilla FireFox , Internet Exploere, Google Chrome, Safari
 
|devices=  Mozilla FireFox , Internet Exploere, Google Chrome, Safari
Line 9: Line 9:
 
|platform= Web
 
|platform= Web
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies=Nokia Maps 2.2.3
+
|dependencies=HERE Maps 2.5.3
 
|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, JavaScript, sprites, markers
+
|keywords= HERE Maps, JavaScript, sprites, markers
 
|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:
 
}}
 
}}
 
{{SeeAlso|
 
{{SeeAlso|
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.com/javascript_api HERE 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.com/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]
+
* [http://developer.here.com/apiexplorer/examples/api-for-js/markers/svg-marker.html Creating a SVG marker]
 
  }}
 
  }}
 
== Introduction ==
 
== Introduction ==
Line 38: Line 38:
 
== Example Code ==
 
== Example Code ==
 
<code javascript>
 
<code javascript>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
function addSpritesToMap(map){
<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 = "./img/sprites.png";
/////////////////////////////////////////////////////////////////////////////////////
+
  
var iconPackUrl = "http://mapswidgets.mobi/sprites/1945.png",
+
// create an icon from the icon pack url, specify the size (30px x 30px) and an offset
map = new nokia.maps.map.Display(document.getElementById("mapContainer"), {
+
// in the image where icon is (35px from the left border, 35px from the top).
center: new nokia.maps.geo.Coordinate(1.381667, 173.146944),
+
greyPlaneBitmap = new nokia.maps.gfx.BitmapImage(iconPackUrl, null, 30, 30, 35, 35),
zoomLevel: 3,
+
// create a second icon from the same url, specify the size (28px x 27px) and another offset
components: [ new nokia.maps.map.component.Behavior() ]
+
// 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
// create an icon from the icon pack url, specify the size (30px x 30px) and an offset
+
plane1 = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(1.381667, 173.166944), {
// in the image where icon is (30px from the left border, 30px from the top).
+
icon: greyPlaneBitmap
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
+
// Create marker no 2
// in the image where icon is (52px from the left border, 13px from the top).
+
plane2 = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(1.371667, 173.146944), {
planeBitmap = new nokia.maps.gfx.BitmapImage(iconPackUrl, null, 50, 44, 308, 112),
+
icon: greenPlaneBitmap
// Create marker no 1
+
});
ship = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(1.381667, 173.166944), {
+
icon: shipBitmap
+
// Create a new container
}),
+
container = new nokia.maps.map.Container()     
// Create marker no 2
+
container.objects.addAll([plane1, plane2]);
plane = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(1.371667, 173.146944), {
+
map.objects.add(container);
icon: planeBitmap
+
map.zoomTo(container.getBoundingBox());
});
+
map.set("baseMapType", map.SATELLITE);
// 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>
+
 
  </code>
 
  </code>
  
== See this example online ==
+
To see this example online:
http://mapswidgets.mobi/1945onNokiaMaps.html
+
 
 +
http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/advanced-examples/sprite-markers.html
  
 
== Sceenshots ==  
 
== Sceenshots ==  

Latest revision as of 11:31, 28 November 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
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)

[edit] 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.

[edit] 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

[edit] 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.
163 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.

×