- Add CSS stylesheet link to routing and logging examples

Jason Fox · Jason Fox · commit cfff48f0e2e9 · 2016-05-10T16:49:58.000+02:00
- Add jQuery library where required
- Amend button position
diff --git a/capture-map-area/index.html b/capture-map-area/index.html
@@ -15,6 +15,7 @@
     <h1>Take a Snapshot of the Map</h1>
     <p><span>This example demonstrates how to take a snapshot of the map. It specifies area to be captured with top/left and bottom/right view port coordinates<br></span></p>
     <div id="map" style="width: 600px; height: 400px; background: grey"></div>
+    <hr/>
     <div id="panel" style="width: 600px;"></div>
     <script type="text/javascript" src='js/app.js'></script>
   </body>
diff --git a/capture-map-area/js/app.js b/capture-map-area/js/app.js
@@ -60,7 +60,7 @@ 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;');
+    'position:absolute;top:115px;left:620px;background-color:#fff; padding:10px;');
 containerNode.className = 'btn-group';
 
 // Create the "Capture" button
diff --git a/finding-the-nearest-marker/index.html b/finding-the-nearest-marker/index.html
@@ -6,6 +6,7 @@
     <meta name="description" content="Find a marker nearest to the click location">
     <title>Finding the Nearest Marker</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://code.jquery.com/jquery-2.2.3.min.js"></script>
     <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>
diff --git a/finding-the-nearest-marker/js/app.js b/finding-the-nearest-marker/js/app.js
@@ -71,6 +71,12 @@ var svgMarkup = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
     '<text x="12" y="18" font-size="12pt" font-family="Arial" font-weight="bold" ' +
     'text-anchor="middle" fill="white">${REPLACE}</text></svg>';
 
+//
+//  For convenience we have included the jQuery library to iterate through the array
+//  For more information see: http://api.jquery.com/jQuery.each/
+//
+//  The jQuery library is available under an MIT license  https://jquery.org/license/
+//
 $.each(coords , function (index, value) {
   var myIcon = new H.map.Icon(svgMarkup.replace('${REPLACE}', index + 1)),
   marker = new H.map.Marker(value,  {icon: myIcon});
diff --git a/map-object-events-displayed/index.html b/map-object-events-displayed/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
     <meta name="description" content="Handle events on various map objects">
     <title>Map Objects Events</title>
+    <link rel="stylesheet" type="text/css" href="css/log.css" />
     <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>
diff --git a/map-objects-event-delegation/index.html b/map-objects-event-delegation/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
     <meta name="description" content="Use event delegation on map objects">
     <title>Map Objects Event Delegation</title>
+    <link rel="stylesheet" type="text/css" href="css/log.css" />
     <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>
diff --git a/map-with-pedestrian-route-from-a-to-b/index.html b/map-with-pedestrian-route-from-a-to-b/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
     <meta name="description" content="Request a walking route from A to B and display it on the map.">
     <title>Map with Pedestrian Route from A to B</title>
+    <link rel="stylesheet" type="text/css" href="css/routing.css" />
     <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>
diff --git a/map-with-route-from-a-to-b-using-public-transport/index.html b/map-with-route-from-a-to-b-using-public-transport/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
     <meta name="description" content="Request a route from A to B using public transport and display it on the map.">
     <title>Map with Route from A to B using Public Transport</title>
+    <link rel="stylesheet" type="text/css" href="css/routing.css" />
     <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>
diff --git a/map-with-route-from-a-to-b/index.html b/map-with-route-from-a-to-b/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
     <meta name="description" content="Request a driving route from A to B and display it on the map.">
     <title>Map with Driving Route from A to B</title>
+    <link rel="stylesheet" type="text/css" href="css/routing.css" />
     <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>
diff --git a/map-with-truck-route-from-a-to-b/index.html b/map-with-truck-route-from-a-to-b/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
     <meta name="description" content="Request a truck route from A to B and display it on the map.">
     <title>Map with Truck Route from A to B</title>
+    <link rel="stylesheet" type="text/css" href="css/routing.css" />
     <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>
diff --git a/synchronising-two-maps/index.html b/synchronising-two-maps/index.html
@@ -13,8 +13,12 @@
   </head>
   <body>
     <h1>Synchronising Two Maps</h1>
-    <p>This example shows two maps. The left map allows for moving and zooming. The right map observes the left map's zoom level and position and adopts these values every time the left map changes.</p>
-    <div id="map" style="width: 600px; height: 400px; background: grey"></div>
+    <p>This example shows two maps. The upper map allows for moving and zooming. The lower map observes the upper map's zoom level and position and adopts these values every time the upper map changes.</p>
+    <hr/>
+    <h3>Movable Map</h3>
+    <div id="map" style="width: 600px; height: 300px; background: grey"></div>
+    <hr/>
+    <h3>Static Map</h3>
     <div id="panel" style="width: 600px;"></div>
     <script type="text/javascript" src='js/app.js'></script>
   </body>
diff --git a/synchronising-two-maps/js/app.js b/synchronising-two-maps/js/app.js
@@ -39,14 +39,11 @@ var defaultLayers = platform.createDefaultLayers();
 var mapContainer = document.createElement('div');
 var staticMapContainer = document.createElement('div');
 
-mapContainer.style.position = 'absolute';
-mapContainer.style.width = '87%';
-mapContainer.style.height = '360px';
-mapContainer.style.margin = '19px';
+mapContainer.style.height = '300px';
 
 staticMapContainer.style.position = 'absolute';
-staticMapContainer.style.width = '87%';
-staticMapContainer.style.height = '360px';
+staticMapContainer.style.width = '600px';
+staticMapContainer.style.height = '300px';
 
 document.getElementById('map').appendChild(mapContainer);
 document.getElementById('panel').appendChild(staticMapContainer);
