Added missing Type component

.circleci/config.yml

@@ -50,3 +50,11 @@ jobs:
       - store_artifacts:
           path: build/apidoc
           destination: apidoc
+
+      - run:
+          name: Build Website
+          command: npm run build-site
+
+      - store_artifacts:
+          path: public
+          destination: website

.github/FUNDING.yml

@@ -1,8 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
-open_collective: openlayers
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-custom: # Replace with a single custom sponsorship URL

.github/stale.yml

@@ -1,17 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - blocker
-  - regression
-# Label to use when marking an issue as stale
-staleLabel: stale
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false

.gitignore

@@ -2,3 +2,5 @@
 /coverage/
 /dist/
 node_modules/
+/.cache/
+/public/

changelog/upgrade-notes.md

@@ -4,19 +4,9 @@
 
 #### Backwards incompatible changes
 
-#### Removal of `TOUCH` constant from `ol/has`
-
-If you were previously using this constant, you can check if `'ontouchstart'` is defined in `window` instead.
-
-```js
-if ('ontouchstart' in window) {
-  // ...
-}
-```
-
 #### Removal of `GEOLOCATION` constant from `ol/has`
 
-If you were previously using this constant, you can check if `'geolocation'` is defined in `navigator` instead.
+If you were previously using this constant, you can check if `'geolocation'` is define in `navigator` instead.
 
 ```js
 if ('geolocation' in navigator) {

config/jsdoc/api-info/conf.json

@@ -0,0 +1,23 @@
+{
+  "opts": {
+      "recurse": true,
+      "template": "node_modules/jsdoc-json"
+  },
+  "tags": {
+      "allowUnknownTags": true
+  },
+  "source": {
+      "includePattern": "\\.js$",
+      "include": [
+        "src/ol"
+      ]
+    },
+  "plugins": [
+      "jsdoc-plugin-typescript",
+      "config/jsdoc/api-info/plugins/api",
+      "config/jsdoc/api-info/plugins/module"
+  ],
+  "typescript": {
+    "moduleRoot": "src"
+  }
+}

config/jsdoc/api-info/plugins/api.js

@@ -0,0 +1,15 @@
+
+/**
+ * Handle the api annotation.
+ * @param {Object} dictionary The tag dictionary.
+ */
+exports.defineTags = dictionary => {
+
+  dictionary.defineTag('api', {
+    onTagged: (doclet, tag) => {
+      doclet.api = true;
+    }
+  });
+
+};
+

config/jsdoc/api-info/plugins/module.js

@@ -0,0 +1,170 @@
+/**
+ * This plugin adds an `exportMap` property to @module doclets. Each export map
+ * is an object with properties named like the local identifier and values named
+ * like the exported identifier.
+ *
+ * For example, the code below
+ *
+ *     export {foo as bar};
+ *
+ * would be a map like `{foo: 'bar'}`.
+ *
+ * In the case of an export declaration with a source, the export identifier is
+ * prefixed by the source.  For example, this code
+ *
+ *     export {foo as bar} from 'ol/bam';
+ *
+ * would be a map like `{'ol/bam foo': 'bar'}`.
+ *
+ * If a default export is a literal or object expression, the local name will be
+ * an empty string.  For example
+ *
+ *     export default {foo: 'bar'};
+ *
+ * would be a map like `{'': 'default'}`.
+ */
+const assert = require('assert');
+const path = require('path');
+
+
+/**
+ * A lookup of export maps per source filepath.
+ */
+const exportMapLookup = {};
+
+function loc(filepath, node) {
+  return `${filepath}:${node.loc.start.line}`;
+}
+
+function nameFromChildIdentifier(filepath, node) {
+  assert.ok(node.id, `expected identifer in ${loc(filepath, node)}`);
+  assert.strictEqual(node.id.type, 'Identifier', `expected identifer in ${loc(filepath, node)}`);
+  return node.id.name;
+}
+
+function handleExportNamedDeclaration(filepath, node) {
+  if (!(filepath in exportMapLookup)) {
+    exportMapLookup[filepath] = {};
+  }
+  const exportMap = exportMapLookup[filepath];
+
+  const declaration = node.declaration;
+  if (declaration) {
+    // `export class Foo{}` or `export function foo() {}`
+    if (declaration.type === 'ClassDeclaration' || declaration.type === 'FunctionDeclaration') {
+      const name = nameFromChildIdentifier(filepath, declaration);
+      exportMap[name] = name;
+      return;
+    }
+
+    // `export const foo = 'bar', bam = 42`
+    if (declaration.type === 'VariableDeclaration') {
+      const declarations = declaration.declarations;
+      assert.ok(declarations.length > 0, `expected variable declarations in ${loc(filepath, declaration)}`);
+      for (const declarator of declarations) {
+        assert.strictEqual(declarator.type, 'VariableDeclarator', `unexpected "${declarator.type}" in ${loc(filepath, declarator)}`);
+        const name = nameFromChildIdentifier(filepath, declarator);
+        exportMap[name] = name;
+      }
+      return;
+    }
+
+    throw new Error(`Unexpected named export "${declaration.type}" in ${loc(filepath, declaration)}`);
+  }
+
+  let prefix = '';
+  const source = node.source;
+  if (source) {
+    // `export foo from 'bar'`
+    assert.strictEqual(source.type, 'Literal', `unexpected export source "${source.type}" in ${loc(filepath, source)}`);
+    prefix = `${source.value} `;
+  }
+
+  const specifiers = node.specifiers;
+  assert.ok(specifiers.length > 0, `expected export specifiers in ${loc(filepath, node)}`);
+  // `export {foo, bar}` or `export {default as Foo} from 'bar'`
+  for (const specifier of specifiers) {
+    assert.strictEqual(specifier.type, 'ExportSpecifier', `unexpected export specifier in ${loc(filepath, specifier)}`);
+
+    const local = specifier.local;
+    assert.strictEqual(local.type, 'Identifier', `unexpected local specifier "${local.type} in ${loc(filepath, local)}`);
+
+    const exported = specifier.exported;
+    assert.strictEqual(local.type, 'Identifier', `unexpected exported specifier "${exported.type} in ${loc(filepath, exported)}`);
+
+    exportMap[prefix + local.name] = exported.name;
+  }
+}
+
+function handleDefaultDeclaration(filepath, node) {
+  if (!(filepath in exportMapLookup)) {
+    exportMapLookup[filepath] = {};
+  }
+  const exportMap = exportMapLookup[filepath];
+
+  const declaration = node.declaration;
+  if (declaration) {
+    // `export default class Foo{}` or `export default function foo () {}`
+    if (declaration.type === 'ClassDeclaration' || declaration.type === 'FunctionDeclaration') {
+      const name = nameFromChildIdentifier(filepath, declaration);
+      exportMap[name] = 'default';
+      return;
+    }
+
+    // `export default foo`
+    if (declaration.type === 'Identifier') {
+      exportMap[declaration.name] = 'default';
+      return;
+    }
+
+    // `export default {foo: 'bar'}` or `export default 42`
+    if (declaration.type === 'ObjectExpression' || declaration.type === 'Literal') {
+      exportMap[''] = 'default';
+      return;
+    }
+  }
+
+  throw new Error(`Unexpected default export "${declaration.type}" in ${loc(filepath, declaration)}`);
+}
+
+exports.astNodeVisitor = {
+  visitNode: (node, event, parser, filepath) => {
+    if (node.type === 'ExportNamedDeclaration') {
+      return handleExportNamedDeclaration(filepath, node);
+    }
+
+    if (node.type === 'ExportDefaultDeclaration') {
+      return handleDefaultDeclaration(filepath, node);
+    }
+  }
+};
+
+const moduleLookup = {};
+
+exports.handlers = {
+
+  // create a lookup of @module doclets
+  newDoclet: event => {
+    const doclet = event.doclet;
+    if (doclet.kind === 'module') {
+      const filepath = path.join(doclet.meta.path, doclet.meta.filename);
+
+      assert.ok(!(filepath in moduleLookup), `duplicate @module doc in ${filepath}`);
+      moduleLookup[filepath] = doclet;
+    }
+  },
+
+  // assign the `exportMap` property to @module doclets
+  parseComplete: event => {
+    for (const filepath in moduleLookup) {
+      assert.ok(filepath in exportMapLookup, `missing ${filepath} in export map lookup`);
+      moduleLookup[filepath].exportMap = exportMapLookup[filepath];
+    }
+
+    // make sure there was a @module doclet for each export map
+    for (const filepath in exportMapLookup) {
+      assert.ok(filepath in moduleLookup, `missing @module doclet in ${filepath}`);
+    }
+  }
+
+};

config/jsdoc/api/plugins/api.js

@@ -31,24 +31,6 @@ function hasApiMembers(doclet) {
 }
 
 function includeAugments(doclet) {
-  // Make sure that `observables` and `fires` are taken from an already processed `class` doclet.
-  // This is necessary because JSDoc generates multiple doclets with the same longname.
-  const cls = classes[doclet.longname];
-  if (cls.observables && !doclet.observables) {
-    doclet.observables = cls.observables;
-  }
-  if (doclet.fires && cls.fires) {
-    for (let i = 0, ii = cls.fires.length; i < ii; ++i) {
-      const fires = cls.fires[i];
-      if (doclet.fires.indexOf(fires) == -1) {
-        doclet.fires.push(fires);
-      }
-    }
-  }
-  if (cls.fires && !doclet.fires) {
-    doclet.fires = cls.fires;
-  }
-
   const augments = doclet.augments;
   if (augments) {
     let cls;
@@ -77,9 +59,7 @@ function includeAugments(doclet) {
           });
         }
         cls._hideConstructor = true;
-        if (!cls.undocumented) {
+        delete cls.undocumented;
-          cls._documented = true;
-        }
       }
     }
   }
@@ -166,13 +146,10 @@ exports.handlers = {
         // constructor from the docs.
         doclet._hideConstructor = true;
         includeAugments(doclet);
-      } else if (!doclet._hideConstructor && !(doclet.kind == 'typedef' && doclet.longname in types)) {
+      } else if (doclet.undocumented !== false && !doclet._hideConstructor && !(doclet.kind == 'typedef' && doclet.longname in types)) {
         // Remove all other undocumented symbols
         doclet.undocumented = true;
       }
-      if (doclet._documented) {
-        delete doclet.undocumented;
-      }
     }
   }
 

config/jsdoc/api/template/publish.js

@@ -214,16 +214,14 @@ function buildNav(members) {
     }
     return 0;
   });
-
+  _.each(merged, function(v) {
-  function createEntry(type, v) {
+    // exclude interfaces from sidebar
-    return {
+    if (v.interface !== true) {
-      type: type,
+      if (v.kind == 'module') {
+        nav.push({
+          type: 'module',
           longname: v.longname,
           name: v.name,
-      classes: find({
-        kind: 'class',
-        memberof: v.longname
-      }).map(createEntry.bind(this, 'class')),
           members: find({
             kind: 'member',
             memberof: v.longname
@@ -240,13 +238,31 @@ function buildNav(members) {
             kind: 'event',
             memberof: v.longname
           })
-    };
+        });
       }
-  _.each(merged, function(v) {
+      if (v.kind == 'class') {
-    // exclude interfaces from sidebar
+        nav.push({
-    if (v.interface !== true) {
+          type: 'class',
-      if (v.kind == 'module') {
+          longname: v.longname,
-        nav.push(createEntry('module', v));
+          name: v.name,
+          members: find({
+            kind: 'member',
+            memberof: v.longname
+          }),
+          methods: find({
+            kind: 'function',
+            memberof: v.longname
+          }),
+          typedefs: find({
+            kind: 'typedef',
+            memberof: v.longname
+          }),
+          fires: v.fires,
+          events: find({
+            kind: 'event',
+            memberof: v.longname
+          })
+        });
       }
     }
   });

config/jsdoc/api/template/static/scripts/main.js

@@ -12,18 +12,13 @@ $(function () {
                 var $item = $(v);
 
                 if ($item.data('name') && regexp.test($item.data('name'))) {
-                    const container = $item.parent().parent().parent();
-                    container.show();
-                    container.closest('.itemMembers').show();
-                    container.closest('.item').show();
                     $item.show();
                     $item.closest('.itemMembers').show();
                     $item.closest('.item').show();
                 }
             });
         } else {
-            $el.find('.item, .itemMembers').hide();
+            $el.find('.item, .itemMembers').show();
-            $('.navigation>ul>li').show();
         }
 
         $el.find('.list').scrollTop(0);

config/jsdoc/api/template/tmpl/container.tmpl

@@ -18,7 +18,7 @@
         <sup class="variation"><?js= doc.variation ?></sup>
     <?js } ?></h2>
     <br>
-    <?js if (doc.stability || doc.kind == 'namespace' || doc.kind == 'module') {
+    <?js if (doc.stability || doc.kind == 'namespace') {
       var ancestors = doc.ancestors.map(a => a.replace(/>\./g, '>').replace(/\.</g, '<')).join('/');
       var parts = [];
       if (ancestors) {
@@ -26,21 +26,8 @@
       }
       var importPath = parts.join('/');
     ?>
-      <?js
-        var nameParts = doc.name.split('/');
-        var moduleName = nameParts[nameParts.length - 1];
-        if(moduleName) {
-          var firstChar = moduleName.charAt(0);
-          moduleName = firstChar.toUpperCase() + moduleName.slice(1);
-          var isClassModule = firstChar.toUpperCase() === firstChar;
-        }
-      ?>
-      <?js if (doc.kind == 'module' && !isClassModule && nameParts.length < 3) {?>
-        <pre class="prettyprint source"><code>import * as ol<?js= moduleName ?> from '<?js= doc.name ?>';</code></pre>
-      <?js } else if(doc.kind !== 'module') { ?>
     <pre class="prettyprint source"><code>import <?js= doc.name ?> from '<?js= importPath ?>';</code></pre>
     <?js } ?>
-    <?js } ?>
     <?js if (doc.classdesc) { ?>
         <div class="class-description"><?js= doc.classdesc ?></div>
     <?js } ?>
@@ -156,7 +143,6 @@
         <h3 class="subsection-title">Methods</h3>
 
         <dl><?js methods.forEach(function(m) { ?>
-            <?js m.parent = doc ?>
             <?js= self.partial('method.tmpl', m) ?>
         <?js }); ?></dl>
     <?js } ?>

config/jsdoc/api/template/tmpl/method.tmpl

@@ -27,10 +27,6 @@ var self = this;
 </dt>
 <dd class="<?js= (data.stability && data.stability !== 'stable') ? 'unstable' : '' ?>">
 
-<?js if (data.parent && data.parent.kind == 'module' && data.parent.name.split('ol/').length < 3) { ?>
-  <pre class="prettyprint source"><code>import {<?js= data.name ?>} from '<?js= data.parent.name ?>';</code></pre>
-<?js } ?>
-
     <?js if (data.description) { ?>
     <div class="description">
         <?js= data.description ?>

config/jsdoc/api/template/tmpl/navigation.tmpl

@@ -10,12 +10,11 @@ function toShortName(name) {
     </div>
     <ul class="list">
     <?js
-    let navbuilder;
+    this.nav.forEach(function (item) {
-    this.nav.forEach(navbuilder = function (item) {
     ?>
         <li class="item" data-name="<?js= item.longname ?>">
             <span class="title">
-                <?js= self.linkto(item.longname, item.type === 'module' ? item.longname.replace('module:', '') : item.name) ?>
+                <?js= self.linkto(item.longname, item.longname.replace('module:', '')) ?>
                 <?js if (item.type === 'namespace' &&
                         (item.members.length + item.typedefs.length + item.methods.length +
                          item.events.length > 0)) { ?>
@@ -23,18 +22,6 @@ function toShortName(name) {
             </span>
             <ul class="members itemMembers">
             <?js
-            if (item.classes.length) {
-            ?>
-            <span class="subtitle">Classes</span>
-            <?js
-                item.classes.forEach(function (v) {
-                    navbuilder(v);
-                });
-            }
-            ?>
-            </ul>
-            <ul class="members itemMembers">
-            <?js
             if (item.members.length) {
             ?>
             <span class="subtitle">Members</span>

doc/errors/index.md

@@ -228,15 +228,3 @@ Missing or invalid `size`.
 ### 61
 
 Cannot determine IIIF Image API version from provided image information JSON.
-
-### 62
-
-A `WebGLArrayBuffer` must either be of type `ELEMENT_ARRAY_BUFFER` or `ARRAY_BUFFER`.
-
-### 63
-
-Support for the `OES_element_index_uint` WebGL extension is mandatory for WebGL layers.
-
-### 64
-
-Layer opacity must be a number.

doc/tutorials/concepts.hbs

@@ -75,7 +75,7 @@ The above snippets can be combined into a single script that renders a map with
 import Map from 'ol/Map';
 import View from 'ol/View';
 import OSM from 'ol/source/OSM';
-import TileLayer from 'ol/layer/Tile';
+import TileLayer from 'ol/source/Tile';
 
 new Map({
   layers: [

examples/center.js

@@ -5,7 +5,6 @@ import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
-/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
 const source = new VectorSource({
   url: 'data/geojson/switzerland.geojson',
   format: new GeoJSON()
@@ -52,21 +51,21 @@ const zoomtoswitzerland =
     document.getElementById('zoomtoswitzerland');
 zoomtoswitzerland.addEventListener('click', function() {
   const feature = source.getFeatures()[0];
-  const polygon = feature.getGeometry();
+  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
   view.fit(polygon, {padding: [170, 50, 30, 150]});
 }, false);
 
 const zoomtolausanne = document.getElementById('zoomtolausanne');
 zoomtolausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];
-  const point = feature.getGeometry();
+  const point = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
   view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
 }, false);
 
 const centerlausanne = document.getElementById('centerlausanne');
 centerlausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];
-  const point = feature.getGeometry();
+  const point = /** @type {import("../src/ol/geom/Point.js").default} */ (feature.getGeometry());
   const size = map.getSize();
   view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);

examples/custom-interactions.js

@@ -129,7 +129,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json'
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
       })
     }),
     new VectorLayer({

examples/d3.js

@@ -2,7 +2,7 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {getWidth, getCenter} from '../src/ol/extent.js';
 import {Layer, Tile as TileLayer} from '../src/ol/layer.js';
-import SourceState from '../src/ol/source/State.js';
+import SourceState from '../src/ol/source/State';
 import {fromLonLat, toLonLat} from '../src/ol/proj.js';
 import Stamen from '../src/ol/source/Stamen.js';
 

examples/export-pdf.js

@@ -65,18 +65,18 @@ exportButton.addEventListener('click', function() {
   const width = Math.round(dim[0] * resolution / 25.4);
   const height = Math.round(dim[1] * resolution / 25.4);
   const size = map.getSize();
-  const viewResolution = map.getView().getResolution();
+  const extent = map.getView().calculateExtent(size);
 
   map.once('rendercomplete', function() {
-    exportOptions.width = width;
+    toJpeg(map.getTargetElement(), exportOptions).then(function(dataUrl) {
-    exportOptions.height = height;
-    toJpeg(map.getViewport(), exportOptions).then(function(dataUrl) {
       const pdf = new jsPDF('landscape', undefined, format);
       pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
       pdf.save('map.pdf');
       // Reset original map size
       map.setSize(size);
-      map.getView().setResolution(viewResolution);
+      map.getView().fit(extent, {
+        size: size
+      });
       exportButton.disabled = false;
       document.body.style.cursor = 'auto';
     });
@@ -85,7 +85,6 @@ exportButton.addEventListener('click', function() {
   // Set print size
   const printSize = [width, height];
   map.setSize(printSize);
-  const scaling = Math.min(width / size[0], height / size[1]);
+  map.getView().fit(extent, {size: printSize});
-  map.getView().setResolution(viewResolution / scaling);
 
 }, false);

examples/extent-constrained.js

@@ -3,7 +3,7 @@ import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
-import ZoomSlider from '../src/ol/control/ZoomSlider.js';
+import ZoomSlider from '../src/ol/control/ZoomSlider';
 
 const view = new View({
   center: [328627.563458, 5921296.662223],

examples/feature-animation.js

@@ -21,8 +21,7 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 1,
+    zoom: 1
-    multiWorld: true
   })
 });
 

examples/feature-move-animation.js

@@ -67,10 +67,10 @@ const routeFeature = new Feature({
   type: 'route',
   geometry: route
 });
-const geoMarker = /** @type Feature<import("../src/ol/geom/Point").default> */(new Feature({
+const geoMarker = new Feature({
   type: 'geoMarker',
   geometry: new Point(routeCoords[0])
-}));
+});
 const startMarker = new Feature({
   type: 'icon',
   geometry: new Point(routeCoords[0])
@@ -191,7 +191,7 @@ function stopAnimation(ended) {
 
   // if animation cancelled set the marker at the beginning
   const coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
-  const geometry = geoMarker.getGeometry();
+  const geometry = /** @type {import("../src/ol/geom/Point").default} */ (geoMarker.getGeometry());
   geometry.setCoordinates(coord);
   //remove listener
   vectorLayer.un('postrender', moveFeature);

examples/filter-points-webgl.js

@@ -1,14 +1,14 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import Feature from '../src/ol/Feature.js';
+import Feature from '../src/ol/Feature';
-import Point from '../src/ol/geom/Point.js';
+import Point from '../src/ol/geom/Point';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import VectorLayer from '../src/ol/layer/Vector';
-import {Vector} from '../src/ol/source.js';
+import {Vector} from '../src/ol/source';
-import {fromLonLat} from '../src/ol/proj.js';
+import {fromLonLat} from '../src/ol/proj';
-import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
+import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer';
-import {clamp, lerp} from '../src/ol/math.js';
+import {clamp, lerp} from '../src/ol/math';
-import Stamen from '../src/ol/source/Stamen.js';
+import Stamen from '../src/ol/source/Stamen';
 
 const vectorSource = new Vector({
   attributions: 'NASA'

examples/geojson-vt.js

@@ -6,7 +6,7 @@ import VectorTileSource from '../src/ol/source/VectorTile.js';
 import {Tile as TileLayer, VectorTile as VectorTileLayer} from '../src/ol/layer.js';
 import Projection from '../src/ol/proj/Projection.js';
 
-// Converts geojson-vt data to GeoJSON
+
 const replacer = function(key, value) {
   if (value.geometry) {
     let type;
@@ -46,6 +46,11 @@ const replacer = function(key, value) {
   }
 };
 
+const tilePixels = new Projection({
+  code: 'TILE_PIXELS',
+  units: 'tile-pixels'
+});
+
 const map = new Map({
   layers: [
     new TileLayer({
@@ -68,22 +73,23 @@ fetch(url).then(function(response) {
     debug: 1
   });
   const vectorSource = new VectorTileSource({
-    format: new GeoJSON({
+    format: new GeoJSON(),
-      // Data returned from geojson-vt is in tile pixel units
+    tileLoadFunction: function(tile) {
-      dataProjection: new Projection({
+      const format = tile.getFormat();
-        code: 'TILE_PIXELS',
+      const tileCoord = tile.getTileCoord();
-        units: 'tile-pixels',
-        extent: [0, 0, 4096, 4096]
-      })
-    }),
-    tileUrlFunction: function(tileCoord) {
       const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]);
-      const geojson = JSON.stringify({
+
+      const features = format.readFeatures(
+        JSON.stringify({
           type: 'FeatureCollection',
           features: data ? data.features : []
-      }, replacer);
+        }, replacer));
-      return 'data:application/json;charset=UTF-8,' + geojson;
+      tile.setLoader(function() {
-    }
+        tile.setFeatures(features);
+        tile.setProjection(tilePixels);
+      });
+    },
+    url: 'data:' // arbitrary url, we don't use it in the tileLoadFunction
   });
   const vectorLayer = new VectorTileLayer({
     source: vectorSource

examples/icon-color.js

@@ -56,7 +56,7 @@ const vectorLayer = new VectorLayer({
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
-    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+    url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
     crossOrigin: ''
   })
 });

examples/icon-sprite-webgl.html

@@ -13,9 +13,5 @@ docs: >
 
   The dataset contains around 80k points and can be found here: https://www.kaggle.com/NUFORC/ufo-sightings
 tags: "webgl, icon, sprite, point, ufo"
-cloak:
-  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
-    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
-<div>Current sighting: <span id="info"></span></div>

examples/icon-sprite-webgl.js

@@ -1,16 +1,14 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import TileJSON from '../src/ol/source/TileJSON.js';
+import TileJSON from '../src/ol/source/TileJSON';
-import Feature from '../src/ol/Feature.js';
+import Feature from '../src/ol/Feature';
-import Point from '../src/ol/geom/Point.js';
+import Point from '../src/ol/geom/Point';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import VectorLayer from '../src/ol/layer/Vector';
-import {Vector} from '../src/ol/source.js';
+import {Vector} from '../src/ol/source';
-import {fromLonLat} from '../src/ol/proj.js';
+import {fromLonLat} from '../src/ol/proj';
-import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
+import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer';
-import {lerp} from '../src/ol/math.js';
+import {lerp} from '../src/ol/math';
-
-const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 
 const vectorSource = new Vector({
   features: [],
@@ -103,11 +101,11 @@ function loadData() {
 
 loadData();
 
-const map = new Map({
+new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?access_token=' + key,
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.world-dark.json?secure',
         crossOrigin: 'anonymous'
       })
     }),
@@ -121,18 +119,3 @@ const map = new Map({
     zoom: 2
   })
 });
-
-const info = document.getElementById('info');
-map.on('pointermove', function(evt) {
-  if (map.getView().getInteracting()) {
-    return;
-  }
-  const pixel = evt.pixel;
-  info.innerText = '';
-  map.forEachFeatureAtPixel(pixel, function(feature) {
-    const datetime = feature.get('datetime');
-    const duration = feature.get('duration');
-    const shape = feature.get('shape');
-    info.innerText = 'On ' + datetime + ', lasted ' + duration + ' seconds and had a "' + shape + '" shape.';
-  });
-});

examples/icon.js

@@ -37,7 +37,7 @@ const vectorLayer = new VectorLayer({
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
-    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+    url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
     crossOrigin: ''
   })
 });

examples/layer-zoom-limits.html

@@ -1,13 +0,0 @@
----
-layout: example.html
-title: Layer Zoom Limits
-shortdesc: Using minZoom and maxZoom to control layer visibility.
-docs: >
-  Layers support `minZoom` and `maxZoom` options for controlling visibility based on the view's zoom level.
-  If min or max zoom are set, the layer will only be visible at zoom levels greater than the `minZoom` and
-  less than or equal to the `maxZoom`.  After construction, the layer's `setMinZoom` and `setMaxZoom` can
-  be used to set limits.  This example shows an OSM layer at zoom levels 14 and lower and a USGS layer at
-  zoom levels higher than 14.
-tags: "minZoom, maxZoom, layer"
----
-<div id="map" class="map"></div>

examples/layer-zoom-limits.js

@@ -1,33 +0,0 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import OSM from '../src/ol/source/OSM.js';
-import XYZ from '../src/ol/source/XYZ.js';
-import {transformExtent, fromLonLat} from '../src/ol/proj.js';
-
-const mapExtent = [-112.261791, 35.983744, -112.113981, 36.132062];
-
-const map = new Map({
-  target: 'map',
-  layers: [
-    new TileLayer({
-      maxZoom: 14, // visible at zoom levels 14 and below
-      source: new OSM()
-    }),
-    new TileLayer({
-      minZoom: 14, // visible at zoom levels above 14
-      source: new XYZ({
-        attributions: 'Tiles © USGS, rendered with ' +
-        '<a href="http://www.maptiler.com/">MapTiler</a>',
-        url: 'https://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png'
-      })
-    })
-  ],
-  view: new View({
-    center: fromLonLat([-112.18688965, 36.057944835]),
-    zoom: 15,
-    maxZoom: 18,
-    extent: transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857'),
-    constrainOnlyCenter: true
-  })
-});

examples/mapbox-layer.html

@@ -3,13 +3,13 @@ layout: example.html
 title: Mapbox-gl Layer
 shortdesc: Example of a Mapbox-gl-js layer integration.
 docs: >
-  Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired.
+  Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
-tags: "simple, mapbox, vector, tiles, maptiler"
+tags: "simple, mapbox, vector, tiles"
 resources:
   - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js
   - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.css
 cloak:
-  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+  - key: ER67WIiPdCQvhgsUjoWK
-    value: Get your own API key at https://www.maptiler.com/cloud/
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/mapbox-layer.js

@@ -1,17 +1,17 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import Layer from '../src/ol/layer/Layer.js';
+import Layer from '../src/ol/layer/Layer';
-import {toLonLat, fromLonLat} from '../src/ol/proj.js';
+import {toLonLat, fromLonLat} from '../src/ol/proj';
 import {Stroke, Style} from '../src/ol/style.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 
 const center = [-98.8, 37.9];
-const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const key = 'ER67WIiPdCQvhgsUjoWK';
 
 const mbMap = new mapboxgl.Map({
-  style: 'https://api.maptiler.com/maps/bright/style.json?key=' + key,
+  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key,
   attributionControl: false,
   boxZoom: false,
   center: center,

examples/mapbox-style.html

@@ -2,10 +2,10 @@
 layout: example-verbatim.html
 title: Vector tiles created from a Mapbox Style object
 shortdesc: Example of using ol-mapbox-style with tiles from tilehosting.com.
-tags: "vector tiles, mapbox style, ol-mapbox-style, maptiler"
+tags: "vector tiles, mapbox style, ol-mapbox-style"
 cloak:
-  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+  - key: lirfd6Fegsjkvs0lshxe
-    value: Get your own API key at https://www.maptiler.com/cloud/
+    value: Your API key from http://tilehosting.com/ here
 ---
 <!doctype html>
 <html lang="en">

examples/mapbox-style.js

@@ -1,3 +1,3 @@
 import apply from 'ol-mapbox-style';
 
-apply('map', 'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB');
+apply('map', 'https://maps.tilehosting.com/styles/topo/style.json?key=ER67WIiPdCQvhgsUjoWK');

examples/osm-vector-tiles.html

@@ -6,7 +6,7 @@ docs: >
   A simple vector tiles map with Mapzen vector tiles. This example uses the TopoJSON format's `layerName` option to determine the layer ("water", "roads", "buildings") for styling. **Note**: [`ol/format/MVT`] is an even more efficient format for vector tiles.
 tags: "vector, tiles, osm, mapzen"
 cloak:
-  - key: uZNs91nMR-muUTP99MyBSg
+  - key: vector-tiles-5eJz6JX
-    value: Your Nextzen API key from https://developers.nextzen.org/
+    value: Your Mapzen API key from https://mapzen.com/developers
 ---
 <div id="map" class="map"></div>

examples/osm-vector-tiles.js

@@ -6,7 +6,7 @@ import {fromLonLat} from '../src/ol/proj.js';
 import VectorTileSource from '../src/ol/source/VectorTile.js';
 import {Fill, Stroke, Style} from '../src/ol/style.js';
 
-const key = 'uZNs91nMR-muUTP99MyBSg';
+const key = 'vector-tiles-5eJz6JX';
 
 const roadStyleCache = {};
 const roadColor = {
@@ -67,7 +67,7 @@ const map = new Map({
           layers: ['water', 'roads', 'buildings']
         }),
         maxZoom: 19,
-        url: 'https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
+        url: 'https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
       }),
       style: function(feature, resolution) {
         switch (feature.get('layer')) {

examples/popup.html

@@ -7,9 +7,6 @@ docs: >
     Click on the map to get a popup.  The popup is composed of a few basic elements: a container, a close button, and a place for the content.  To anchor the popup to the map, an <code>ol/Overlay</code> is created with the popup container.  A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
   </p>
 tags: "overlay, popup"
-cloak:
-  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
-    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="popup" class="ol-popup">

examples/popup.js

@@ -6,7 +6,6 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import {toLonLat} from '../src/ol/proj.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 
-const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 
 /**
  * Elements that make up the popup.
@@ -46,7 +45,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?access_token=' + key,
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure',
         crossOrigin: 'anonymous'
       })
     })

examples/side-by-side.css

@@ -1,10 +0,0 @@
-@media (min-width: 800px) {
-  .wrapper {
-    display: flex;
-  }
-  .half {
-    padding: 0 10px;
-    width: 50%;
-    float: left;
-  }
-}

examples/side-by-side.html

@@ -1,21 +0,0 @@
----
-layout: example.html
-title: Shared Views
-shortdesc: Two maps share view properties
-docs: >
-  Two maps (one Road, one Aerial) share the same center, resolution and rotation.
-tags: "side-by-side, bing, bing-maps"
-cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
----
-<div class="wrapper">
-  <div class="half">
-    <h4>Road</h4>
-    <div id="roadMap" class="map"></div>
-  </div>
-  <div class="half">
-    <h4>Aerial</h4>
-    <div id="aerialMap" class="map"></div>
-  </div>
-</div>

examples/side-by-side.js

@@ -1,37 +0,0 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
-
-const roadLayer = new TileLayer({
-  source: new BingMaps({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-    imagerySet: 'RoadOnDemand',
-    maxZoom: 19
-  })
-});
-
-const aerialLayer = new TileLayer({
-  source: new BingMaps({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-    imagerySet: 'Aerial',
-    maxZoom: 19
-  })
-});
-
-const view = new View({
-  center: [-6655.5402445057125, 6709968.258934638],
-  zoom: 13
-});
-
-const map1 = new Map({
-  target: 'roadMap',
-  layers: [roadLayer],
-  view: view
-});
-
-const map2 = new Map({
-  target: 'aerialMap',
-  layers: [aerialLayer],
-  view: view
-});

examples/tilejson.js

@@ -8,7 +8,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
         crossOrigin: 'anonymous'
       })
     })

examples/utfgrid.html

@@ -4,7 +4,7 @@ title: UTFGrid
 shortdesc: This example shows how to read data from a UTFGrid source.
 docs: >
   <p>Point to a country to see its name and flag.</p>
-  Tiles made with <a href="http://tilemill.com">TileMill</a>. Hosting on <a href="mapbox.com">mapbox.com</a> or with open-source <a href="https://github.com/klokantech/tileserver-php/">TileServer</a>.
+  Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/).
 tags: "utfgrid, tilejson"
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q

examples/vector-label-decluttering.html

@@ -5,7 +5,7 @@ shortdesc: Label decluttering with a custom renderer.
 resources:
   - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
 docs: >
-  Decluttering is used to avoid overlapping labels. The `overflow: true` setting on the text style makes it so labels that do not fit within the bounds of a polygon are also included.
+  Decluttering is used to avoid overlapping labels with `overflow: true` set on the text style. For MultiPolygon geometries, only the widest polygon is selected in a custom `geometry` function.
 tags: "vector, decluttering, labels"
 ---
 <div id="map" class="map"></div>

examples/vector-label-decluttering.js

@@ -1,5 +1,6 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
+import {getWidth} from '../src/ol/extent.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
@@ -14,6 +15,23 @@ const map = new Map({
 });
 
 const labelStyle = new Style({
+  geometry: function(feature) {
+    let geometry = feature.getGeometry();
+    if (geometry.getType() == 'MultiPolygon') {
+      // Only render label for the widest polygon of a multipolygon
+      const polygons = geometry.getPolygons();
+      let widest = 0;
+      for (let i = 0, ii = polygons.length; i < ii; ++i) {
+        const polygon = polygons[i];
+        const width = getWidth(polygon.getExtent());
+        if (width > widest) {
+          widest = width;
+          geometry = polygon;
+        }
+      }
+    }
+    return geometry;
+  },
   text: new Text({
     font: '12px Calibri,sans-serif',
     overflow: true,

examples/webpack/worker-loader.js

@@ -2,7 +2,14 @@ const build = require('../../tasks/serialize-workers').build;
 
 function loader() {
   const callback = this.async();
-  const minify = this.mode === 'production';
+
+  let minify = false;
+
+  // TODO: remove when https://github.com/webpack/webpack/issues/6496 is addressed
+  const compilation = this._compilation;
+  if (compilation) {
+    minify = compilation.compiler.options.mode === 'production';
+  }
 
   build(this.resource, {minify})
     .then(chunk => {

examples/wms-getlegendgraphic.html

@@ -1,15 +0,0 @@
----
-layout: example.html
-title: WMS GetLegendGraphic
-shortdesc: Example of a WMS GetLegendGraphic.
-docs: >
-  WMS supports the [getLegendGraphic request](https://docs.geoserver.org/latest/en/user/services/wms/get_legend_graphic/index.html).
-  This example demonstrates the use of the `getGetLegendGraphicUrl` method.
-
-
-  As a legend can be responsive to the scale it is updated on every change of the resolution.
-tags: "GetLegendGraphic, getGetLegendGraphicURL, WMS"
----
-<div id="map" class="map"></div>
-Legend:
-<div><img id="legend" src=""/></div>

examples/wms-getlegendgraphic.js

@@ -1,47 +0,0 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
-import ImageWMS from '../src/ol/source/ImageWMS.js';
-import OSM from '../src/ol/source/OSM.js';
-
-const wmsSource = new ImageWMS({
-  url: 'https://ahocevar.com/geoserver/wms',
-  params: {'LAYERS': 'topp:states'},
-  ratio: 1,
-  serverType: 'geoserver'
-});
-
-const updateLegend = function(resolution) {
-  const graphicUrl = wmsSource.getGetLegendGraphicUrl(resolution);
-  const img = document.getElementById('legend');
-  img.src = graphicUrl;
-};
-
-const layers = [
-  new TileLayer({
-    source: new OSM()
-  }),
-  new ImageLayer({
-    extent: [-13884991, 2870341, -7455066, 6338219],
-    source: wmsSource
-  })
-];
-
-const map = new Map({
-  layers: layers,
-  target: 'map',
-  view: new View({
-    center: [-10997148, 4569099],
-    zoom: 4
-  })
-});
-
-// Initial legend
-const resolution = map.getView().getResolution();
-updateLegend(resolution);
-
-// Update the legend when the resolution changes
-map.getView().on('change:resolution', function(event) {
-  const resolution = event.target.getResolution();
-  updateLegend(resolution);
-});

examples/worker.js

@@ -4,7 +4,7 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
-import {create as createVersionWorker} from '../src/ol/worker/version.js';
+import {create as createVersionWorker} from '../src/ol/worker/version';
 
 
 const map = new Map({

gatsby-config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: [
+    'gatsby-plugin-emotion',
+    {
+      resolve: 'gatsby-plugin-typography',
+      options: {
+        pathToConfigModule: 'site/util/typography'
+      }
+    }
+  ]
+};

gatsby-node.js

@@ -0,0 +1,23 @@
+
+function getDocs() {
+  // TODO: build if not present
+  const info = require('./build/api-info.json');
+
+  return info.docs.filter(doc => !doc.ignore && (doc.api || doc.kind === 'module' || doc.kind === 'typedef'));
+}
+
+function createPages({actions: {createPage}}) {
+  createPage({
+    path: '/api',
+    component: require.resolve('./site/pages/API.js'),
+    context: {docs: getDocs()}
+  });
+
+  createPage({
+    path: '/info',
+    component: require.resolve('./site/pages/Info.js'),
+    context: {docs: getDocs()}
+  });
+}
+
+exports.createPages = createPages;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "6.0.0-beta.15",
+  "version": "6.0.0-beta.8",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",
@@ -24,7 +24,10 @@
     "copy-css": "shx cp src/ol/ol.css build/ol/ol.css",
     "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers && tsc --project config/tsconfig-build.json",
     "typecheck": "tsc --pretty",
-    "apidoc": "jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
+    "apidoc": "jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc",
+    "api-info": "jsdoc --configure config/jsdoc/api-info/conf.json --destination build/api-info.json",
+    "serve-site": "gatsby develop",
+    "build-site": "npm run api-info && gatsby build"
   },
   "main": "index.js",
   "repository": {
@@ -43,6 +46,8 @@
   "devDependencies": {
     "@babel/core": "^7.4.0",
     "@babel/preset-env": "^7.4.4",
+    "@emotion/core": "^10.0.10",
+    "@emotion/styled": "^10.0.11",
     "@openlayers/eslint-plugin": "^4.0.0-beta.2",
     "@types/arcgis-rest-api": "^10.4.4",
     "@types/geojson": "^7946.0.7",
@@ -54,23 +59,29 @@
     "chaikin-smooth": "^1.0.4",
     "clean-css-cli": "4.3.0",
     "copy-webpack-plugin": "^5.0.3",
-    "coveralls": "3.0.6",
+    "coveralls": "3.0.3",
-    "eslint": "^6.0.0",
+    "eslint": "^5.16.0",
-    "eslint-config-openlayers": "^12.0.0",
+    "eslint-config-openlayers": "^11.0.0",
+    "eslint-config-tschaub": "^13.1.0",
+    "eslint-plugin-react": "^7.13.0",
     "expect.js": "0.3.1",
     "front-matter": "^3.0.2",
     "fs-extra": "^8.0.0",
+    "gatsby": "^2.4.3",
+    "gatsby-plugin-emotion": "^4.0.6",
+    "gatsby-plugin-typography": "^2.2.13",
     "glob": "^7.1.4",
-    "globby": "^10.0.0",
+    "globby": "^9.2.0",
     "handlebars": "4.1.2",
     "html-to-image": "^0.1.0",
     "istanbul": "0.4.5",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jquery": "3.4.1",
-    "jsdoc": "3.6.3",
+    "jsdoc": "3.6.2",
+    "jsdoc-json": "^2.0.2",
     "jsdoc-plugin-typescript": "^2.0.1",
     "karma": "^4.1.0",
-    "karma-chrome-launcher": "3.1.0",
+    "karma-chrome-launcher": "2.2.0",
     "karma-coverage": "^1.1.2",
     "karma-coverage-istanbul-reporter": "^2.0.5",
     "karma-firefox-launcher": "^1.1.0",
@@ -78,30 +89,38 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.0-rc.2",
     "loglevelnext": "^3.0.1",
-    "marked": "0.7.0",
+    "marked": "0.6.2",
-    "mocha": "6.2.0",
+    "mocha": "6.1.4",
-    "ol-mapbox-style": "^5.0.0-beta.3",
+    "ol-mapbox-style": "^5.0.0-beta.2",
-    "pixelmatch": "^5.0.0",
+    "pixelmatch": "^4.0.2",
     "pngjs": "^3.4.0",
     "proj4": "2.5.0",
-    "puppeteer": "~1.19.0",
+    "prop-types": "^15.7.2",
+    "puppeteer": "~1.16.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-markdown": "^4.0.8",
+    "react-syntax-highlighter": "^10.2.1",
+    "react-typography": "^0.16.19",
     "rollup": "^1.12.0",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-node-resolve": "^5.0.0",
-    "rollup-plugin-terser": "^5.0.0",
+    "rollup-plugin-terser": "^4.0.4",
     "serve-static": "^1.14.0",
     "shx": "^0.3.2",
     "sinon": "^7.3.2",
     "terser-webpack-plugin": "^1.2.3",
     "typescript": "^3.4.5",
+    "typography": "^0.16.19",
+    "typography-theme-alton": "^0.16.19",
     "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
-    "webpack": "4.39.2",
+    "webpack": "4.31.0",
     "webpack-cli": "^3.3.2",
     "webpack-dev-middleware": "^3.6.2",
     "webpack-dev-server": "^3.3.1",
-    "yargs": "^14.0.0"
+    "yargs": "^13.2.2"
   },
   "eslintConfig": {
     "extends": "openlayers",

rendering/cases/circle-style/main.js

@@ -1,57 +0,0 @@
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import Feature from '../../../src/ol/Feature.js';
-import Point from '../../../src/ol/geom/Point.js';
-import VectorLayer from '../../../src/ol/layer/Vector.js';
-import VectorSource from '../../../src/ol/source/Vector.js';
-import Circle from '../../../src/ol/style/Circle.js';
-import Style from '../../../src/ol/style/Style.js';
-import Stroke from '../../../src/ol/style/Stroke.js';
-
-
-const vectorSource = new VectorSource();
-
-vectorSource.addFeatures([
-  new Feature({
-    geometry: new Point([-50, 50]),
-    radius: 10
-  }),
-  new Feature({
-    geometry: new Point([50, -50]),
-    radius: 20
-  }),
-  new Feature({
-    geometry: new Point([50, 50]),
-    radius: 30
-  })
-]);
-
-const style = new Style({
-  image: new Circle({
-    radius: 1,
-    stroke: new Stroke({
-      color: '#00f',
-      width: 3
-    })
-  })
-});
-
-new Map({
-  pixelRatio: 1,
-  layers: [
-    new VectorLayer({
-      source: vectorSource,
-      style: function(feature) {
-        style.getImage().setRadius(feature.get('radius'));
-        return style;
-      }
-    })
-  ],
-  target: 'map',
-  view: new View({
-    center: [0, 0],
-    resolution: 1
-  })
-});
-
-render();

rendering/cases/heatmap-layer/main.js

@@ -1,10 +1,10 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import XYZ from '../../../src/ol/source/XYZ';
-import {Heatmap as HeatmapLayer} from '../../../src/ol/layer.js';
+import {Heatmap as HeatmapLayer} from '../../../src/ol/layer';
-import VectorSource from '../../../src/ol/source/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector';
-import KML from '../../../src/ol/format/KML.js';
+import KML from '../../../src/ol/format/KML';
 
 const vector = new HeatmapLayer({
   source: new VectorSource({

rendering/cases/layer-group/main.js

@@ -1,30 +0,0 @@
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import {Group as LayerGroup, Tile as TileLayer} from '../../../src/ol/layer.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
-
-new Map({
-  target: 'map',
-  view: new View({
-    center: [0, 0],
-    zoom: 3
-  }),
-  layers: new LayerGroup({
-    opacity: 0.75,
-    layers: [
-      new TileLayer({
-        opacity: 0.25,
-        source: new XYZ({
-          url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
-        })
-      }),
-      new TileLayer({
-        source: new XYZ({
-          url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png'
-        })
-      })
-    ]
-  })
-});
-
-render();

rendering/cases/layer-image/main.js

@@ -5,7 +5,7 @@ import {
   get as getProjection,
   transform,
   transformExtent
-} from '../../../src/ol/proj.js';
+} from '../../../src/ol/proj';
 import ImageLayer from '../../../src/ol/layer/Image.js';
 const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857');
 

rendering/cases/layer-tile-extent/main.js

@@ -5,9 +5,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj.js';
+import {fromLonLat} from '../../../src/ol/proj';
 import {transformExtent} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import XYZ from '../../../src/ol/source/XYZ';
 
 const center = fromLonLat([7, 50]);
 const extent = transformExtent([2, 47, 10, 53], 'EPSG:4326', 'EPSG:3857');

rendering/cases/layer-tile-none-square/main.js

@@ -1,7 +1,7 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import XYZ from '../../../src/ol/source/XYZ';
 import {createXYZ} from '../../../src/ol/tilegrid.js';
 
 const center = [-10997148, 4569099];

rendering/cases/layer-tile-opacity/main.js

@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj.js';
+import {fromLonLat} from '../../../src/ol/proj';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import XYZ from '../../../src/ol/source/XYZ';
 
 const center = fromLonLat([8.6, 50.1]);
 

rendering/cases/layer-tile-render-listener/main.js

@@ -1,46 +0,0 @@
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import TileLayer from '../../../src/ol/layer/Tile.js';
-import {transform, fromLonLat} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
-import CircleStyle from '../../../src/ol/style/Circle.js';
-import Fill from '../../../src/ol/style/Fill.js';
-import Stroke from '../../../src/ol/style/Stroke.js';
-import Point from '../../../src/ol/geom/Point.js';
-import {getVectorContext} from '../../../src/ol/render.js';
-
-const center = fromLonLat([8.6, 50.1]);
-
-const layer = new TileLayer({
-  source: new XYZ({
-    url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
-    transition: 0
-  })
-});
-
-const onRender = function(event) {
-  const context = event.context;
-  context.restore();
-  const vectorContext = getVectorContext(event);
-  vectorContext.setImageStyle(new CircleStyle({
-    radius: 12,
-    fill: new Fill({color: 'yellow'}),
-    stroke: new Stroke({color: 'red', width: 1})
-  }));
-  vectorContext.drawPoint(new Point(
-    transform([13, 37], 'EPSG:4326', 'EPSG:3857')));
-};
-layer.on('postrender', onRender);
-
-const map = new Map({
-  layers: [
-  ],
-  target: 'map',
-  view: new View({
-    center: center,
-    zoom: 3
-  })
-});
-map.addLayer(layer);
-
-render();

rendering/cases/layer-tile-simple/main.js

@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj.js';
+import {fromLonLat} from '../../../src/ol/proj';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import XYZ from '../../../src/ol/source/XYZ';
 
 const center = fromLonLat([8.6, 50.1]);
 

rendering/cases/layer-tile-transition/main.js

@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj.js';
+import {fromLonLat} from '../../../src/ol/proj';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import XYZ from '../../../src/ol/source/XYZ';
 
 const center = fromLonLat([8.6, 50.1]);
 

rendering/cases/layer-tile-two-layers/main.js

@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj.js';
+import {fromLonLat} from '../../../src/ol/proj';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import XYZ from '../../../src/ol/source/XYZ';
 
 const center = fromLonLat([8.6, 50.1]);
 

rendering/cases/layer-vector-multigeometry-decluttering/main.js

@@ -1,55 +0,0 @@
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import GeoJSON from '../../../src/ol/format/GeoJSON.js';
-import VectorLayer from '../../../src/ol/layer/Vector.js';
-import VectorSource from '../../../src/ol/source/Vector.js';
-import {Fill, Stroke, Style, Text} from '../../../src/ol/style.js';
-
-const map = new Map({
-  target: 'map',
-  view: new View({
-    center: [-17465028, 2331736],
-    zoom: 5
-  })
-});
-
-const labelStyle = new Style({
-  text: new Text({
-    font: '16px Ubuntu',
-    overflow: true,
-    fill: new Fill({
-      color: '#000'
-    }),
-    stroke: new Stroke({
-      color: '#fff',
-      width: 3
-    })
-  })
-});
-const countryStyle = new Style({
-  fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)'
-  }),
-  stroke: new Stroke({
-    color: '#319FD3',
-    width: 1
-  })
-});
-const style = [countryStyle, labelStyle];
-
-const vectorLayer = new VectorLayer({
-  source: new VectorSource({
-    url: '/data/countries.json',
-    format: new GeoJSON()
-  }),
-  style: function(feature) {
-    labelStyle.getText().setText(feature.get('name'));
-    return style;
-  },
-  declutter: true
-});
-
-map.addLayer(vectorLayer);
-
-
-render({tolerance: 0.007});

rendering/cases/layer-vectortile-rotate-hidpi/main.js

@@ -1,9 +1,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile';
-import MVT from '../../../src/ol/format/MVT.js';
+import MVT from '../../../src/ol/format/MVT';
-import {createXYZ} from '../../../src/ol/tilegrid.js';
+import {createXYZ} from '../../../src/ol/tilegrid';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile';
 
 const map = new Map({
   pixelRatio: 2,

rendering/cases/layer-vectortile-rotate-vector/main.js

@@ -1,16 +1,16 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile';
-import MVT from '../../../src/ol/format/MVT.js';
+import MVT from '../../../src/ol/format/MVT';
-import {createXYZ} from '../../../src/ol/tilegrid.js';
+import {createXYZ} from '../../../src/ol/tilegrid';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile';
-import VectorSource from '../../../src/ol/source/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector';
-import Feature from '../../../src/ol/Feature.js';
+import Feature from '../../../src/ol/Feature';
-import Point from '../../../src/ol/geom/Point.js';
+import Point from '../../../src/ol/geom/Point';
-import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorLayer from '../../../src/ol/layer/Vector';
-import Style from '../../../src/ol/style/Style.js';
+import Style from '../../../src/ol/style/Style';
-import CircleStyle from '../../../src/ol/style/Circle.js';
+import CircleStyle from '../../../src/ol/style/Circle';
-import Fill from '../../../src/ol/style/Fill.js';
+import Fill from '../../../src/ol/style/Fill';
 
 const vectorSource = new VectorSource({
   features: [

rendering/cases/layer-vectortile-rotate/main.js

@@ -1,9 +1,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile';
-import MVT from '../../../src/ol/format/MVT.js';
+import MVT from '../../../src/ol/format/MVT';
-import {createXYZ} from '../../../src/ol/tilegrid.js';
+import {createXYZ} from '../../../src/ol/tilegrid';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile';
 
 const map = new Map({
   layers: [

rendering/cases/layer-vectortile-simple/main.js

@@ -1,9 +1,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile';
-import MVT from '../../../src/ol/format/MVT.js';
+import MVT from '../../../src/ol/format/MVT';
-import {createXYZ} from '../../../src/ol/tilegrid.js';
+import {createXYZ} from '../../../src/ol/tilegrid';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile';
 
 new Map({
   layers: [

rendering/cases/multiple-layers/main.js

@@ -9,6 +9,12 @@ import Point from '../../../src/ol/geom/Point.js';
 
 const map = new Map({
   layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        maxZoom: 3
+      })
+    }),
     new VectorLayer({
       zIndex: 1,
       style: new Style({
@@ -21,12 +27,6 @@ const map = new Map({
         url: '/data/countries.json',
         format: new GeoJSON()
       })
-    }),
-    new TileLayer({
-      source: new XYZ({
-        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
-        maxZoom: 3
-      })
     })
   ],
   target: 'map',

rendering/cases/reproj-image/main.js

@@ -1,31 +0,0 @@
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import Static from '../../../src/ol/source/ImageStatic.js';
-import {
-  get as getProjection,
-  transformExtent
-} from '../../../src/ol/proj.js';
-import ImageLayer from '../../../src/ol/layer/Image.js';
-
-const source = new Static({
-  url: '/data/tiles/osm/5/5/12.png',
-  imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
-  projection: getProjection('EPSG:3857')
-});
-
-new Map({
-  pixelRatio: 1,
-  target: 'map',
-  layers: [new ImageLayer({
-    source: source
-  })],
-  view: new View({
-    center: [-122.416667, 37.783333],
-    zoom: 8,
-    projection: 'EPSG:4326'
-  })
-});
-
-render({
-  tolerance: 0.001
-});

rendering/cases/reproj-tile-4326/main.js

@@ -1,36 +0,0 @@
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
-import TileLayer from '../../../src/ol/layer/Tile.js';
-import {toLonLat, get} from '../../../src/ol/proj.js';
-import {createXYZ, createForProjection} from '../../../src/ol/tilegrid.js';
-
-const tileGrid = createXYZ();
-const extent = tileGrid.getTileCoordExtent([5, 5, 12]);
-const center = [(extent[0] + extent[2]) / 2, extent[1]];
-
-const source = new XYZ({
-  transition: 0,
-  minZoom: 5,
-  maxZoom: 5,
-  url: '/data/tiles/osm/{z}/{x}/{y}.png'
-});
-
-source.setTileGridForProjection(get('EPSG:4326'), createForProjection(get('EPSG:4326'), 7, [64, 64]));
-
-new Map({
-  pixelRatio: 1,
-  target: 'map',
-  layers: [
-    new TileLayer({
-      source: source
-    })
-  ],
-  view: new View({
-    projection: 'EPSG:4326',
-    center: toLonLat(center),
-    zoom: 5
-  })
-});
-
-render();

rendering/cases/reproj-tile-5070/main.js

@@ -1,41 +0,0 @@
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
-import TileLayer from '../../../src/ol/layer/Tile.js';
-import {get, transform} from '../../../src/ol/proj.js';
-import {register} from '../../../src/ol/proj/proj4.js';
-import proj4 from 'proj4';
-
-proj4.defs('EPSG:5070',
-  '+proj=aea +lat_1=29.5 +lat_2=45.5 +lat_0=23 +lon_0=-96 +x_0=0 ' +
-          '+y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
-register(proj4);
-const proj5070 = get('EPSG:5070');
-proj5070.setExtent([-6e6, 0, 4e6, 6e6]);
-
-const center4326 = [-118.125, 31.95];
-const center = transform(center4326, 'EPSG:4326', 'EPSG:5070');
-
-const source = new XYZ({
-  transition: 0,
-  minZoom: 5,
-  maxZoom: 5,
-  url: '/data/tiles/osm/{z}/{x}/{y}.png'
-});
-
-new Map({
-  pixelRatio: 1,
-  target: 'map',
-  layers: [
-    new TileLayer({
-      source: source
-    })
-  ],
-  view: new View({
-    projection: 'EPSG:5070',
-    center: center,
-    zoom: 4
-  })
-});
-
-render();

rendering/cases/reproj-tile-54009/main.js

@@ -1,40 +0,0 @@
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
-import TileLayer from '../../../src/ol/layer/Tile.js';
-import {get, transform} from '../../../src/ol/proj.js';
-import {register} from '../../../src/ol/proj/proj4.js';
-import proj4 from 'proj4';
-
-proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
-
-register(proj4);
-const proj54009 = get('ESRI:54009');
-proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);
-
-const center4326 = [-118.125, 31.95];
-const center = transform(center4326, 'EPSG:4326', 'ESRI:54009');
-
-const source = new XYZ({
-  transition: 0,
-  minZoom: 5,
-  maxZoom: 5,
-  url: '/data/tiles/osm/{z}/{x}/{y}.png'
-});
-
-new Map({
-  pixelRatio: 1,
-  target: 'map',
-  layers: [
-    new TileLayer({
-      source: source
-    })
-  ],
-  view: new View({
-    projection: 'ESRI:54009',
-    center: center,
-    zoom: 6
-  })
-});
-
-render();

rendering/cases/reproj-tile-dateline-merc/main.js

@@ -1,40 +0,0 @@
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
-import TileLayer from '../../../src/ol/layer/Tile.js';
-import {get, transform} from '../../../src/ol/proj.js';
-import {register} from '../../../src/ol/proj/proj4.js';
-import proj4 from 'proj4';
-
-proj4.defs('merc_180', '+proj=merc +lon_0=180 +units=m +no_defs');
-
-register(proj4);
-const merc = get('merc_180');
-merc.setExtent([-20026376.39, -20048966.10, 20026376.39, 20048966.10]);
-
-const center4326 = [180, 0];
-const center = transform(center4326, 'EPSG:4326', 'merc_180');
-
-const source = new XYZ({
-  projection: 'EPSG:4326',
-  minZoom: 0,
-  maxZoom: 0,
-  url: '/data/tiles/4326/{z}/{x}/{y}.png'
-});
-
-new Map({
-  pixelRatio: 1,
-  target: 'map',
-  layers: [
-    new TileLayer({
-      source: source
-    })
-  ],
-  view: new View({
-    projection: 'merc_180',
-    center: center,
-    zoom: 0
-  })
-});
-
-render();

rendering/cases/reproj-tile-none-square/main.js

@@ -1,38 +0,0 @@
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
-import TileLayer from '../../../src/ol/layer/Tile.js';
-import {toLonLat} from '../../../src/ol/proj.js';
-import {createXYZ} from '../../../src/ol/tilegrid.js';
-
-const tileGrid = createXYZ({tileSize: [512, 256]});
-const extent = tileGrid.getTileCoordExtent([5, 3, 12]);
-const center = [
-  (extent[0] + extent[2]) / 2,
-  (extent[1] + extent[3]) / 2
-];
-
-const source = new XYZ({
-  projection: 'EPSG:3857',
-  minZoom: 5,
-  maxZoom: 5,
-  url: '/data/tiles/512x256/{z}/{x}/{y}.png',
-  tileSize: [512, 256]
-});
-
-new Map({
-  pixelRatio: 1,
-  target: 'map',
-  layers: [
-    new TileLayer({
-      source: source
-    })
-  ],
-  view: new View({
-    projection: 'EPSG:4326',
-    center: toLonLat(center),
-    zoom: 5
-  })
-});
-
-render();

rendering/cases/reproj-tile-northpole/main.js

@@ -1,40 +0,0 @@
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
-import TileLayer from '../../../src/ol/layer/Tile.js';
-import {get, transform} from '../../../src/ol/proj.js';
-import {register} from '../../../src/ol/proj/proj4.js';
-import proj4 from 'proj4';
-
-proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 ' +
-          '+k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
-
-register(proj4);
-const proj3413 = get('EPSG:3413');
-proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]);
-
-const center4326 = [0, 90];
-const center = transform(center4326, 'EPSG:4326', 'EPSG:3413');
-
-const source = new XYZ({
-  maxZoom: 0,
-  projection: 'EPSG:4326',
-  url: '/data/tiles/4326/{z}/{x}/{y}.png'
-});
-
-new Map({
-  pixelRatio: 1,
-  target: 'map',
-  layers: [
-    new TileLayer({
-      source: source
-    })
-  ],
-  view: new View({
-    projection: 'EPSG:3413',
-    center: center,
-    zoom: 0
-  })
-});
-
-render();

rendering/cases/webgl-points/main.js

@@ -1,11 +1,11 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import XYZ from '../../../src/ol/source/XYZ';
-import {Vector as VectorLayer} from '../../../src/ol/layer.js';
+import {Vector as VectorLayer} from '../../../src/ol/layer';
-import VectorSource from '../../../src/ol/source/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector';
-import KML from '../../../src/ol/format/KML.js';
+import KML from '../../../src/ol/format/KML';
-import WebGLPointsLayerRenderer from '../../../src/ol/renderer/webgl/PointsLayer.js';
+import WebGLPointsLayerRenderer from '../../../src/ol/renderer/webgl/PointsLayer';
 
 class CustomLayer extends VectorLayer {
   createRenderer() {

rendering/test.js

@@ -357,7 +357,7 @@ if (require.main === module) {
     option('puppeteer-args', {
       describe: 'Additional args for Puppeteer',
       type: 'array',
-      default: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'] : []
+      default: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : []
     }).
     parse();
 

rendering/webpack.config.js

@@ -22,16 +22,5 @@ module.exports = {
   context: __dirname,
   target: 'web',
   entry: entry,
-  devtool: 'source-map',
+  devtool: 'source-map'
-  module: {
-    rules: [{
-      test: /\.js$/,
-      use: {
-        loader: path.join(__dirname, '../examples/webpack/worker-loader.js')
-      },
-      include: [
-        path.join(__dirname, '../src/ol/worker')
-      ]
-    }]
-  }
 };

site/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "tschaub/react"
+}

site/components/Class.jsx

@@ -0,0 +1,35 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Markdown from 'react-markdown';
+import Code from './Code';
+import Parameter from './Parameter';
+
+function Class({cls, module, helper}) {
+  const exportedName = module.getExportedName(cls.name);
+  let importCode;
+  if (exportedName === 'default') {
+    importCode = `import ${cls.name} from '${module.id}';`;
+  } else {
+    importCode = `import {${exportedName}} from '${module.id}';`;
+  }
+
+  return (
+    <div>
+      <h3>{cls.name}</h3>
+      <Code value={importCode} />
+      <Markdown source={cls.doc.classdesc} renderers={{code: Code}} />
+      <h6>Parameters</h6>
+      <ul>
+        {cls.doc.params && cls.doc.params.map(param => <Parameter param={param} module={module} helper={helper} />)}
+      </ul>
+    </div>
+  );
+}
+
+Class.propTypes = {
+  cls: object.isRequired,
+  module: object.isRequired,
+  helper: object.isRequired
+};
+
+export default Class;

site/components/Code.jsx

@@ -0,0 +1,26 @@
+import React, {PureComponent} from 'react';
+import {string} from 'prop-types';
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
+import {coy} from 'react-syntax-highlighter/dist/styles/prism';
+
+class Code extends PureComponent {
+  render() {
+    let language = this.props.language;
+    if (!language) {
+      language = 'js';
+    }
+
+    return (
+      <SyntaxHighlighter language={language} style={coy}>
+        {this.props.value}
+      </SyntaxHighlighter>
+    );
+  }
+}
+
+Code.propTypes = {
+  value: string.isRequired,
+  language: string
+};
+
+export default Code;

site/components/Func.jsx

@@ -0,0 +1,35 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Markdown from 'react-markdown';
+import Code from './Code';
+import Parameter from './Parameter';
+
+function Func({func, module, helper}) {
+  const exportedName = module.getExportedName(func.name);
+  let importCode;
+  if (exportedName === 'default') {
+    importCode = `import ${func.name} from '${module.id}';`;
+  } else {
+    importCode = `import {${exportedName}} from '${module.id}';`;
+  }
+
+  return (
+    <div>
+      <h3>{func.name}</h3>
+      <Code value={importCode} />
+      <Markdown source={func.doc.description} renderers={{code: Code}} />
+      <h6>Parameters</h6>
+      <ul>
+        {func.doc.params && func.doc.params.map(param => <Parameter param={param} module={module} helper={helper} />)}
+      </ul>
+    </div>
+  );
+}
+
+Func.propTypes = {
+  func: object.isRequired,
+  module: object.isRequired,
+  helper: object.isRequired
+};
+
+export default Func;

site/components/Module.jsx

@@ -0,0 +1,26 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Class from './Class';
+import Func from './Func';
+
+function Module({module, helper}) {
+  return (
+    <div>
+      <hr />
+      <h2>{module.id}</h2>
+      {module.classes.map(cls => (
+        <Class key={cls.name} cls={cls} module={module} helper={helper} />
+      ))}
+      {module.functions.map(func => (
+        <Func key={func.name} func={func} module={module} helper={helper} />
+      ))}
+    </div>
+  );
+}
+
+Module.propTypes = {
+  module: object.isRequired,
+  helper: object.isRequired
+};
+
+export default Module;

site/components/Parameter.jsx

@@ -0,0 +1,20 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Type from './Type';
+
+function Parameter({param, module, helper}) {
+  return (
+    <li>
+      <code>{param.name}</code> - {param.description} {param.optional && <span>(optional)</span>}<br/>
+      {param.type.names.map(longName => <Type longName={longName} module={module} helper={helper} />)}
+    </li>
+  );
+}
+
+Parameter.propTypes = {
+  param: object.isRequired,
+  module: object.isRequired,
+  helper: object.isRequired
+};
+
+export default Parameter;

site/components/Type.jsx

@@ -0,0 +1,27 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Parameter from './Parameter';
+
+function Type({longName, module, helper}) {
+  const type = helper.getTypeDef(longName);
+  if (!type) {
+    return <code>{longName}</code>;
+  }
+
+  return (
+    <div>
+      <code>{type.doc.type.names}</code>
+      <ul>
+        {type.doc.properties && type.doc.properties.map(prop => <Parameter param={prop} module={module} helper={helper} />)}
+      </ul>
+    </div>
+  );
+}
+
+Type.propTypes = {
+  longName: object.isRequired,
+  module: object.isRequired,
+  helper: object.isRequired
+};
+
+export default Type;

site/components/layout.js

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+import {baseSpacingPx} from '../util/typography';
+
+export const Page = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  margin: 2 * baseSpacingPx
+});