Created initial example set and updated the README.md

README.md

@@ -1,2 +1,63 @@
-# maps-api-for-javascript-examples
-Self-contained examples for Maps API for JavaScript
+# Maps API for JavaScript
+
+This repository holds a series of JavaScript based examples using the **HERE Maps API for JavaScript**. More information about the API can be found on [developer.here.com](https://developer.here.com/).
+
+This set of self-contained, use-case based examples is designed to be cloned by developers for their own use.
+
+
+**Note:** In order to get the sample code to work, you **must** replace all instances of `{YOUR_APP_ID}` and `{YOUR_APP_CODE}` within the code and use your own HERE credentials.
+
+You can obtain a set of credentials from the [Plans Page](https://developer.here.com/plans/api/consumer-mapping) on developer.here.com.
+
+## Maps API for JavaScript
+
+All of the following examples use **version 3.0** of the API
+
+* [Adding Meta Information layer to the Map](tree/master/meta-info-layer) - Retrieve meta information of city labels, transit stations, etc.
+* [Adding Venues layer to the Map](tree/master/venues-layer) - Display venue objects (e.g. shops, airports etc) on the map
+* [Adding a Ground Overlay to the Map](tree/master/ground-overlay) - Display an image over a specified geographical area.
+* [Adding an Overlay to the Map](tree/master/custom-tile-overlay) - Display custom map tiles as an overlay
+* [Calculating a Location from a Mouse Click](tree/master/position-on-mouse-click) - Obtain the latitude and longitude of a location within the map
+* [Changing from the Metric System](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](tree/master/circle-on-the-map) - Display a map highlighting a circular region
+* [DOM Marker](tree/master/map-with-dom-marker) - Display a marker that is capable of receiving DOM events
+* [Detailed Place Information](tree/master/get-place-details) - Request detailed information about a place marked on the map selected using a mouse click
+* [Display Interactive KML Objects](tree/master/map-with-interactive-kml-objects) - Parse a KML file and display and interact with the data on a map
+* [Display KML Data](tree/master/display-kml-on-map) - Parse a KML file and display the data on a map
+* [Draggable Marker](tree/master/draggable-marker) - Display a moveable marker on a map
+* [Explore Nearby Places](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](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](tree/master/finding-the-nearest-marker) - Find a marker nearest to the click location
+* [Map Objects Event Delegation](tree/master/map-objects-event-delegation) - Use event delegation on map objects
+* [Map Objects Events](tree/master/map-object-events-displayed) - Handle events on various map objects
+* [Map UI Components](tree/master/moved-map-components) - Display a map with the standard UI components in an altered location
+* [Map at a specified location](tree/master/map-at-specified-location) - Display a map at a specified location and zoom level
+* [Map using View Bounds](tree/master/map-using-view-bounds) - Display a map of a given area
+* [Map with Driving Route from A to B](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](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](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](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 Clustering](tree/master/marker-clustering) - Cluster multiple markers together to better visualize the data
+* [Marker Clustering with Custom Theme](tree/master/custom-cluster-theme) - Cluster multiple markers and customize the theme
+* [Marker on the Map](tree/master/markers-on-the-map) - Display a map highlighting points of interest
+* [Multi-language support](tree/master/map-multi-language-support) - Display a map with labels in a foreign language
+* [One-Box Search](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](tree/master/open-infobubble) - Open an infobubble when a marker is clicked
+* [Ordering Overlapping Markers](tree/master/ordering-overlapping-markers) - Arrange the order in which a series of map objects are displayed
+* [Panning the Map](tree/master/panning-the-map) - Programmatically pan the map so that it is continually in motion
+* [Polygon on the Map](tree/master/polygon-on-the-map) - Display a map highlighting a region or area
+* [Polyline on the Map](tree/master/polyline-on-the-map) - Display a map with a line showing a known route
+* [Rectangle on the map](tree/master/rectangle-on-the-map) - Display a map highlighting a retangular region or area
+* [Restrict Map Movement](tree/master/restrict-map) - Restrict a moveable map to a given rectangular area
+* [SVG Graphic Markers](tree/master/map-with-svg-graphic-markers) - Display a map with custom SVG markers
+* [Search for a Landmark](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](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](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](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](tree/master/offline-map) - Store map tiles for offline usage
+* [Synchronising Two Maps](tree/master/synchronising-two-maps) - Synchronise a static map with an interactive map
+* [Take a Snapshot of the Map](tree/master/capture-map-area) - Capture an area on the map
+* [Terrain Map](tree/master/terrain-map) - Display a topographical map
+* [Traffic Information](tree/master/showing-traffic-information) - Display traffic information on the map
+* [Zoom into Bounds](tree/master/custom-zooming-into-bounds) - Zoom into bounds limiting maximum level
+* [Zooming to a Set of Markers](tree/master/zoom-to-set-of-markers) - Alter the viewport  to ensure a group of objects are visible

capture-map-area/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
+    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+    <meta name="description" content="Capture an area on the map">
+    <title>Take a Snapshot of the Map</title>
+    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
+    <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>
+  </head>
+  <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>
+    <div id="map" style="width: 600px; height: 400px; background: grey"></div>
+    <div id="panel" style="width: 600px;"></div>
+    <script type="text/javascript" src='js/app.js'></script>
+  </body>
+</html>

capture-map-area/js/app.js

@@ -0,0 +1,79 @@
+/**
+ * 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: '{YOUR_APP_ID}',
+  app_code: '{YOUR_APP_CODE}',
+  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);
+};

circle-on-the-map/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
+    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+    <meta name="description" content="Display a map highlighting a circular region">
+    <title>Circle on the Map</title>
+    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
+    <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>
+  </head>
+  <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>
+    <div id="map" style="width: 600px; height: 400px; background: grey"></div>
+    <script type="text/javascript" src='js/app.js'></script>
+  </body>
+</html>

circle-on-the-map/js/app.js

@@ -0,0 +1,56 @@
+
+/**
+ * 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: '{YOUR_APP_ID}',
+  app_code: '{YOUR_APP_CODE}',
+  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);

custom-cluster-theme/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
+    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+    <meta name="description" content="Cluster multiple markers and customize the theme">
+    <title>Marker Clustering with Custom Theme</title>
+    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
+    <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>
+<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-clustering.js"></script>
+  </head>
+  <body>
+    <h1>Marker Clustering with Custom Theme</h1>
+    <p>This example displays a map&nbsp;showing geo-tagged clusters of photographs taken from locations&nbsp;around the world. The <a target="_blank" rel="nofollow" href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a> website was used to provide&nbsp;a source of data of geo-tagged images.</p>
+    <div id="map" style="width: 600px; height: 400px; background: grey"></div>
+    <script type="text/javascript" src='js/app.js'></script>
+  </body>
+</html>