bbsody/mapsdemo.html

## mapsdemo.html
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9"/>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
	<title>Nokia Maps JS API</title>
	<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.1/jsl.js?with=all"></script>
	<script type="text/javascript" charset="UTF-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<style type="text/css">
		* {margin: 0;padding: 0}
		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;z-index:1;}
		#helperContainer {z-index:100;display: inline-block;position: absolute;width: auto;height: auto;border-radius: 5px;background-color: rgba(0,0,0,0.8);top:8px;left: 40px;}
		ul {list-style-type: none;}
		li {display:inline-block; padding:3 5px;}
		li a {color:#fff;text-decoration: none;font: 12px/12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}
	</style>
</head>
<body>
	<div id="helperContainer">
		<ul>
			<li><a id="u_r_here" href="#">Показать ваше местоположение</a></li>
			<li><a id="nokia_office" href="#">Показать головной офис Nokia Россия</a></li>
			<li><a id="kremlin" href="#">Маршрут от офиса Nokia до Кремля</a></li>
		</ul>
	</div>
	<div id="mapContainer">
	</div>
	<script type="text/javascript">
		// Инициализируем app ID и Token
		nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU");
		nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ");

		// Set interface and map language to Russian
		nokia.Settings.set("defaultLanguage", "ru-RU");

		// Определяем DOM-элемент, в который мы хотим поместить карту Nokia
		var mapContainer = document.getElementById("mapContainer");
		// Помещаем карту внутрь DOM-элемента
		var map = new nokia.maps.map.Display(mapContainer, {
			// initial center and zoom level of the map
			center: [55.752316, 37.614188],
			zoomLevel: 10,
			components: [
				// ZoomBar включает контрол для управления масштабом карты
				new nokia.maps.map.component.ZoomBar(),
				// Behavior позволяет двигать карту
				new nokia.maps.map.component.Behavior(),
				// TypeSelector включает контрол для смены режима отображения карты (режим карты, спутник, местность)
				new nokia.maps.map.component.TypeSelector(),
				// Traffic включает тумблер для отображения/скрытия информации о пробках
				new nokia.maps.map.component.Traffic(),
				// PublicTransport включает тумблер для отображения/скрытия информации об общественном транспорте
				new nokia.maps.map.component.PublicTransport(),
				// Overview включает мини-карту в правом нижнем углу
				new nokia.maps.map.component.Overview(),
				// ScaleBar отображает масштаб карты в правом нижнем углу
				new nokia.maps.map.component.ScaleBar(),
				// Positioning включает геолокацию
				new nokia.maps.positioning.component.Positioning(),
				// ContextMenu включает отображение контекстного меню по клику правой кнопки мыши или долгому нажатию на тачскрин
				new nokia.maps.map.component.ContextMenu()
			]
		}), router = new nokia.maps.routing.Manager();

		if (nokia.maps.positioning.Manager) {
			var positioning = new nokia.maps.positioning.Manager();

			positioning.getCurrentPosition(
				function (position) {
					window.coords = position.coords, // забираем координаты текущего местоположения
						marker = new nokia.maps.map.StandardMarker(coords), // создаём стандартный маркер на координатах текущего местоположения
						// Создаём окружность, визуализирующую погрешность определения местоположения
						accuracyCircle = new nokia.maps.map.Circle(coords, coords.accuracy);

					// Добавляем маркер и окружность погрешности в массив объектов для отображения на карте
					map.objects.addAll([accuracyCircle, marker]);
					// метод зуммирует карту таким образом, чтобы окружность погрешности полностью умещалась на карте
					map.zoomTo(accuracyCircle.getBoundingBox(), false, "default");
				},
				// Если что-то пошло не так и мы не можем получить данные GPS
				function (error) {
					var errorMsg = "Местоположение не определено: ";

					// Определение причины ошибки и генерация алерта
					if (error.code == 1) errorMsg += "Доступ отклонен";
					else if (error.code == 2) errorMsg += "Определить местоположение невозможно";
					else if (error.code == 3) errorMsg += "Таймаут";
					else errorMsg += "Неизвестная ошибка";

						// Отображение алерта с ошибкой
						alert(errorMsg);
					}
				);
		}

		// Добавляем кастомный маркер на координаты офиса Nokia Россия (Воздвиженка 10, Москва)
		var nokia_marker = new nokia.maps.map.Marker(
			new nokia.maps.geo.Coordinate(55.753105, 37.605858),{
			title: "Nokia office",
			visibility: true,
			icon: "http://habrastorage.org/storage2/772/09f/d91/77209fd919c23f77c10ff6451f1746d0.png",
			// Смещение иконки относительно верхнего левого угла для расположения по центру (размер иконки 48 на 48 пикселей)
			anchor: new nokia.maps.util.Point(24, 24)
		});

		map.objects.add(nokia_marker);


		var onRouteCalculated = function (observedRouter, key, value) {
			if (value == "finished") {
				var routes = observedRouter.getRoutes();

				// Создаём и добавляем изображение маршрута на карту
				var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
				map.objects.add(mapRoute);

				// Зумируем карту до границ всего маршрута
				map.zoomTo(mapRoute.getBoundingBox(), false, "default");
			} else if (value == "failed") {
				alert("The routing request failed.");
			}
		};

		// Мы создаём обсервер на свойство 'state' роутера так, что onRouteCalculated будет вызван, как только закончится расчёт маршрута
		router.addObserver("state", onRouteCalculated);

		// Задаём точки маршрута от начальной до конечной
		var waypoints = new nokia.maps.routing.WaypointParameterList();
		waypoints.addCoordinate(new nokia.maps.geo.Coordinate(55.753105, 37.605858));
		waypoints.addCoordinate(new nokia.maps.geo.Coordinate(55.752316, 37.614188));

		/* Устанавливаем настройки маршрута вроде его типа, средства передвижения transportModes, ограничений при прокладывании маршрута RoutingOptions и trafficMode для включения/выключения рассчёта маршрута с учётом пробок
		Подробности доступны тут http://api.maps.nokia.com/en/apireference/2.2.1/symbols/nokia.maps.routing.Mode.html */
		var modes = [{
			type: "shortest",
			transportModes: ["car"],
			options: "avoidTollroad",
			trafficMode: "default"
		}];


		// Активируем демонстрационные кнопки

		$('#u_r_here').bind('click', function(e){
			e.preventDefault()
			// Перемещаем карту на координаты вашего местоположения
			map.set("center", coords);
			map.zoomTo(accuracyCircle.getBoundingBox(), false, "default");
		});

		$('#nokia_office').bind('click', function(e){
			e.preventDefault()
			// Перемещаем карту на координаты офиса Nokia Россия в Москве
			map.set("center", [55.753105, 37.605858]);
			map.set("zoomLevel", 16);
		});

		$('#kremlin').bind('click', function(e){
 			e.preventDefault()
			// Прокладываем маршрут от офиса Nokia до Кремля. Зачем — другой вопрос %)
			router.calculateRoute(waypoints, modes);
		});
	</script>

</body>
</html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9"/>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
	<title>Nokia Maps JS API</title>
	<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.1/jsl.js?with=all"></script>
	<script type="text/javascript" charset="UTF-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<style type="text/css">
	* {margin: 0;padding: 0}
	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;z-index:1;}
	#helperContainer {z-index:100;display: inline-block;position: absolute;width: auto;height: auto;border-radius: 5px;background-color: rgba(0,0,0,0.8);top:8px;left: 40px;}
	ul {list-style-type: none;}
	li {display:inline-block; padding:3 5px;}
	li a {color:#fff;text-decoration: none;font: 12px/12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}
	</style>
	</head>
	<body>
	<div id="helperContainer">
	<ul>
	<li><a id="u_r_here" href="#">Показать ваше местоположение</a></li>
	<li><a id="nokia_office" href="#">Показать головной офис Nokia Россия</a></li>
	<li><a id="kremlin" href="#">Маршрут от офиса Nokia до Кремля</a></li>
	</ul>
	</div>
	<div id="mapContainer">
	</div>
	<script type="text/javascript">
	// Инициализируем app ID и Token
	nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU");
	nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ");

	// Set interface and map language to Russian
	nokia.Settings.set("defaultLanguage", "ru-RU");

	// Определяем DOM-элемент, в который мы хотим поместить карту Nokia
	var mapContainer = document.getElementById("mapContainer");
	// Помещаем карту внутрь DOM-элемента
	var map = new nokia.maps.map.Display(mapContainer, {
	// initial center and zoom level of the map
	center: [55.752316, 37.614188],
	zoomLevel: 10,
	components: [
	// ZoomBar включает контрол для управления масштабом карты
	new nokia.maps.map.component.ZoomBar(),
	// Behavior позволяет двигать карту
	new nokia.maps.map.component.Behavior(),
	// TypeSelector включает контрол для смены режима отображения карты (режим карты, спутник, местность)
	new nokia.maps.map.component.TypeSelector(),
	// Traffic включает тумблер для отображения/скрытия информации о пробках
	new nokia.maps.map.component.Traffic(),
	// PublicTransport включает тумблер для отображения/скрытия информации об общественном транспорте
	new nokia.maps.map.component.PublicTransport(),
	// Overview включает мини-карту в правом нижнем углу
	new nokia.maps.map.component.Overview(),
	// ScaleBar отображает масштаб карты в правом нижнем углу
	new nokia.maps.map.component.ScaleBar(),
	// Positioning включает геолокацию
	new nokia.maps.positioning.component.Positioning(),
	// ContextMenu включает отображение контекстного меню по клику правой кнопки мыши или долгому нажатию на тачскрин
	new nokia.maps.map.component.ContextMenu()
	]
	}), router = new nokia.maps.routing.Manager();

	if (nokia.maps.positioning.Manager) {
	var positioning = new nokia.maps.positioning.Manager();

	positioning.getCurrentPosition(
	function (position) {
	window.coords = position.coords, // забираем координаты текущего местоположения
	marker = new nokia.maps.map.StandardMarker(coords), // создаём стандартный маркер на координатах текущего местоположения
	// Создаём окружность, визуализирующую погрешность определения местоположения
	accuracyCircle = new nokia.maps.map.Circle(coords, coords.accuracy);

	// Добавляем маркер и окружность погрешности в массив объектов для отображения на карте
	map.objects.addAll([accuracyCircle, marker]);
	// метод зуммирует карту таким образом, чтобы окружность погрешности полностью умещалась на карте
	map.zoomTo(accuracyCircle.getBoundingBox(), false, "default");
	},
	// Если что-то пошло не так и мы не можем получить данные GPS
	function (error) {
	var errorMsg = "Местоположение не определено: ";

	// Определение причины ошибки и генерация алерта
	if (error.code == 1) errorMsg += "Доступ отклонен";
	else if (error.code == 2) errorMsg += "Определить местоположение невозможно";
	else if (error.code == 3) errorMsg += "Таймаут";
	else errorMsg += "Неизвестная ошибка";

	// Отображение алерта с ошибкой
	alert(errorMsg);
	}
	);
	}

	// Добавляем кастомный маркер на координаты офиса Nokia Россия (Воздвиженка 10, Москва)
	var nokia_marker = new nokia.maps.map.Marker(
	new nokia.maps.geo.Coordinate(55.753105, 37.605858),{
	title: "Nokia office",
	visibility: true,
	icon: "http://habrastorage.org/storage2/772/09f/d91/77209fd919c23f77c10ff6451f1746d0.png",
	// Смещение иконки относительно верхнего левого угла для расположения по центру (размер иконки 48 на 48 пикселей)
	anchor: new nokia.maps.util.Point(24, 24)
	});

	map.objects.add(nokia_marker);


	var onRouteCalculated = function (observedRouter, key, value) {
	if (value == "finished") {
	var routes = observedRouter.getRoutes();

	// Создаём и добавляем изображение маршрута на карту
	var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
	map.objects.add(mapRoute);

	// Зумируем карту до границ всего маршрута
	map.zoomTo(mapRoute.getBoundingBox(), false, "default");
	} else if (value == "failed") {
	alert("The routing request failed.");
	}
	};

	// Мы создаём обсервер на свойство 'state' роутера так, что onRouteCalculated будет вызван, как только закончится расчёт маршрута
	router.addObserver("state", onRouteCalculated);

	// Задаём точки маршрута от начальной до конечной
	var waypoints = new nokia.maps.routing.WaypointParameterList();
	waypoints.addCoordinate(new nokia.maps.geo.Coordinate(55.753105, 37.605858));
	waypoints.addCoordinate(new nokia.maps.geo.Coordinate(55.752316, 37.614188));

	/* Устанавливаем настройки маршрута вроде его типа, средства передвижения transportModes, ограничений при прокладывании маршрута RoutingOptions и trafficMode для включения/выключения рассчёта маршрута с учётом пробок
	Подробности доступны тут http://api.maps.nokia.com/en/apireference/2.2.1/symbols/nokia.maps.routing.Mode.html */
	var modes = [{
	type: "shortest",
	transportModes: ["car"],
	options: "avoidTollroad",
	trafficMode: "default"
	}];


	// Активируем демонстрационные кнопки

	$('#u_r_here').bind('click', function(e){
	e.preventDefault()
	// Перемещаем карту на координаты вашего местоположения
	map.set("center", coords);
	map.zoomTo(accuracyCircle.getBoundingBox(), false, "default");
	});

	$('#nokia_office').bind('click', function(e){
	e.preventDefault()
	// Перемещаем карту на координаты офиса Nokia Россия в Москве
	map.set("center", [55.753105, 37.605858]);
	map.set("zoomLevel", 16);
	});

	$('#kremlin').bind('click', function(e){
	e.preventDefault()
	// Прокладываем маршрут от офиса Nokia до Кремля. Зачем — другой вопрос %)
	router.calculateRoute(waypoints, modes);
	});
	</script>

	</body>
	</html>