Created initial example set

Author: Jason Fox

README.md

@@ -0,0 +1,54 @@
+# jsFiddle Examples
+
+This repository holds a series of JavaScript based examples demonstrating the use the HERE Maps API for JavaScript. It is designed to be consumed by the jsfiddle github API.
+
+You do not need to clone this repository, just use the links below to navigate to [jsfiddle](http://jsfiddle.net).
+
+## Maps API for JavaScript 3.x
+
+* [Adding Meta Information layer to the Map](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/meta-info-layer) - Retrieve meta information of city labels, transit stations, etc.
+* [Adding Venues layer to the Map](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/venues-layer) - Display venue objects (e.g. shops, airports etc) on the map
+* [Adding a Ground Overlay to the Map](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/ground-overlay) - Display an image over a specified geographical area.
+* [Adding an Overlay to the Map](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/custom-tile-overlay) - Display custom map tiles as an overlay
+* [Calculating a Location from a Mouse Click](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/position-on-mouse-click) - Obtain the latitude and longitude of a location within the map
+* [Changing from the Metric System](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-scale-bar-changing-from-the-metric-system) - Display a map including a scale bar in miles or yards
+* [Circle on the Map](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/circle-on-the-map) - Display a map highlighting a circular region
+* [DOM Marker](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-with-dom-marker) - Display a marker that is capable of receiving DOM events
+* [Detailed Place Information](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/get-place-details) - Request detailed information about a place marked on the map selected using a mouse click
+* [Display Interactive KML Objects](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-with-interactive-kml-objects) - Parse a KML file and display and interact with the data on a map
+* [Display KML Data](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/display-kml-on-map) - Parse a KML file and display the data on a map
+* [Draggable Marker](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/draggable-marker) - Display a moveable marker on a map
+* [Explore Nearby Places](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/identify-places-at-location) - Request a list of places close to a location and display them on a map
+* [Explore Popular Places by Category](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/explore-places) - Request a list of places within a category around a location and display them on a map.
+* [Finding the Nearest Marker](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/finding-the-nearest-marker) - Find a marker nearest to the click location
+* [Map Objects Event Delegation](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-objects-event-delegation) - Use event delegation on map objects
+* [Map Objects Events](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-object-events-displayed) - Handle events on various map objects
+* [Map UI Components](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/moved-map-components) - Display a map with the standard UI components in an altered location
+* [Map at a specified location](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-at-specified-location) - Display a map at a specified location and zoom level
+* [Map using View Bounds](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-using-view-bounds) - Display a map of a given area
+* [Map with Driving Route from A to B](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-with-route-from-a-to-b) - Request a driving route from A to B and display it on the map.
+* [Map with Pedestrian Route from A to B](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-with-pedestrian-route-from-a-to-b) - Request a walking route from A to B and display it on the map.
+* [Map with Route from A to B using Public Transport](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-with-route-from-a-to-b-using-public-transport) - Request a route from A to B using public transport and display it on the map.
+* [Map with Truck Route from A to B](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-with-truck-route-from-a-to-b) - Request a truck route from A to B and display it on the map.
+* [Marker on the Map](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/markers-on-the-map) - Display a map highlighting points of interest
+* [Multi-language support](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-multi-language-support) - Display a map with labels in a foreign language
+* [One-Box Search](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/search-for-places) - Request a list of nearby places based on a query string and display them on a map
+* [Opening an Infobubble on a Mouse Click](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/open-infobubble) - Open an infobubble when a marker is clicked
+* [Ordering Overlapping Markers](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/ordering-overlapping-markers) - Arrange the order in which a series of map objects are displayed
+* [Panning the Map](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/panning-the-map) - Programmatically pan the map so that it is continually in motion
+* [Polygon on the Map](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/polygon-on-the-map) - Display a map highlighting a region or area
+* [Polyline on the Map](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/polyline-on-the-map) - Display a map with a line showing a known route
+* [Rectangle on the map](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/rectangle-on-the-map) - Display a map highlighting a retangular region or area
+* [Restrict Map Movement](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/restrict-map) - Restrict a moveable map to a given rectangular area
+* [SVG Graphic Markers](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/map-with-svg-graphic-markers) - Display a map with custom SVG markers
+* [Search for a Landmark](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/search-for-landmark) - Request the location of a landmark and display it on the map.
+* [Search for a Location based on an Address](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/geocode-a-location-from-address) - Request a location using a free-form text input and display it on the map.
+* [Search for a Location given a Structured Address](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/geocode-a-location-from-structured-address) - Request a location from a structured address and display it on the map.
+* [Search for the Address of a Known Location](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/reverse-geocode-an-address-from-location) - Request address details for a given location and display it on the map.
+* [Store map tiles for offline usage](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/offline-map) - Store map tiles for offline usage
+* [Synchronising Two Maps](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/synchronising-two-maps) - Synchronise a static map with an interactive map
+* [Take a Snapshot of the Map](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/capture-map-area) - Capture an area on the map
+* [Terrain Map](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/terrain-map) - Display a topographical map
+* [Traffic Information](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/showing-traffic-information) - Display traffic information on the map
+* [Zoom into Bounds](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/custom-zooming-into-bounds) - Zoom into bounds limiting maximum level
+* [Zooming to a Set of Markers](http://jsfiddle.net/gh/get/jquery/2.1.0/heremaps/jsfiddle-github/tree/master/zoom-to-set-of-markers) - Alter the viewport  to ensure a group of objects are visible

capture-map-area/demo.css

@@ -0,0 +1,17 @@
+
+code, h1, h2, h3{
+  color: #124191;
+  letter-spacing: -0.03em;
+}
+body {
+  font-family:"Lucida Grande",Tahoma,sans-serif;
+  color: rgb(102, 102, 102);
+  font-size: 80%;
+}
+b, strong {
+  color: black;
+}
+code {
+  font-weight: 700;
+  font-size: 120%;
+}

capture-map-area/demo.details

@@ -0,0 +1,12 @@
+---
+ name: Take a Snapshot of the Map
+ description: Capture an area on the map
+ resources:
+   - https://js.api.here.com/v3/3.0/mapsjs-ui.css
+ normalize_css: no
+ dtd: html 5
+ wrap: d
+ panel_html: 0
+ panel_js: 0
+ panel_css: 0
+ ...

capture-map-area/demo.html

@@ -0,0 +1,13 @@
+<!-- SCRIPTS -->
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
+
+<!-- BODY -->
+<h1>Take a Snapshot of the Map</h1>
+<p><span>This example demonstrates how to take a snapshot of&nbsp;the map.&nbsp;It specifies area to be captured with&nbsp;top/left and bottom/right view port&nbsp;coordinates<br></span></p>
+<hr/>
+<div id="map" style="width: 600px; height: 300px; background: grey;" ></div>
+<hr/>
+<div id="panel" style="width: 600px; "></div>

capture-map-area/demo.js

@@ -0,0 +1,81 @@
+/**
+ * Takes a snapshot of the map.
+ *
+ * @param {Element} resultContainer Reference to DOM Element to show the captured map area
+ * @param {H.Map} map Reference to initialized map object
+ * @param {H.ui.UI} ui Reference to UI component
+ */
+function capture(resultContainer, map, ui) {
+  // Capturing area of the map is asynchronous, callback function receives HTML5 canvas
+  // element with desired map area rendered on it.
+  // We also pass an H.ui.UI reference in order to see the ScaleBar in the output.
+  // If dimensions are omitted, whole veiw port will be captured
+  map.capture(function(canvas) {
+    if (canvas) {
+      resultContainer.innerHTML = '';
+      resultContainer.appendChild(canvas);
+    } else {
+      // For example when map is in Panorama mode
+      resultContainer.innerHTML = 'Capturing is not supported';
+    }
+  }, [ui], 50, 50, 500, 200);
+}
+
+
+
+/**
+ * Boilerplate map initialization code starts below:
+ */
+// Step 1: initialize communication with the platform
+var platform = new H.service.Platform({
+  app_id: 'DemoAppId01082013GAL',
+  app_code: 'AJKnXv84fjrb0KIHawS0Tg',
+  useHTTPS: true,
+  useCIT: true
+});
+var defaultLayers = platform.createDefaultLayers();
+
+var mapContainer = document.getElementById('map');
+
+// Step 2: initialize a map
+var map = new H.Map(mapContainer, defaultLayers.normal.map, {
+  // initial center and zoom level of the map
+  zoom: 16,
+  // Champs-Elysees
+  center: {lat: 48.869145, lng: 2.314298}
+});
+
+// Step 3: make the map interactive
+// MapEvents enables the event system
+// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
+var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
+
+// Step 4: Create the default UI
+var ui = H.ui.UI.createDefault(map, defaultLayers, 'en-US');
+
+
+// Step 6: Create "Capture" button and place for showing the captured area
+var resultContainer = document.getElementById('panel');
+
+// Create container for the "Capture" button
+var containerNode = document.createElement('div');
+containerNode.setAttribute('style',
+    'position:absolute;top:0;left:0;background-color:#fff; padding:10px;');
+containerNode.className = 'btn-group';
+
+// Create the "Capture" button
+var captureBtn = document.createElement('input');
+captureBtn.value = 'Capture';
+captureBtn.type = 'button';
+captureBtn.className = 'btn btn-sm btn-default';
+
+// Add both button and container to the DOM
+containerNode.appendChild(captureBtn);
+mapContainer.appendChild(containerNode);
+
+// Step 7: Handle capture button click event
+captureBtn.onclick = function() {
+  capture(resultContainer, map, ui);
+};
+
+$('head').append('<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" type="text/css" />');

circle-on-the-map/demo.css

@@ -0,0 +1,17 @@
+
+code, h1, h2, h3{
+  color: #124191;
+  letter-spacing: -0.03em;
+}
+body {
+  font-family:"Lucida Grande",Tahoma,sans-serif;
+  color: rgb(102, 102, 102);
+  font-size: 80%;
+}
+b, strong {
+  color: black;
+}
+code {
+  font-weight: 700;
+  font-size: 120%;
+}

circle-on-the-map/demo.details

@@ -0,0 +1,12 @@
+---
+ name: Circle on the Map
+ description: Display a map highlighting a circular region
+ resources:
+   - https://js.api.here.com/v3/3.0/mapsjs-ui.css
+ normalize_css: no
+ dtd: html 5
+ wrap: d
+ panel_html: 0
+ panel_js: 0
+ panel_css: 0
+ ...

circle-on-the-map/demo.html

@@ -0,0 +1,12 @@
+<!-- SCRIPTS -->
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
+
+<!-- BODY -->
+<h1>Circle on the Map</h1>
+<p>This example shows a circle with a radius of 1000 meters centered over a location in <b>New Delhi</b> (<i>28.6071°N, 77.2127°E</i>) and displayed on a moveable map.</p>
+<hr/>
+<div id="map" style="width: 600px; height: 400px; background: grey"></div>
+

circle-on-the-map/demo.js

@@ -0,0 +1,58 @@
+
+/**
+ * Adds a circle over New Delhi with a radius of 1000 metres onto the map
+ *
+ * @param  {H.Map} map      A HERE Map instance within the application
+ */
+function addCircleToMap(map){
+  map.addObject(new H.map.Circle(
+    // The central point of the circle
+    {lat:28.6071, lng:77.2127},
+    // The radius of the circle in meters
+    1000,
+    {
+      style: {
+        strokeColor: 'rgba(55, 85, 170, 0.6)', // Color of the perimeter
+        lineWidth: 2,
+        fillColor: 'rgba(0, 128, 0, 0.7)'  // Color of the circle
+      }
+    }
+  ));
+}
+
+
+
+
+
+/**
+ * Boilerplate map initialization code starts below:
+ */
+
+//Step 1: initialize communication with the platform
+var platform = new H.service.Platform({
+  app_id: 'DemoAppId01082013GAL',
+  app_code: 'AJKnXv84fjrb0KIHawS0Tg',
+  useCIT: true,
+  useHTTPS: true
+});
+var defaultLayers = platform.createDefaultLayers();
+
+//Step 2: initialize a map - this map is centered over New Delhi
+var map = new H.Map(document.getElementById('map'),
+  defaultLayers.normal.map,{
+  center: {lat:28.6071, lng:77.2127},
+  zoom: 13
+});
+
+//Step 3: make the map interactive
+// MapEvents enables the event system
+// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
+var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
+
+// Create the default UI components
+var ui = H.ui.UI.createDefault(map, defaultLayers);
+
+// Now use the map as required...
+addCircleToMap(map);
+
+$('head').append('<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" type="text/css" />');

custom-tile-overlay/demo.css

@@ -0,0 +1,17 @@
+
+code, h1, h2, h3{
+  color: #124191;
+  letter-spacing: -0.03em;
+}
+body {
+  font-family:"Lucida Grande",Tahoma,sans-serif;
+  color: rgb(102, 102, 102);
+  font-size: 80%;
+}
+b, strong {
+  color: black;
+}
+code {
+  font-weight: 700;
+  font-size: 120%;
+}

custom-tile-overlay/demo.details

@@ -0,0 +1,12 @@
+---
+ name: Adding an Overlay to the Map
+ description: Display custom map tiles as an overlay
+ resources:
+   - https://js.api.here.com/v3/3.0/mapsjs-ui.css
+ normalize_css: no
+ dtd: html 5
+ wrap: d
+ panel_html: 0
+ panel_js: 0
+ panel_css: 0
+ ...

custom-tile-overlay/demo.html

@@ -0,0 +1,15 @@
+<!-- BASE - this example uses relative URLs -->
+<base href="https://raw.githubusercontent.com/heremaps/jsfiddle-github/master/custom-tile-overlay/" />
+
+<!-- SCRIPTS -->
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
+
+<!-- BODY -->
+<h1>Adding an Overlay to the Map</h1>
+<p>This example displays a movable map initially centered on the historical centre of <b>Berlin</b> (<i>52.515, °N, 13.405°E</i>) with an overlay of a historical map from 1789 on top of the base map. A public domain&nbsp;<a target="_blank" rel="nofollow" href="http://commons.wikimedia.org/wiki/File:Map_de_berlin_1789_%28georeferenced%29.jpg">image</a> was used as a source, and split it into individual map tiles. Additional tiles are only downloaded when the zoom level or location changes.</p>
+<hr/>
+<div id="map" style="width: 600px; height: 400px; background: grey"></div>
+