Move new examples to site/src/examples

site/gatsby-config.js

@@ -14,7 +14,7 @@ module.exports = {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'examples',
-        path: path.join(__dirname, '..', 'new-examples')
+        path: path.join(__dirname, 'src', 'examples')
       }
     },
     {

site/plugins/examples/gatsby-node.js

@@ -181,7 +181,7 @@ exports.createPages = async (
         frontmatter: markdownNode.frontmatter,
         embedUrl: `/${embedDirName}/${embedName}`,
         html: markdownNode.html,
-        js: source.replace(/'\.\.\/src\/(.*?)\.js/g, "'$1"),
+        js: source.replace(/'\.\.\/\.\.\/\.\.\/src\/(.*?)\.js/g, "'$1"),
         css: exampleCss
       }
     });

site/src/examples/.eslintrc

@@ -0,0 +1,10 @@
+{
+  "rules": {
+    "no-unused-vars": [
+      "error",
+      {
+        "varsIgnorePattern": "^map"
+      }
+    ]
+  }
+}

site/src/examples/layers.js

@@ -0,0 +1,39 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import GeoJSON from '../../../src/ol/format/GeoJSON.js';
+import {
+  Tile as TileLayer,
+  Vector as VectorLayer
+} from '../../../src/ol/layer.js';
+import {BingMaps, Vector as VectorSource} from '../../../src/ol/source.js';
+import {Style, Stroke} from '../../../src/ol/style.js';
+
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new BingMaps({
+        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+        imagerySet: 'Aerial'
+      })
+    }),
+    new VectorLayer({
+      source: new VectorSource({
+        format: new GeoJSON(),
+        url:
+          'https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json'
+      }),
+      opacity: 0.5,
+      style: new Style({
+        stroke: new Stroke({
+          width: 1.25,
+          color: 'lightgrey'
+        })
+      })
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});

site/src/examples/layers.md

@@ -0,0 +1,10 @@
+---
+title: Multiple Layers
+shortdesc: Using layers to compose a map.
+docs: >
+  Layers control how data is rendered on a map.  In this example, a `Vector` layer displays GeoJSON over tiles from a `Tile` layer.
+cloak:
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+---
+<div id="map"></div>

site/src/examples/map.js

@@ -0,0 +1,17 @@
+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';
+
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 1
+  })
+});

site/src/examples/map.md

@@ -0,0 +1,7 @@
+---
+title: My First Map
+shortdesc: Example of a map with a single layer.
+docs: >
+  A map with an OSM source.
+---
+<div id="map"></div>