Bundle code for the map on the homepage

site/src/index.hbs

@@ -30,24 +30,24 @@ head:
   <div class='row'>
     <div class='col-sm-6'>
       <h3>Tiled Layers</h3>
-      <img src='/theme/img/tiled-layers.png' class='thumb'>
+      <img src='/theme/img/tiled-layers.png' width="102" height="84" class='thumb' alt="tiled layers">
       <p>Pull tiles from OSM, Bing, MapBox, Stamen, and any other XYZ source you can find.  OGC mapping services and untiled layers also supported.</p>
     </div>
     <div class='col-sm-6'>
       <h3>Vector Layers</h3>
-      <img src='/theme/img/vector-layers.png' class='thumb'>
+      <img src='/theme/img/vector-layers.png' width="102" height="84" class='thumb' alt="vector layers">
       <p>Render vector data from GeoJSON, TopoJSON, KML, GML, Mapbox vector tiles, and other formats.</p>
     </div>
   </div>
   <div class='row'>
     <div class='col-sm-6'>
       <h3>Cutting Edge, Fast &amp; Mobile Ready</h3>
-      <img src='/theme/img/timeline.png' class='thumb'>
+      <img src='/theme/img/timeline.png' width="102" height="84" class='thumb' alt="mobile ready">
       <p>Leverages Canvas 2D, WebGL, and all the latest greatness from HTML5.  Mobile support out of the box.  Build lightweight custom profiles with just the components you need.</p>
     </div>
     <div class='col-sm-6'>
       <h3>Easy to Customize and Extend</h3>
-      <img src='/theme/img/popup.png' class='thumb'>
+      <img src='/theme/img/popup.png' width="102" height="84" class='thumb' alt="customizable">
       <p>Style your map controls with straight-forward CSS. Hook into different levels of the API or use <a href="/3rd-party/">3rd party libraries</a> to customize and extend functionality.</p>
     </div>
   </div>
@@ -125,99 +125,4 @@ head:
     </div>
   </div>
 </div>
-<script src='/en/latest/legacy/ol.js'></script>
-<script src='https://unpkg.com/ol-mapbox-style@latest/dist/olms.js'></script>
-<script>
-
-  const locations = [
-    {
-      center: [0, 4050000],
-      zoom: 2,
-    },
-    {
-      center: [-10026264.955714773, 3498225.377934253],
-      zoom: 12.3,
-    },
-    {
-      center: [-8120333.846364162, -5972314.327727663],
-      zoom: 10.15,
-    },
-    {
-      center: [12700564.586161729, 2575397.3413926377],
-      zoom: 13.8,
-    },
-    {
-      center: [8976666.32253083, 814262.3154676007],
-      zoom: 15.7,
-    },
-    {
-      center: [1284003.7367688504, 5950927.737276901],
-      zoom: 11.19,
-    },
-    {
-      center: [-8468554.506387988, 5696886.564463913],
-      zoom: 10.11,
-    },
-    {
-      center: [707717.3609533564, 6361291.958635207],
-      zoom: 10.02,
-    },
-    {
-      center: [3345381.3050933336, -216864.19183635892],
-      zoom: 13.9,
-    },
-    {
-      center: [3318257.9642649507, -1786301.1175574847],
-      zoom: 6.1,
-    },
-    {
-      center: [19365301.097574536, -5033096.120372388],
-      zoom: 10.77,
-    },
-    {
-      center: [-13542913.807564376, 5913315.884147839],
-      zoom: 11.59,
-    },
-    {
-      center: [9680854.2477813, 3231923.470902604],
-      zoom: 8.06,
-    },
-    {
-      center: [-10341383.185823392, 1826844.1155603195],
-      zoom: 9.27,
-    },
-    {
-      center: [3232422.751942559, 5017252.706810253],
-      zoom: 12.25,
-    },
-    {
-      center: [-16373943.169136822, 8651360.275919426],
-      zoom: 8.49,
-    },
-    {
-      center: [12475943.19806142, 4172022.2635435928],
-      zoom: 9.91,
-    },
-  ];
-
-  const container = document.getElementById('map');
-
-  const map = new ol.Map({
-    target: container,
-    view: new ol.View(locations[Math.random() * locations.length | 0]),
-  });
-
-  map.addControl(new ol.control.FullScreen());
-
-  olms.apply(
-    map,
-    'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB'
-  );
-
-  container.onmouseover = function() {
-    container.className = 'over';
-  };
-  container.onmouseout = function() {
-    container.className = '';
-  };
-</script>
+<script src="./main.js"></script>

site/src/main.js

@@ -0,0 +1,96 @@
+import FullScreen from '../../src/ol/control/FullScreen.js';
+import Map from '../../src/ol/Map.js';
+import View from '../../src/ol/View.js';
+import {apply} from 'ol-mapbox-style';
+
+const locations = [
+  {
+    center: [0, 4050000],
+    zoom: 2,
+  },
+  {
+    center: [-10026264.955714773, 3498225.377934253],
+    zoom: 12.3,
+  },
+  {
+    center: [-8120333.846364162, -5972314.327727663],
+    zoom: 10.15,
+  },
+  {
+    center: [12700564.586161729, 2575397.3413926377],
+    zoom: 13.8,
+  },
+  {
+    center: [8976666.32253083, 814262.3154676007],
+    zoom: 15.7,
+  },
+  {
+    center: [1284003.7367688504, 5950927.737276901],
+    zoom: 11.19,
+  },
+  {
+    center: [-8468554.506387988, 5696886.564463913],
+    zoom: 10.11,
+  },
+  {
+    center: [707717.3609533564, 6361291.958635207],
+    zoom: 10.02,
+  },
+  {
+    center: [3345381.3050933336, -216864.19183635892],
+    zoom: 13.9,
+  },
+  {
+    center: [3318257.9642649507, -1786301.1175574847],
+    zoom: 6.1,
+  },
+  {
+    center: [19365301.097574536, -5033096.120372388],
+    zoom: 10.77,
+  },
+  {
+    center: [-13542913.807564376, 5913315.884147839],
+    zoom: 11.59,
+  },
+  {
+    center: [9680854.2477813, 3231923.470902604],
+    zoom: 8.06,
+  },
+  {
+    center: [-10341383.185823392, 1826844.1155603195],
+    zoom: 9.27,
+  },
+  {
+    center: [3232422.751942559, 5017252.706810253],
+    zoom: 12.25,
+  },
+  {
+    center: [-16373943.169136822, 8651360.275919426],
+    zoom: 8.49,
+  },
+  {
+    center: [12475943.19806142, 4172022.2635435928],
+    zoom: 9.91,
+  },
+];
+
+const container = document.getElementById('map');
+
+const map = new Map({
+  target: container,
+  view: new View(locations[(Math.random() * locations.length) | 0]),
+});
+
+map.addControl(new FullScreen());
+
+apply(
+  map,
+  'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB'
+);
+
+container.onmouseover = function () {
+  container.className = 'over';
+};
+container.onmouseout = function () {
+  container.className = '';
+};