Merge pull request #2 from jason-fox/master

freethan · freethan · commit e0ca8e680ee3 · 2016-05-17T11:41:36.000+02:00
Add CSS stylesheet link to routing and logging examples
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/custom-cluster-theme/index.html b/custom-cluster-theme/index.html
@@ -6,7 +6,9 @@
     <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://code.jquery.com/jquery-2.2.3.min.js"></script>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"
+            integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
+            crossorigin="anonymous"></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,7 +71,7 @@ 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>';
 
-$.each(coords , function (index, value) {
+coords.forEach(function (value, index) {
   var myIcon = new H.map.Icon(svgMarkup.replace('${REPLACE}', index + 1)),
   marker = new H.map.Marker(value,  {icon: myIcon});
   // add custom data to the marker
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/marker-clustering/index.html b/marker-clustering/index.html
@@ -6,7 +6,9 @@
     <meta name="description" content="Cluster multiple markers together to better visualize the data">
     <title>Marker Clustering</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://code.jquery.com/jquery-2.2.3.min.js"
+            integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
+            crossorigin="anonymous"></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/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);
