diff --git a/examples/templates/example.html b/examples/templates/example.html index 4d6116fae6..164da44fdb 100644 --- a/examples/templates/example.html +++ b/examples/templates/example.html @@ -1,5 +1,5 @@ - + diff --git a/site/build.js b/site/build.js index 8d9d42a323..7c31ee6a05 100644 --- 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(); +} diff --git a/site/layouts/default.hbs b/site/layouts/default.hbs index 706c4c989d..2614b50f83 100644 --- a/site/layouts/default.hbs +++ b/site/layouts/default.hbs @@ -1,6 +1,7 @@ - + + OpenLayers - {{ title }} diff --git a/site/src/index.hbs b/site/src/index.hbs index 51738c2f3f..7b4dcbfab8 100644 --- a/site/src/index.hbs +++ b/site/src/index.hbs @@ -30,24 +30,24 @@ head:

Tiled Layers

- + tiled layers

Pull tiles from OSM, Bing, MapBox, Stamen, and any other XYZ source you can find. OGC mapping services and untiled layers also supported.

Vector Layers

- + vector layers

Render vector data from GeoJSON, TopoJSON, KML, GML, Mapbox vector tiles, and other formats.

Cutting Edge, Fast & Mobile Ready

- + mobile ready

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.

Easy to Customize and Extend

- + customizable

Style your map controls with straight-forward CSS. Hook into different levels of the API or use 3rd party libraries to customize and extend functionality.

@@ -125,99 +125,4 @@ head: - - - \ No newline at end of file + diff --git a/site/src/main.js b/site/src/main.js new file mode 100644 index 0000000000..463ab1f995 --- /dev/null +++ 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 = ''; +};