Wanting to overlay KML data on handsets in the 'Nokia Maps' app

[henrysinn]

Response to Jasfox from https://projects.developer.nokia.com...ion/message/81

Jason,

1. Thank you for your response.

2. Your question "The question is what do you mean by "a link for Nokia Map... launch Nokia Maps on the phone"..."
I think you answered this yourself further into your reply but to reiterate, yes, I don't want to re-invent the wheel. The phones already have an App - called "maps" All I want to do is find a way to launch "maps" and have the maps app find and overlay the KML. I have had total success with all iOS and Android devices without building an app

3. Your note "The problem is that the KML will need to be hosted on the same site as the HTML (or spoofed as a proxy by your server) - "
If I'm on the right page, this is the intent. This is how http://maps.google.com/maps?q=http:/...m/gmm/myki.kml works

4 Your comment "...but I've had a chat with a friendly developer and hopefully some KML syntax will be added soon."
I can't wait! :-) If it can work as seamlessly as "maps" on iOS and Android, we give instant life to outgoing Symbian devices with "Nokia Maps" and any WP7 / WP8 devices with "Nokia Maps" ... Unless of course I'm an idiot and have miss-interpreted something which is highly likely... :-)

Many thanks

Henry

[symbianyucca]

I don't see any questions here really. Anyway, for

2: Generally I would nto expect that you could customize applications, instead you would need to work with the APIs provided to construct your own application.

[jasfox]

Just for clarity I'm reposting a summary of the original thread before answering further:

Hi all,

Hope I can get some pointers and hopefully I'm not 'barking up the wrong tree'

They say a picture is worth a thousand words so please see ​http://henrysinn.com/myki on your phone.

I am wanting to achieve a link for Nokia Maps in the same way I have done for 'maps' on Apple and Android devices.

I am assuming it is via a ​http://m.ovi.me/[application_environment]?parameter=value&... link ..as m.ovi.me will launch Nokia Maps on the phone.

I have a kml file with about 920 "places of interest" with titles, lat and long ​http://henrysinn.com/gmm/myki.kml

Can this be somehow ported [pulled] into the Nokia Maps app on phones via a m.ovi.me link? [I note ​http://www.developer.nokia.com/Commu...ay_-_Nokia_Map but that appears to be for desktop / browser results]

Many thanks in advance for any ideas. Henry Sinn

The Map Image API has "graduated" from projects to api.maps.nokia.com. The current discussion board is at: ​http://www.developer.nokia.com/Commu...e-API-for-HTTP

As a RESTful API, the "m.ovi.me" service (also rebranded as "m.nok.it" ) is purely about returning a simple static image direct to a phone. This doesn't really extend to KML support, the nearest use case to putting 920 markers on a map would be using the POI parameter e.g: ​http://m.nok.it/?poi=52.5338,13.2966...8728,13.279667 This doesn't extend beyond a dozen markers or so. So the Map Image API is probably the wrong API.

The question is what do you mean by "a link for Nokia Map... launch Nokia Maps on the phone"...

If you are looking to extend the range of phones you support to include simple feature phones, S40 devices, Nokia Asha Range etc. I would suggest looking at the Maps API for Java ME. This API allows you to create an app which will display rendered KML data on any Java ME mobile device.

​http://www.developer.nokia.com/Devel..._examples/#kml

If you are looking to add a link to extend the types of maps which can be displayed on a series of devices, then the JavaScript? based KML example:

​http://api.maps.nokia.com/en/playgro...l/kmltree.html will render KML on a mobile which has JavaScript support i.e. a typical smart phone.

As you mentioned the display of the example would be typically rendered on a desktop, and the example in question has not been optimised for mobile, but it does work on the browser of the Nokia N9 for example. The problem is that the KML will need to be hosted on the same site as the HTML (or spoofed as a proxy by your server)

The simplest solution would of course be a simple link to a website. [maps.nokia.com] does not a support KML parameter ... yet, but I've had a chat with a friendly developer and hopefully some KML syntax will be added soon. This would work as an equivalent solution to your Google Map link: ​http://maps.google.com/maps?q=http:/...m/gmm/myki.kml

Confusingly, there are two versions of Nokia Maps online - http://maps.nokia.com for Desktops and http://m.maps.nokia.com for mobile devices. The likely timeline would be to add the support to the desktop site first.

None of these solutions would access the Nokia Maps App on the phone itself. If you open the URL: http://maps.nokia.com in the web browser of a Nokia Phone, it will open the Nokia Maps App instead, but wont take additional parameters.

[jasfox]

The following will work in INTERNET EXPLORER ONLY, the problem is that most other browsers will not permit access to a second site when rendering the KML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 
	Example from Nokia Maps API Playground, for more information visit http://api.maps.nokia.com
 -->
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9"/>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<title>Nokia Maps API Example: KML hierarchy tree</title>
		<meta name="description" content="Using KML Manager we can modify the visualization of a loaded KML file"/>
		<meta name="keywords" content="kmltree,KML"/>
		<!-- For scaling content for mobile devices, setting the viewport to the width of the device-->
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
		<!-- Styling for example container (NoteContainer & Logger)  -->
		<link rel="stylesheet" type="text/css" href="http://api.maps.nokia.com/en/playground/exampleHelpers.css"/>
		<!-- By default we add ?kml=auto&heatmap=auto to auto load KML & heatmap package remove params if package are not needed -->
		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.1/jsl.js?with=all"></script>
		<!-- JavaScript for example container (NoteContainer & Logger)  -->
		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/en/playground/exampleHelpers.js"></script>
		<style type="text/css">
			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;
			}
		</style>
	</head>
	<body>
		<div id="mapContainer"></div>
		<script type="text/javascript" id="exampleJsSource">
			/*	Set authentication token and appid 
*	WARNING: this is a demo-only key
*	please register on http://api.developer.nokia.com/ 
*	and obtain your own developer's API key 
*/
nokia.Settings.set( "appId", "_peU-uCkp-j8ovkzFGNU"); 
nokia.Settings.set( "authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ");

// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer"),

	// We create a new instance of InfoBubbles bound to a variable so we can call it later on
	infoBubbles = new nokia.maps.map.component.InfoBubbles(),
	
	// Create a map inside the map container DOM node
	map = new nokia.maps.map.Display(mapContainer, {
		components: [
			// we add the behavior component to allow panning / zooming of the map
			new nokia.maps.map.component.Behavior(),
			infoBubbles
		],
		zoomLevel: 2
	}),
	TOUCH = nokia.maps.dom.Page.browser.touch,
	EventTarget = nokia.maps.dom.EventTarget;


/* Create a class KMLTree to encapsulate the functionality
 * of the tree structure that appears on the right hand-side of th
 * map.
 * The constructor function takes a KML result set that is returned by the KmlManager
 */
var KMLTree = function (kmlDocument, kmlMapContainer) {
	var that = this,
		i,
		labels,
		labelsLength,
		// Create container DIV element
		kmlTreeContainerElt = document.createElement("div");
		
	kmlTreeContainerElt.style.position = "absolute";
	kmlTreeContainerElt.style.top = "0";
	kmlTreeContainerElt.style.right = "0";
	kmlTreeContainerElt.style.width = "260px";
	kmlTreeContainerElt.style.height = "100%";
	kmlTreeContainerElt.style.background = "white";
	kmlTreeContainerElt.style.overflow = "auto";
	kmlTreeContainerElt.style.paddingLeft = "5px";
	kmlTreeContainerElt.style.borderLeft = "1px solid #666";
	kmlTreeContainerElt.style.zIndex = "999";

	document.body.appendChild(kmlTreeContainerElt);

	// Create the labels for all the entries in the geometry object
	kmlTreeContainerElt.appendChild( that._getAllLabels(kmlDocument) );

	// The EventTarget function takes care of normalizing
	// event behavior across browsers.
	EventTarget(kmlTreeContainerElt);
	kmlTreeContainerElt.addListener(TOUCH ? "tap" : "click", function (evt) {
		var i,
			bbox,
			map = window.map,
			obj = kmlMapContainer.objects.get(0),
			target = evt.target,
			tagName = target.tagName.toLowerCase(),
			isCheckboxClicked = tagName == "input",
			isNameClicked = tagName == "a",
			indices,
			checkboxState;

		if (target && (isCheckboxClicked || isNameClicked)) {
			indices = target.parentNode.indices;
			for (i = 0, len = indices.length; i < len; i++) {
				obj = obj.objects.get(indices[i]);
			}

			if (isNameClicked) { // name was clicked
				if ((bbox = obj.getBoundingBox())) map.zoomTo(bbox);
			} else { // checkbox was clicked
				checkboxState = target.checked ? true : false;
				obj.set("visibility", checkboxState);
			}
		}
		
	}, false);
};

KMLTree.prototype = {
	_append: function (parentNode, node) {
		if ( parentNode && node) {
			parentNode.appendChild(node);
		}
	},
	_getAllLabels: function (kmlObject, index, parentNode) {
		var that = this,
			labels = [],
			kml = nokia.maps.kml,
			i = 0,
			labelEntry,
			features = kmlObject.features || [];
		parentNode = parentNode || document.createElement("div");
		index = index || [];

		while (i < features.length) {
			kmlObject = features[i];
			labelEntry = that._getLabel(kmlObject, index.concat(i));

			if ((kmlObject instanceof kml.Document) || (kmlObject instanceof kml.Folder)) {
				that._append(parentNode, that._getAllLabels(kmlObject, index.concat(i), labelEntry));
			}

			that._append(parentNode, labelEntry);
			i++;
		}

		return parentNode;
	},
	_getLabel: function (kmlObject, indices) {
		var linkElt = document.createElement("a"),
			containerElt = document.createElement("div"),
			checkboxElt = document.createElement("input");

		// Let's do not show kml objects which have node <open>0</open> in KML
		if (kmlObject.open == "0") {
			return;
		}

		checkboxElt.type = "checkbox";
		checkboxElt.style.width = "auto";
		checkboxElt.style.marginLeft = (4 + (indices.length - 1) * 10) + "px";

		linkElt.innerHTML = linkElt.title = kmlObject.name ? kmlObject.name : "";
		linkElt.style.cursor = "pointer";

		containerElt.indices = indices;
		containerElt.appendChild(checkboxElt);
		// IE8 and lower can't set checked attribute before element is appended
		checkboxElt.checked = kmlObject.visibility ? true : false;
		containerElt.appendChild(linkElt);
		return containerElt;
	}
};

// We initialize KMLManager so parse KML files
var kmlManager = new nokia.maps.kml.Manager(),
	// We define a callback function for parsing kml file,
	// and then push the parsing result to map display
	onParsed = function (kmlManager) {
		var resultSet,
			container,
			boundingBox;
		// KML file was successfully loaded
		if (kmlManager.state == "finished") {
			// KML file was successfully parsed
			resultSet = new nokia.maps.kml.component.KMLResultSet(kmlManager.kmlDocument, map);
			resultSet.addObserver("state", function (resultSet) {
				if (resultSet.state == "finished") {
					// KML objects tree was successfully converted into map objects
					new KMLTree(kmlManager.kmlDocument, resultSet.container);
	
					boundingBox = container.getBoundingBox();
					// Here we check whether we have valid bounding box or no. 
					// In case if KML document does not contain any supported displayable element, bounding box will be a null, 
					// therefore it will not be possible to zoom to the not existing object. 
					if (boundingBox) {
						// Switch the viewport of the map to show all KML map objects within the container
						map.zoomTo(boundingBox);
					}
				}
			});
			// Manually push map objects/container to map display
			map.objects.add(container = resultSet.create());
		}
	}

// We add an observer to kml manager
kmlManager.addObserver("state", onParsed);

/// WORKS IN IE ONLY
	kmlManager.parseKML("http://henrysinn.com/gmm/myki.kml");


		</script>
	</body>
</html>

The issue is the line:

kmlManager.parseKML("http://henrysinn.com/gmm/myki.kml");

which of course could be replaced with a relative URL if it were placed on your own website, and then it would work in any browser supporting JavaScript.

There is no reason why you couldn't read the KML location in using query string parameters using a JavaScript function like the one described here: http://www.developer.nokia.com/Commu...ing_parameters, this would allow the example to load any KML file hosted on the same site.

The misunderstanding is that both this example, and the Google Maps KML URL in the original example will open a Map in a web browser, not the equivalent Maps application on a device. Mentioning iOS, Android WP7, WP8, Symbian in this context is erroneous, you could display a Nokia Map in the web browser of an Android Phone just as easily as a Windows Phone, in order use onboard maps instead you would need to create a Native App for each platform. Or alternatively an HMTL5 cross-browser solution such as MH5:- such as http://api.maps.nokia.com/en/mobile/

It is highly unlikely the Map Image API itself is going to offer a KML service. It does however intelligently forward requests to maps.nokia.com and m.maps.nokia.com for capable devices. These websites may at some point be able to render KML. The solution would still be HMTL/Javascript + browser based not Nokia Maps on the phone though.