Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

111 lines (99 sloc) 4.395 kb
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
<meta name="keywords" content="asyncLoadMapsLibrary,hereMapLoaderCallback,authenticate,createMap,afterHereMapLoad" />
<title>Combining HERE Maps API for JavaScript and the RESTful Map API</title>
<!-- No additional support required here. -->
<!-- Set up constants such as APP ID and token -->
<script type="text/javascript" src="libs/hereAppIdAndToken.js"></script>
<!-- Bootstrap jQuery Library -->
<script type="text/javascript" src="libs/jQl.min.js"></script>
<link rel="icon" href="http://here.com/favicon.ico">
<!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
<h1>Asynchronous Loading</h1>
<p>A static map is loaded in an <code>&lt;img&gt;</code> element on page load.
The HERE Maps API for JavaScript is asychronously loaded by jQuery when the map is clicked.
Assuming the HERE Maps API has been loaded successfully, a draggable, zoomable map with a
marker on it is displayed and the node holding the static map is removed thereafter.
</p>
<div id="mapContainer" style="width:540px; height:334px;">
<img id='HereStaticMap' src="http://m.nok.it/?c=50.5,15.5&amp;h=334&amp;w=540&amp;z=4&amp;nord&amp;nodot&amp;sb=k"
onclick="asyncLoadMapsLibrary();" alt="Map of Europe" />
</div>
<script id="example-code" data-categories="map" type="text/javascript">
//<![CDATA[
jQl.loadjQ(HereMapsConstants.JSLibs.jQueryUrl);
function afterHereMapLoad(map) {
// This matches the static map:
// http://m.nok.it/?c=50.5,15.5&h=334&w=540&z=4'
map.set('center', new nokia.maps.geo.Coordinate(50.5, 15.5));
map.setZoomLevel(4);
var marker = new nokia.maps.map.StandardMarker([50.5, 15.5]);
map.objects.add(marker);
$('#HereStaticMap').remove();
}
// This method is a convenience function that intialises a map for the
// Given DOM element and at the specified location.
function createMap(location, domElement) {
var map = new nokia.maps.map.Display(domElement, {
center: [location.longitude, location.latitude],
zoomLevel: location.zoomLevel, // Bigger numbers are closer in
components: [ // We use these components to make the map interactive
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Behavior()
]
});
return map;
}
// This method is a convenience function that intialises the Settings
// to authenticate the app with the HERE Maps JS library.
function authenticate(settings) {
// Add your own appId and token here
// sign in and register on http://developer.here.com
// and obtain your own developer's API key
nokia.Settings.set('app_id', settings.appId);
nokia.Settings.set('app_code', settings.appCode);
// Use staging environment (remove the line for production environment)
nokia.Settings.set('serviceMode', 'cit');
// The language of the map can be changed here.
nokia.Settings.set('defaultLanguage', settings.language);
}
// This method is called once the base JS library has loaded, it
// initialises the requested features, authenticates the app to
// the library, and sets up an appropriately located map in
// the specified DOM element.
function hereMapLoaderCallback() {
var fmatrix = nokia.Features.getFeaturesFromMatrix(['maps']),
// This callback is run if the feature load was successful.
onApiFeaturesLoaded = function () {
authenticate(HereMapsConstants.AppIdAndToken);
var map = createMap(HereMapsConstants.InitialLocation,
document.getElementById('mapContainer'));
map.addListener('displayready', function () {
afterHereMapLoad(map);
}, false);
},
// This callback is run if an error occurs during the feature loading
onApiFeaturesError = function (error) {
alert('Whoops! ' + error);
};
nokia.Features.load(
fmatrix,
onApiFeaturesLoaded, // an callback when everything was successfully loaded
onApiFeaturesError, // an error callback
null, // Indicates that the current document applies
false //Indicates that loading should be asynchronous
);
}
function asyncLoadMapsLibrary() {
$.getScript(HereMapsConstants.JSLibs.HereMapsUrl , hereMapLoaderCallback);
}
//]]>
</script>
<script type="text/javascript" src="libs/prettyprint.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.