Bundle code for the map on the homepage

2022-08-10 11:54:52 -06:00
parent 9d447b9413
commit 157baa2782
5 changed files with 136 additions and 104 deletions
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
--- a/site/build.js
+++ b/site/build.js
@@ -1,10 +1,14 @@
 import Metalsmith from 'metalsmith';
+import common from '@rollup/plugin-commonjs';
 import inPlace from '@metalsmith/in-place';
 import layouts from '@metalsmith/layouts';
 import markdown from '@metalsmith/markdown';
-import {dirname} from 'node:path';
+import {dirname, resolve} from 'node:path';
 import {env} from 'node:process';
 import {fileURLToPath} from 'node:url';
+import {nodeResolve} from '@rollup/plugin-node-resolve';
+import {rollup} from 'rollup';
+import {terser} from 'rollup-plugin-terser';

 const baseDir = dirname(fileURLToPath(import.meta.url));

@@ -19,8 +23,34 @@ const builder = Metalsmith(baseDir)
  .use(markdown())
  .use(layouts());

-builder.build((err) => {
+builder.build(async (err) => {
  if (err) {
    throw err;
  }
+  await bundleMain();
 });
+
+async function bundleMain() {
+  const inputOptions = {
+    plugins: [
+      common(),
+      nodeResolve({
+        moduleDirectories: [
+          resolve(baseDir, '../src'),
+          resolve(baseDir, '../node_modules'),
+        ],
+      }),
+      terser(),
+    ],
+    input: resolve(baseDir, './build/main.js'),
+  };
+
+  const outputOptions = {
+    dir: resolve(baseDir, './build'),
+    format: 'iife',
+  };
+
+  const bundle = await rollup(inputOptions);
+  await bundle.write(outputOptions);
+  bundle.close();
+}
--- a/site/layouts/default.hbs
+++ b/site/layouts/default.hbs
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
+    <meta charset="UTF-8">
    <title>OpenLayers - {{ title }}</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
--- a/site/src/index.hbs
+++ b/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>
--- a/site/src/main.js
+++ b/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 = '';
+};