Merge pull request #13966 from tschaub/map-update

Bundle code for the map on the homepage
2022-08-10 14:10:22 -06:00
parent 9d447b9413 b8b8ecd19a
commit beed5cd1be
8 changed files with 151 additions and 117 deletions
--- a/.github/workflows/deploy-preview.yml
+++ b/.github/workflows/deploy-preview.yml
@@ -85,17 +85,11 @@ jobs:
            );

            if (!commentExists) {
-              const body = [
-                `${start} Preview the [examples](https://deploy-preview-${pullRequestNumber}--ol-site.netlify.app/examples/) and`,
-                `[docs](https://deploy-preview-${pullRequestNumber}--ol-site.netlify.app/apidoc/) from this branch`,
-                `here: https://deploy-preview-${pullRequestNumber}--ol-site.netlify.app/.`
-              ].join(' ');
-
              await github.rest.issues.createComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: pullRequestNumber,
-                body: body
+                body: `${start} Preview the website for this branch here: https://deploy-preview-${pullRequestNumber}--ol-site.netlify.app/.`
              });
            } else {
              console.log(`Preview URL comment already added to PR #${pullRequestNumber}`);
--- a/examples/index.html
+++ b/examples/index.html
@@ -41,7 +41,7 @@
  <body>

    <header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation">
-      <a class="navbar-brand" href="https://openlayers.org/"><img class="header-logo" src="./theme/img/logo-dark.svg" width="70px" height="70px" alt="">&nbsp;OpenLayers</a>
+      <a class="navbar-brand" href="/"><img class="header-logo" src="/theme/img/logo-dark.svg" width="70px" height="70px" alt="">&nbsp;OpenLayers</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
@@ -61,11 +61,11 @@
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
            <div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
-              <a class="dropdown-item" href="../doc/">Docs</a>
+              <a class="dropdown-item" href="/doc/">Docs</a>
              <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
-                <a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
-                <a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
+                <a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
+                <a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
+                <a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
--- 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 = '';
+};
--- a/site/src/theme/index.css
+++ b/site/src/theme/index.css
@@ -1,9 +1,17 @@
-
 #map {
  position: relative;
  height: 120px;
 }

+#map:fullscreen {
+  height: 100%;
+}
+
+#map:-webkit-full-screen {
+  height: 100%;
+  margin: 0;
+}
+
 #tagline {
  padding-left: 25%;
  margin-bottom: 10px;