We write a simple map using Nokia Maps JS API
Hi, Habr!
Today we will tell you how to use Nokia maps on websites using the Nokia Maps JS API. The Nokia Maps service has not only a very easy-to-use API, but also excellent map detailing with a huge base of geographic objects, which is constantly updated.
You can learn more information about the technological capabilities of Nokia Maps from Sergey Rudenko’s speech with Nokia Developer Days 2012 ( link ), and we’ll start to describe some of the possibilities of using the Nokia Maps JS API using the example of map integration and geolocation and routeing. It will look something like this:
')
First, let's create a simple html page with a container div # mapContainer to place our map in it, as well as a primitive style sheet:
You should never forget about compatibility, so add meta information to the header to better support mobile browsers:
Now it's time to connect the Nokia Maps JS API, adding to the following line:
It should be borne in mind that this is a modular API that contains separate packages for supporting maps, places (POI points), geolocations, laying routes and rendering data (for example, working with heat maps). We connected the library with the? With = all parameter to load all the packages, but if you don’t need them all, you can exclude them by listing after? With = only the modules necessary for operation, for example:
This will reduce the load time of the script, so use only necessary modules in work projects. A list of all modules can be found here .
Now let's initialize our map by adding in
Today we will tell you how to use Nokia maps on websites using the Nokia Maps JS API. The Nokia Maps service has not only a very easy-to-use API, but also excellent map detailing with a huge base of geographic objects, which is constantly updated.
You can learn more information about the technological capabilities of Nokia Maps from Sergey Rudenko’s speech with Nokia Developer Days 2012 ( link ), and we’ll start to describe some of the possibilities of using the Nokia Maps JS API using the example of map integration and geolocation and routeing. It will look something like this:
')
First, let's create a simple html page with a container div # mapContainer to place our map in it, as well as a primitive style sheet:
<html> <head> <meta charset="utf-8"> <title>Nokia Maps JS API</title> <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;} </style> </head> <body> <div id="mapContainer"> </div> </body> </html> You should never forget about compatibility, so add meta information to the header to better support mobile browsers:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" /> Now it's time to connect the Nokia Maps JS API, adding to the following line:
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.1/jsl.js?with=all"></script> It should be borne in mind that this is a modular API that contains separate packages for supporting maps, places (POI points), geolocations, laying routes and rendering data (for example, working with heat maps). We connected the library with the? With = all parameter to load all the packages, but if you don’t need them all, you can exclude them by listing after? With = only the modules necessary for operation, for example:
<script type="text/javascript" src="http://api.maps.nokia.com/2.2.1/jsl.js?with=maps,places,directions,positioning"></script> This will reduce the load time of the script, so use only necessary modules in work projects. A list of all modules can be found here .
Now let's initialize our map by adding in
javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ).javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ). javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ).javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ). javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ).javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ). javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ).javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ). javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ).javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ). javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ).javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ). javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ).javascript:
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); // . nokia.Settings.set("defaultLanguage", "ru-RU"); // DOM-, Nokia var mapContainer = document.getElementById("mapContainer"); // mapContainer // DOM- var map = new nokia.maps.map.Display(mapContainer, { // , , 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() ] });
, . , , , , . , . Wi-Fi, — GPS . :
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 :
// 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);
, . Nokia , :
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" }];
, . router.calculateRoute(waypoints, modes); , .
Nokia: , , , .
:
<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>
, :
#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;}
: :
// $('#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); });
, , , github:gist .
Nokia Maps JS API , , . . API JavaScript , Qt Java ME .
RESTful- Nokia Maps Nokia Places Points of Interests ( ).Source: https://habr.com/ru/post/148926/
All Articles