Is It Possible To Place A Grid In Nokia Maps?
Im using nokia maps javascript api, is posible place a grid in the map?
Solution 1:
The easiest way to do this would be to use a transparent grid PNG as an overlay.
First create a 256x256 PNG file as shown below.
Then use that as your getTileUrl() function, so it is returned over all of the Map tiles on the map.
var getTileUrl = function (zoom, row, column) {
return"http://i.stack.imgur.com/M1ncK.png";
};
The result is something like this:
An example can be seen below, with your own PNG file, app id and token of course .
/* Set authentication token and appid
*
* please register on http://api.developer.nokia.com/
* and obtain your own developer's API key
*/
nokia.Settings.set("appId", "MY APP ID");
nokia.Settings.set("authenticationToken", "MY TOKEN");
// Get the DOM node to which we will append the mapvar mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM nodevar map = new nokia.maps.map.Display(mapContainer, {
// initial center and zoom level of the mapcenter: [52.515, 13.405],
zoomLevel: 14,
components: [
// ZoomBar provides a UI to zoom the map in & outnew nokia.maps.map.component.ZoomBar(),
// We add the behavior component to allow panning / zooming of the mapnew nokia.maps.map.component.Behavior()
]
});
var getTileUrl = function (zoom, row, column) {
return"http://i.stack.imgur.com/M1ncK.png";
};
tileProviderOptions = {
getUrl: getTileUrl, // Obligatory functionmax:20, // The highest zoom level for the overlay.min:1, // The lowest zoom level for the overlay.opacity: 0.5, // Overlay opacity.0 is fully transparent, 1 is fully opaque.alpha:true// This value tells the renderer to read the alpha channel; required if opacity is used.
},
// Create an overlay by calling the constructor for ImgTileProvider
gridOverlay = new nokia.maps.map.provider.ImgTileProvider(tileProviderOptions);
// Add the overlay to the map
map.overlays.add(gridOverlay);html {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
}
#mapContainer {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
}<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="X-UA-Compatible"content="IE=7; IE=EmulateIE9; IE=EmulateIE10;"/><metahttp-equiv="content-type"content="text/html; charset=UTF-8"/><title>Nokia Maps Example: Adding an overlay to the map</title><scripttype="text/javascript"charset="UTF-8"src="http://api.maps.nokia.com/2.2.4/jsl.js?with=all"></script><styletype="text/css"></style></head><body><divid="mapContainer"></div><divid="uiContainer"></div></body></html>
Post a Comment for "Is It Possible To Place A Grid In Nokia Maps?"