peteratt/gist:fef79494714191ba0ad2

## gistfile1.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
        <base href="http://developer.here.com/apiexplorer/examples/api-for-js/getting-started/basic-map-with-components.html" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>HERE Maps API for JavaScript Example: Basic map with components</title>
        <meta name="description" content="How to get a basic map with all UI components enabled"/>
        <meta name="keywords" content="basiccomponents, getting started, basic map, components"/>
        <!-- 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=no"/>

        <link rel="icon" href="http://developer.here.com/apiexplorer/examples/templates/common/favicon.ico" type="image/x-icon" />
        <!-- Styling for example container (NoteContainer & Logger)  -->
        <link rel="stylesheet" type="text/css" href="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.css"/>
        <!-- By default we add ?with=all to load every package available,
            it's better to change this parameter to your use case.
            Options ?with=maps|positioning|places|placesdata|directions|datarendering|all -->
        <script type="text/javascript" charset="UTF-8" src="http://js.cit.api.here.com/se/2.5.4/jsl.js?with=all"></script>
        <!-- JavaScript for example container (NoteContainer & Logger)  -->
        <script type="text/javascript" charset="UTF-8" src="http://developer.here.com/apiexplorer/examples/templates/js/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>
        <div id="uiContainer"></div>
        <script type="text/javascript" id="exampleJsSource">
/*  Setup authentication app_id and app_code
*   WARNING: this is a demo-only key
*   please register for an Evaluation, Base or Commercial key for use in your app.
*   Just visit http://developer.here.com/get-started for more details. Thank you!
*/
nokia.Settings.set("app_id", "DemoAppId01082013GAL");
nokia.Settings.set("app_code", "AJKnXv84fjrb0KIHawS0Tg");
// Use staging environment (remove the line for production environment)
nokia.Settings.set("serviceMode", "cit");

// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
    // initial center and zoom level of the map
    center: [52.51, 13.4],
    zoomLevel: 10,
    components: [
        // ZoomBar provides a UI to zoom the map in & out
        new nokia.maps.map.component.ZoomBar(),
        // We add the behavior component to allow panning / zooming of the map
        new nokia.maps.map.component.Behavior(),
        // Creates UI to easily switch between street map satellite and terrain mapview modes
        new nokia.maps.map.component.TypeSelector(),
        // Creates a toggle button to show/hide traffic information on the map
        new nokia.maps.map.component.Traffic(),
        // Creates a toggle button to show/hide public transport lines on the map
        new nokia.maps.map.component.PublicTransport(),
        // Creates a toggle button to enable the distance measurement tool
        new nokia.maps.map.component.DistanceMeasurement(),
        // Shows a min-map in the bottom right corner of the map
        new nokia.maps.map.component.Overview(),
        /* Shows a scale bar in the bottom right corner of the map depicting
         * ratio of a distance on the map to the corresponding distance in the real world
         * in either kilometers or miles
         */
        new nokia.maps.map.component.ScaleBar(),
        /* Positioning will show a set "map to my GPS position" UI button
         * Note: this component will only be visible if W3C geolocation API
         * is supported by the browser and if you agree to share your location.
         * If you location can not be found the positioning button will reset
         * itself to its initial state
         */
        new nokia.maps.positioning.component.Positioning(),
        // Add ContextMenu component so we get context menu on right mouse click / long press tap
        new nokia.maps.map.component.ContextMenu(),
        // ZoomRectangle component adds zoom rectangle functionality to the map
        new nokia.maps.map.component.ZoomRectangle()
    ]
});

/* We create a UI notecontainer for example description
 * NoteContainer is a UI helper function and not part of the Maps API for JavaScript
 * See exampleHelpers.js for implementation details
 */
var noteContainer = new NoteContainer({
    id: "basicMapWithComponentsUi",
    parent: document.getElementById("uiContainer"),
    title: "Basic map example with components",
    content:
        '<p>This example shows how to create a basic pannable map with a  ' +
        'map type selector, scalebar, public transport button, ' +
        'mini map, positioning and a zoombar.</p>'
});
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
	<base href="http://developer.here.com/apiexplorer/examples/api-for-js/getting-started/basic-map-with-components.html" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<title>HERE Maps API for JavaScript Example: Basic map with components</title>
	<meta name="description" content="How to get a basic map with all UI components enabled"/>
	<meta name="keywords" content="basiccomponents, getting started, basic map, components"/>
	<!-- 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=no"/>

	<link rel="icon" href="http://developer.here.com/apiexplorer/examples/templates/common/favicon.ico" type="image/x-icon" />
	<!-- Styling for example container (NoteContainer & Logger) -->
	<link rel="stylesheet" type="text/css" href="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.css"/>
	<!-- By default we add ?with=all to load every package available,
	it's better to change this parameter to your use case.
	Options ?with=maps\|positioning\|places\|placesdata\|directions\|datarendering\|all -->
	<script type="text/javascript" charset="UTF-8" src="http://js.cit.api.here.com/se/2.5.4/jsl.js?with=all"></script>
	<!-- JavaScript for example container (NoteContainer & Logger) -->
	<script type="text/javascript" charset="UTF-8" src="http://developer.here.com/apiexplorer/examples/templates/js/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>
	<div id="uiContainer"></div>
	<script type="text/javascript" id="exampleJsSource">
	/* Setup authentication app_id and app_code
	* WARNING: this is a demo-only key
	* please register for an Evaluation, Base or Commercial key for use in your app.
	* Just visit http://developer.here.com/get-started for more details. Thank you!
	*/
	nokia.Settings.set("app_id", "DemoAppId01082013GAL");
	nokia.Settings.set("app_code", "AJKnXv84fjrb0KIHawS0Tg");
	// Use staging environment (remove the line for production environment)
	nokia.Settings.set("serviceMode", "cit");

	// Get the DOM node to which we will append the map
	var mapContainer = document.getElementById("mapContainer");
	// Create a map inside the map container DOM node
	var map = new nokia.maps.map.Display(mapContainer, {
	// initial center and zoom level of the map
	center: [52.51, 13.4],
	zoomLevel: 10,
	components: [
	// ZoomBar provides a UI to zoom the map in & out
	new nokia.maps.map.component.ZoomBar(),
	// We add the behavior component to allow panning / zooming of the map
	new nokia.maps.map.component.Behavior(),
	// Creates UI to easily switch between street map satellite and terrain mapview modes
	new nokia.maps.map.component.TypeSelector(),
	// Creates a toggle button to show/hide traffic information on the map
	new nokia.maps.map.component.Traffic(),
	// Creates a toggle button to show/hide public transport lines on the map
	new nokia.maps.map.component.PublicTransport(),
	// Creates a toggle button to enable the distance measurement tool
	new nokia.maps.map.component.DistanceMeasurement(),
	// Shows a min-map in the bottom right corner of the map
	new nokia.maps.map.component.Overview(),
	/* Shows a scale bar in the bottom right corner of the map depicting
	* ratio of a distance on the map to the corresponding distance in the real world
	* in either kilometers or miles
	*/
	new nokia.maps.map.component.ScaleBar(),
	/* Positioning will show a set "map to my GPS position" UI button
	* Note: this component will only be visible if W3C geolocation API
	* is supported by the browser and if you agree to share your location.
	* If you location can not be found the positioning button will reset
	* itself to its initial state
	*/
	new nokia.maps.positioning.component.Positioning(),
	// Add ContextMenu component so we get context menu on right mouse click / long press tap
	new nokia.maps.map.component.ContextMenu(),
	// ZoomRectangle component adds zoom rectangle functionality to the map
	new nokia.maps.map.component.ZoomRectangle()
	]
	});

	/* We create a UI notecontainer for example description
	* NoteContainer is a UI helper function and not part of the Maps API for JavaScript
	* See exampleHelpers.js for implementation details
	*/
	var noteContainer = new NoteContainer({
	id: "basicMapWithComponentsUi",
	parent: document.getElementById("uiContainer"),
	title: "Basic map example with components",
	content:
	'<p>This example shows how to create a basic pannable map with a ' +
	'map type selector, scalebar, public transport button, ' +
	'mini map, positioning and a zoombar.</p>'
	});
	</script>
	</body>
	</html>