Printable View
I had text displayed on the StandardMarker using text: "foo" but I'm trying to change to using Marker instead so I can use a sprite (like here [url]http://api.maps.nokia.com/en/playground/env/desktop/#ex_maps_example_spritedmarkers_desc[/url]).
Can text be applied to a sprite Marker as it can for a StandardMarker because it doesn't seem to be?
The simple answer is no you can't. [B]StandardMarkers [/B]can have an associated text, but Image [B]Markers[/B] are simple bitmaps. Bitmaps don't have texts.
There is a workaround though. Use a SVG marker with a <text> element and no background and place it [B]over [/B] the sprited marker. [url]http://api.maps.nokia.com/en/playground/examples/maps/map_objects/customsvgmarker.html[/url]
This can be done using the zIndex property.
[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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<title>SVG and Sprite</title>
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.1/jsl.js"></script>
</head>
<body>
<div id="mapcanvas" style="width:800px; height:400px;" > </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");
//
/////////////////////////////////////////////////////////////////////////////////////
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapcanvas");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
components: [
new nokia.maps.map.component.panning.Drag(),
new nokia.maps.map.component.panning.Kinetic()
],
'zoomLevel': 2,
'center': [43.09, -53.674]
});
var iconSVG =
'<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg">' +
'<text x="16" y="20" font-size="10pt" font-family="arial" font-weight="bold" text-anchor="middle" fill="white" textContent="__TEXTCONTENT__">__TEXT__</text>' +
'</svg>',
svgParser = new nokia.maps.gfx.SvgParser(),
// Helper function that allows us to easily set the text and color of our SVG marker.
createIcon = function (text) {
var svg = iconSVG
.replace(/__TEXT__/g, text)
return new nokia.maps.gfx.GraphicsImage(svgParser.parseSvg(svg));
};
/* On mouse over we want to change the marker's color and text
* hence we create two svg icons which we flip on mouse over.
*/
var markerText = "1";
var markerTextOnhover = "2";
var markerIcon = createIcon(markerText);
var markerIconOnHover = createIcon(markerTextOnhover);
var marker = new nokia.maps.map.Marker(
// Geo coordinate of Brandenburger tor in Berlin, Germany
[52.51652540955727, 13.380154923889933],
{
icon: markerIcon
}
);
var markersIconsUrl = "http://api.maps.nokia.com/en/playground/examples/maps/res/markers.png";
var startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 32, 34, 0, 0);
var startIconOnHover = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 32, 46, 0, 34);
var marker2 = new nokia.maps.map.Marker(
// Geo coordinate of Brandenburger tor in Berlin, Germany
[52.51652540955727, 13.380154923889933],
{
icon: startIcon,
zIndex: -999
}
);
marker.addListener("mouseover", function (evt) {
marker.set("icon", markerIconOnHover);
marker2.set("icon", startIconOnHover);
/* Display's update() can be used to force an immediate re-render of the current view
* instead of the default delayed one, we do this to make the icons switch instantly on mouse over.
*/
map.update(-1, 0);
});
marker.addListener("mouseout", function (evt) {
marker.set("icon", markerIcon);
marker2.set("icon", startIcon);
map.update(-1, 0);
});
// We add the marker to the map's object collection so it will be rendered onto the map.
map.objects.add(marker2);
map.objects.add(marker);
</script>
</body>
</html>[/CODE]
Thanks Jason.
I tweaked what you provided slightly to give me the following as a starting point.
[HTML]
<!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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<title>SVG and Sprite</title>
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.1/jsl.js"></script>
</head>
<body>
<div id="mapcanvas" style="width:800px; height:400px;" > </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");
//
/////////////////////////////////////////////////////////////////////////////////////
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapcanvas");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
components: [
new nokia.maps.map.component.Behavior()
],
'zoomLevel': 2,
'center': [43.09, -53.674]
});
var iconSVG =
'<svg width="33" height="33" xmlns="http://www.w3.org/2000/svg">' +
'<text x="16" y="20" font-size="10pt" font-family="arial" font-weight="bold" text-anchor="middle" fill="white"
textContent="__TEXTCONTENT__">__TEXT__</text>' +
'</svg>',
svgParser = new nokia.maps.gfx.SvgParser(),
// Helper function that allows us to easily set the text and color of our SVG marker.
createIcon = function (text) {
var svg = iconSVG
.replace(/__TEXT__/g, text)
return new nokia.maps.gfx.GraphicsImage(svgParser.parseSvg(svg));
};
/* On mouse over we want to change the marker's color and text
* hence we create two svg icons which we flip on mouse over.
*/
var markerText = "1";
var markerTextOnHover = "2";
var markerImageAnchor = new nokia.maps.util.Point(0, 0);
var markerLabelAnchor = new nokia.maps.util.Point(0, 2);
var markerImageAnchorOnHover = new nokia.maps.util.Point(0, 10);
var markerLabelAnchorOnHover = new nokia.maps.util.Point(0, 5);
var markerLabelIcon = createIcon(markerText);
var markerLabelIconOnHover = createIcon(markerTextOnHover);
var markerLabel = new nokia.maps.map.Marker(
// Geo coordinate of Brandenburger tor in Berlin, Germany
[52.51652540955727, 13.380154923889933],
{
icon: markerLabelIcon,
anchor: markerLabelAnchor
}
);
var markersIconsUrl = "http://api.maps.nokia.com/en/playground/examples/maps/res/markers.png";
var markerImageIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 32, 34, 0, 0);
var markerImageIconOnHover = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 32, 46, 0, 34);
var markerImage = new nokia.maps.map.Marker(
// Geo coordinate of Brandenburger tor in Berlin, Germany
[52.51652540955727, 13.380154923889933],
{
icon: markerImageIcon,
zIndex: -999,
anchor: markerImageAnchor
}
);
markerLabel.addListener("mouseover", function (evt) {
markerLabel.set("icon", markerLabelIconOnHover);
markerImage.set("icon", markerImageIconOnHover);
markerLabel.set("anchor", markerLabelAnchorOnHover);
markerImage.set("anchor", markerImageAnchorOnHover);
map.update(-1, 0);
});
markerLabel.addListener("mouseout", function (evt) {
markerLabel.set("icon", markerLabelIcon);
markerImage.set("icon", markerImageIcon);
markerLabel.set("anchor", markerLabelAnchor);
markerImage.set("anchor", markerImageAnchor);
map.update(-1, 0);
});
// We add the marker to the map's object collection so it will be rendered onto the map.
map.objects.add(markerImage);
map.objects.add(markerLabel);
</script>
</body>
</html>
[/HTML]