Merge pull request #13177 from tschaub/ecoregions

Use ecoregions data

examples/box-selection.css

@@ -1,4 +0,0 @@
-.ol-dragbox {
-  background-color: rgba(255,255,255,0.4);
-  border-color: rgba(100,150,0,1);
-}

examples/box-selection.html

@@ -9,4 +9,4 @@ docs: >
 tags: "DragBox, feature, selection, box"
 ---
 <div id="map" class="map"></div>
-<div id="info">No countries selected</div>
+<div>Selected regions: <span id="info">None</span></div>

examples/box-selection.js

@@ -1,23 +1,33 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 import {DragBox, Select} from '../src/ol/interaction.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
 
 const vectorSource = new VectorSource({
-  url: 'data/geojson/countries.geojson',
+  url: 'https://openlayers.org/data/vector/ecoregions.json',
   format: new GeoJSON(),
 });
 
+const style = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+});
+
 const map = new Map({
   layers: [
-    new TileLayer({
-      source: new OSM(),
-    }),
     new VectorLayer({
       source: vectorSource,
+      background: '#1a2b39',
+      style: function (feature) {
+        const color = feature.get('COLOR_BIO') || '#eeeeee';
+        style.getFill().setColor(color);
+        return style;
+      },
     }),
   ],
   target: 'map',
@@ -28,8 +38,24 @@ const map = new Map({
   }),
 });
 
+const selectedStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255, 255, 255, 0.6)',
+  }),
+  stroke: new Stroke({
+    color: 'rgba(255, 255, 255, 0.7)',
+    width: 2,
+  }),
+});
+
 // a normal select interaction to handle click
-const select = new Select();
+const select = new Select({
+  style: function (feature) {
+    const color = feature.get('COLOR_BIO') || '#eeeeee';
+    selectedStyle.getFill().setColor(color);
+    return selectedStyle;
+  },
+});
 map.addInteraction(select);
 
 const selectedFeatures = select.getFeatures();
@@ -85,11 +111,11 @@ const infoBox = document.getElementById('info');
 
 selectedFeatures.on(['add', 'remove'], function () {
   const names = selectedFeatures.getArray().map(function (feature) {
-    return feature.get('name');
+    return feature.get('ECO_NAME');
   });
   if (names.length > 0) {
     infoBox.innerHTML = names.join(', ');
   } else {
-    infoBox.innerHTML = 'No countries selected';
+    infoBox.innerHTML = 'None';
   }
 });

examples/canvas-gradient-pattern.html

@@ -1,13 +1,11 @@
 ---
 layout: example.html
 title: Styling feature with CanvasGradient or CanvasPattern
-shortdesc: Example showing the countries vector layer styled with patterns and gradients.
+shortdesc: Example showing a vector layer styled with a gradient.
 docs: >
-  This example creates a [`CanvasPattern`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern)
+  This example creates a [`CanvasGradient`](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient).
-  and a [`CanvasGradient`](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient). The countries are loaded from
+  The vector data is loaded from a file and features are filled with the gradient.
-  a GeoJSON file. A style function determines for each country whether to use a fill with the
+  The same technique can be used with a [`CanvasPattern`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern).
-  CanvasGradient (rainbow colors) or a CanvasPattern (repeating stacked circles). **Note**: For seamless repeat patterns,
-  image width and height of the pattern image must be a factor of two (2, 4, 8, ..., 512).
 tags: "canvas, gradient, pattern, style"
 ---
 <div id="map" class="map"></div>

examples/canvas-gradient-pattern.js

@@ -1,4 +1,4 @@
-import GeoJSON from '../src/ol/format/GeoJSON.js';
+import KML from '../src/ol/format/KML.js';
 import Map from '../src/ol/Map.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
@@ -7,84 +7,42 @@ import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js';
 import {Fill, Stroke, Style} from '../src/ol/style.js';
 import {fromLonLat} from '../src/ol/proj.js';
 
-const canvas = document.createElement('canvas');
-const context = canvas.getContext('2d');
-
 // Gradient and pattern are in canvas pixel space, so we adjust for the
 // renderer's pixel ratio
 const pixelRatio = DEVICE_PIXEL_RATIO;
 
 // Generate a rainbow gradient
-const gradient = (function () {
+const canvas = document.createElement('canvas');
-  const grad = context.createLinearGradient(0, 0, 512 * pixelRatio, 0);
+const context = canvas.getContext('2d');
-  grad.addColorStop(0, 'red');
+const gradient = context.createLinearGradient(0, 0, 1024 * pixelRatio, 0);
-  grad.addColorStop(1 / 6, 'orange');
+gradient.addColorStop(0, 'red');
-  grad.addColorStop(2 / 6, 'yellow');
+gradient.addColorStop(1 / 6, 'orange');
-  grad.addColorStop(3 / 6, 'green');
+gradient.addColorStop(2 / 6, 'yellow');
-  grad.addColorStop(4 / 6, 'aqua');
+gradient.addColorStop(3 / 6, 'green');
-  grad.addColorStop(5 / 6, 'blue');
+gradient.addColorStop(4 / 6, 'aqua');
-  grad.addColorStop(1, 'purple');
+gradient.addColorStop(5 / 6, 'blue');
-  return grad;
+gradient.addColorStop(1, 'purple');
-})();
 
-// Generate a canvasPattern with two circles on white background
-const pattern = (function () {
-  canvas.width = 8 * pixelRatio;
-  canvas.height = 8 * pixelRatio;
-  // white background
-  context.fillStyle = 'white';
-  context.fillRect(0, 0, canvas.width, canvas.height);
-  // outer circle
-  context.fillStyle = 'rgba(102, 0, 102, 0.5)';
-  context.beginPath();
-  context.arc(4 * pixelRatio, 4 * pixelRatio, 3 * pixelRatio, 0, 2 * Math.PI);
-  context.fill();
-  // inner circle
-  context.fillStyle = 'rgb(55, 0, 170)';
-  context.beginPath();
-  context.arc(4 * pixelRatio, 4 * pixelRatio, 1.5 * pixelRatio, 0, 2 * Math.PI);
-  context.fill();
-  return context.createPattern(canvas, 'repeat');
-})();
-
-// Generate style for gradient or pattern fill
-const fill = new Fill();
-const style = new Style({
-  fill: fill,
-  stroke: new Stroke({
-    color: '#333',
-    width: 2,
-  }),
-});
-
-/**
- * The styling function for the vector layer, will return an array of styles
- * which either contains the aboove gradient or pattern.
- *
- * @param {import("../src/ol/Feature.js").default} feature The feature to style.
- * @return {Style} The style to use for the feature.
- */
-const getStackedStyle = function (feature) {
-  const id = feature.getId();
-  fill.setColor(id > 'J' ? gradient : pattern);
-  return style;
-};
-
-// Create a vector layer that makes use of the style function above…
 const vectorLayer = new VectorLayer({
+  background: 'white',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'data/kml/states.kml',
-    format: new GeoJSON(),
+    format: new KML({extractStyles: false}),
+  }),
+  style: new Style({
+    fill: new Fill({color: gradient}),
+    stroke: new Stroke({
+      color: '#333',
+      width: 1,
+    }),
   }),
-  style: getStackedStyle,
 });
 
-// … finally create a map with that layer.
 const map = new Map({
   layers: [vectorLayer],
   target: 'map',
   view: new View({
-    center: fromLonLat([16, 48]),
+    center: fromLonLat([-100, 38.5]),
-    zoom: 3,
+    zoom: 4,
   }),
 });

examples/edit-geographic.js

@@ -1,30 +1,28 @@
 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 {Draw, Modify, Select, Snap} from '../src/ol/interaction.js';
 import {Map, View} from '../src/ol/index.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {useGeographic} from '../src/ol/proj.js';
 
 useGeographic();
 
 const source = new VectorSource({
-  url: 'data/geojson/countries.geojson',
+  url: 'https://openlayers.org/data/vector/us-states.json',
   format: new GeoJSON(),
 });
 
 const map = new Map({
   target: 'map',
   layers: [
-    new TileLayer({
-      source: new OSM(),
-    }),
     new VectorLayer({
+      background: 'white',
       source: source,
     }),
   ],
   view: new View({
-    center: [0, 0],
+    center: [-100, 38.5],
-    zoom: 2,
+    zoom: 4,
   }),
 });
 

examples/export-map.js

@@ -2,28 +2,33 @@ import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import {Fill, Stroke, Style} from '../src/ol/style.js';
+import {Fill, Style} from '../src/ol/style.js';
 import {
   Heatmap as HeatmapLayer,
   Vector as VectorLayer,
 } from '../src/ol/layer.js';
+import {asArray} from '../src/ol/color.js';
+
+const style = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+});
 
 const map = new Map({
   layers: [
     new VectorLayer({
-      background: '#a9d3df',
       source: new VectorSource({
-        url: 'data/geojson/countries.geojson',
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
         format: new GeoJSON(),
       }),
-      style: new Style({
+      background: 'white',
-        stroke: new Stroke({
+      style: function (feature) {
-          color: '#ccc',
+        const color = asArray(feature.get('COLOR_NNH') || '#eeeeee');
-        }),
+        color[3] = 0.75;
-        fill: new Fill({
+        style.getFill().setColor(color);
-          color: 'white',
+        return style;
-        }),
+      },
-      }),
     }),
     new HeatmapLayer({
       source: new VectorSource({
@@ -35,7 +40,7 @@ const map = new Map({
       },
       radius: 15,
       blur: 15,
-      opacity: 0.5,
+      opacity: 0.75,
     }),
   ],
   target: 'map',
@@ -56,15 +61,16 @@ document.getElementById('export-png').addEventListener('click', function () {
       map.getViewport().querySelectorAll('.ol-layer canvas, canvas.ol-layer'),
       function (canvas) {
         if (canvas.width > 0) {
+          const opacity =
+            canvas.parentNode.style.opacity || canvas.style.opacity;
+          mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
+
           const backgroundColor = canvas.parentNode.style.backgroundColor;
           if (backgroundColor) {
             mapContext.fillStyle = backgroundColor;
             mapContext.fillRect(0, 0, canvas.width, canvas.height);
           }
 
-          const opacity =
-            canvas.parentNode.style.opacity || canvas.style.opacity;
-          mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
           let matrix;
           const transform = canvas.style.transform;
           if (transform) {

examples/extent-interaction.js

@@ -1,24 +1,15 @@
 import ExtentInteraction from '../src/ol/interaction/Extent.js';
-import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/Tile.js';
 import View from '../src/ol/View.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {shiftKeyOnly} from '../src/ol/events/condition.js';
 
-const vectorSource = new VectorSource({
-  url: 'data/geojson/countries.geojson',
-  format: new GeoJSON(),
-});
-
 const map = new Map({
   layers: [
     new TileLayer({
       source: new OSM(),
     }),
-    new VectorLayer({
-      source: vectorSource,
-    }),
   ],
   target: 'map',
   view: new View({

examples/geojson-vt.js

@@ -1,60 +1,67 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
-import OSM from '../src/ol/source/OSM.js';
 import Projection from '../src/ol/proj/Projection.js';
+import VectorTileLayer from '../src/ol/layer/VectorTile.js';
 import VectorTileSource from '../src/ol/source/VectorTile.js';
 import View from '../src/ol/View.js';
-import {
+import {Fill, Style} from '../src/ol/style.js';
-  Tile as TileLayer,
-  VectorTile as VectorTileLayer,
-} from '../src/ol/layer.js';
 
 // Converts geojson-vt data to GeoJSON
 const replacer = function (key, value) {
-  if (value.geometry) {
+  if (!value || !value.geometry) {
-    let type;
-    const rawType = value.type;
-    let geometry = value.geometry;
-
-    if (rawType === 1) {
-      type = 'MultiPoint';
-      if (geometry.length == 1) {
-        type = 'Point';
-        geometry = geometry[0];
-      }
-    } else if (rawType === 2) {
-      type = 'MultiLineString';
-      if (geometry.length == 1) {
-        type = 'LineString';
-        geometry = geometry[0];
-      }
-    } else if (rawType === 3) {
-      type = 'Polygon';
-      if (geometry.length > 1) {
-        type = 'MultiPolygon';
-        geometry = [geometry];
-      }
-    }
-
-    return {
-      'type': 'Feature',
-      'geometry': {
-        'type': type,
-        'coordinates': geometry,
-      },
-      'properties': value.tags,
-    };
-  } else {
     return value;
   }
+
+  let type;
+  const rawType = value.type;
+  let geometry = value.geometry;
+  if (rawType === 1) {
+    type = 'MultiPoint';
+    if (geometry.length == 1) {
+      type = 'Point';
+      geometry = geometry[0];
+    }
+  } else if (rawType === 2) {
+    type = 'MultiLineString';
+    if (geometry.length == 1) {
+      type = 'LineString';
+      geometry = geometry[0];
+    }
+  } else if (rawType === 3) {
+    type = 'Polygon';
+    if (geometry.length > 1) {
+      type = 'MultiPolygon';
+      geometry = [geometry];
+    }
+  }
+
+  return {
+    'type': 'Feature',
+    'geometry': {
+      'type': type,
+      'coordinates': geometry,
+    },
+    'properties': value.tags,
+  };
 };
 
+const style = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+});
+
+const layer = new VectorTileLayer({
+  background: '#1a2b39',
+  style: function (feature) {
+    const color = feature.get('COLOR') || '#eeeeee';
+    style.getFill().setColor(color);
+    return style;
+  },
+});
+
 const map = new Map({
-  layers: [
+  layers: [layer],
-    new TileLayer({
-      source: new OSM(),
-    }),
-  ],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -62,7 +69,7 @@ const map = new Map({
   }),
 });
 
-const url = 'data/geojson/countries.geojson';
+const url = 'https://openlayers.org/data/vector/ecoregions.json';
 fetch(url)
   .then(function (response) {
     return response.json();
@@ -106,8 +113,5 @@ fetch(url)
         tile.setFeatures(features);
       },
     });
-    const vectorLayer = new VectorTileLayer({
+    layer.setSource(vectorSource);
-      source: vectorSource,
-    });
-    map.addLayer(vectorLayer);
   });

examples/hitdetect-vector.html

@@ -1,12 +1,12 @@
 ---
 layout: example.html
 title: Vector Layer Hit Detection
-shortdesc: Example of hit detection on a countries vector layer with country information.
+shortdesc: Example of hit detection on an ecoregions vector layer with protection status.
 docs: >
-  The countries are loaded from a GeoJSON file. Information about countries is
+  The ecoregions are loaded from a GeoJSON file. Information about features is
-  on hover and click is retrieved using the layer's `getFeatures()` method. For
+  retrieved using the layer's `getFeatures()` method on hover and click. For
   vector layers, this function resolves with an array of only the topmost
-  feature. It uses a very efficient hit detection algorithm, at the cost of
+  feature. It uses an efficient hit detection algorithm, at the cost of
   accuracy. For pixel exact hit detection, when performance is not a concern,
   use the map's `getFeaturesAtPixel()` or `forEachFeatureAtPixel()` methods.
 tags: "vector, geojson, click, hover, hit detection"

examples/hitdetect-vector.js

@@ -3,35 +3,23 @@ import Map from '../src/ol/Map.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 
 const style = new Style({
   fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)',
+    color: '#eeeeee',
-  }),
-  stroke: new Stroke({
-    color: '#319FD3',
-    width: 1,
-  }),
-  text: new Text({
-    font: '12px Calibri,sans-serif',
-    fill: new Fill({
-      color: '#000',
-    }),
-    stroke: new Stroke({
-      color: '#fff',
-      width: 3,
-    }),
   }),
 });
 
 const vectorLayer = new VectorLayer({
+  background: '#1a2b39',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/ecoregions.json',
     format: new GeoJSON(),
   }),
   style: function (feature) {
-    style.getText().setText(feature.get('name'));
+    const color = feature.get('COLOR_NNH') || '#eeeeee';
+    style.getFill().setColor(color);
     return style;
   },
 });
@@ -47,31 +35,15 @@ const map = new Map({
 
 const highlightStyle = new Style({
   stroke: new Stroke({
-    color: '#f00',
+    color: 'rgba(255, 255, 255, 0.7)',
-    width: 1,
+    width: 2,
-  }),
-  fill: new Fill({
-    color: 'rgba(255,0,0,0.1)',
-  }),
-  text: new Text({
-    font: '12px Calibri,sans-serif',
-    fill: new Fill({
-      color: '#000',
-    }),
-    stroke: new Stroke({
-      color: '#f00',
-      width: 3,
-    }),
   }),
 });
 
 const featureOverlay = new VectorLayer({
   source: new VectorSource(),
   map: map,
-  style: function (feature) {
+  style: highlightStyle,
-    highlightStyle.getText().setText(feature.get('name'));
-    return highlightStyle;
-  },
 });
 
 let highlight;
@@ -80,7 +52,7 @@ const displayFeatureInfo = function (pixel) {
     const feature = features.length ? features[0] : undefined;
     const info = document.getElementById('info');
     if (features.length) {
-      info.innerHTML = feature.getId() + ': ' + feature.get('name');
+      info.innerHTML = feature.get('ECO_NAME') + ': ' + feature.get('NNH_NAME');
     } else {
       info.innerHTML = ' ';
     }

examples/image-vector-layer.js

@@ -4,33 +4,30 @@ import VectorImageLayer from '../src/ol/layer/VectorImage.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 
 const style = new Style({
   fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)',
+    color: '#eeeeee',
   }),
-  stroke: new Stroke({
+});
-    color: '#319FD3',
+
-    width: 1,
+const vectorLayer = new VectorImageLayer({
+  background: '#1a2b39',
+  imageRatio: 2,
+  source: new VectorSource({
+    url: 'https://openlayers.org/data/vector/ecoregions.json',
+    format: new GeoJSON(),
   }),
-  text: new Text(),
+  style: function (feature) {
+    const color = feature.get('COLOR') || '#eeeeee';
+    style.getFill().setColor(color);
+    return style;
+  },
 });
 
 const map = new Map({
-  layers: [
+  layers: [vectorLayer],
-    new VectorImageLayer({
-      imageRatio: 2,
-      source: new VectorSource({
-        url: 'data/geojson/countries.geojson',
-        format: new GeoJSON(),
-      }),
-      style: function (feature) {
-        style.getText().setText(feature.get('name'));
-        return style;
-      },
-    }),
-  ],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -43,47 +40,42 @@ const featureOverlay = new VectorLayer({
   map: map,
   style: new Style({
     stroke: new Stroke({
-      color: '#f00',
+      color: 'rgba(255, 255, 255, 0.7)',
-      width: 1,
+      width: 2,
-    }),
-    fill: new Fill({
-      color: 'rgba(255,0,0,0.1)',
     }),
   }),
 });
 
 let highlight;
 const displayFeatureInfo = function (pixel) {
-  map
+  const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
-    .getLayers()
+    return feature;
-    .item(0)
+  });
-    .getFeatures(pixel)
-    .then(function (features) {
-      const feature = features.length > 0 ? features[0] : undefined;
 
-      const info = document.getElementById('info');
+  const info = document.getElementById('info');
-      if (feature) {
+  if (feature) {
-        info.innerHTML = feature.getId() + ': ' + feature.get('name');
+    info.innerHTML = feature.get('ECO_NAME') || ' ';
-      } else {
+  } else {
-        info.innerHTML = ' ';
+    info.innerHTML = ' ';
-      }
+  }
 
-      if (feature !== highlight) {
+  if (feature !== highlight) {
-        if (highlight) {
+    if (highlight) {
-          featureOverlay.getSource().removeFeature(highlight);
+      featureOverlay.getSource().removeFeature(highlight);
-        }
+    }
-        if (feature) {
+    if (feature) {
-          featureOverlay.getSource().addFeature(feature);
+      featureOverlay.getSource().addFeature(feature);
-        }
+    }
-        highlight = feature;
+    highlight = feature;
-      }
+  }
-    });
 };
 
 map.on('pointermove', function (evt) {
-  if (!evt.dragging) {
+  if (evt.dragging) {
-    displayFeatureInfo(evt.pixel);
+    return;
   }
+  const pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
 });
 
 map.on('click', function (evt) {

examples/mapbox-layer.js

@@ -1,11 +1,10 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
+import HeatmapLayer from '../src/ol/layer/Heatmap.js';
 import Layer from '../src/ol/layer/Layer.js';
 import Map from '../src/ol/Map.js';
 import Source from '../src/ol/source/Source.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import {Stroke, Style} from '../src/ol/style.js';
 import {fromLonLat, toLonLat} from '../src/ol/proj.js';
 
 const center = [-98.8, 37.9];
@@ -34,6 +33,7 @@ const mbLayer = new Layer({
 
     const visible = mbLayer.getVisible();
     canvas.style.display = visible ? 'block' : 'none';
+    canvas.style.position = 'absolute';
 
     const opacity = mbLayer.getOpacity();
     canvas.style.opacity = opacity;
@@ -66,19 +66,16 @@ const mbLayer = new Layer({
   }),
 });
 
-const style = new Style({
+const cities = new HeatmapLayer({
-  stroke: new Stroke({
-    color: '#319FD3',
-    width: 2,
-  }),
-});
-
-const vectorLayer = new VectorLayer({
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'data/geojson/world-cities.geojson',
     format: new GeoJSON(),
   }),
-  style: style,
+  weight: function (feature) {
+    return feature.get('population') / 1e7;
+  },
+  radius: 15,
+  blur: 15,
 });
 
 const map = new Map({
@@ -87,5 +84,5 @@ const map = new Map({
     center: fromLonLat(center),
     zoom: 4,
   }),
-  layers: [mbLayer, vectorLayer],
+  layers: [mbLayer, cities],
 });

examples/modify-features.js

@@ -1,21 +1,19 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 import {
   Modify,
   Select,
   defaults as defaultInteractions,
 } from '../src/ol/interaction.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {fromLonLat} from '../src/ol/proj.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-
-const raster = new TileLayer({
-  source: new OSM(),
-});
 
 const vector = new VectorLayer({
+  background: 'white',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/us-states.json',
     format: new GeoJSON(),
     wrapX: false,
   }),
@@ -31,10 +29,10 @@ const modify = new Modify({
 
 const map = new Map({
   interactions: defaultInteractions().extend([select, modify]),
-  layers: [raster, vector],
+  layers: [vector],
   target: 'map',
   view: new View({
-    center: [0, 0],
+    center: fromLonLat([-100, 38.5]),
-    zoom: 2,
+    zoom: 4,
   }),
 });

examples/select-features.js

@@ -1,25 +1,33 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
-import OSM from '../src/ol/source/OSM.js';
 import Select from '../src/ol/interaction/Select.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 import {altKeyOnly, click, pointerMove} from '../src/ol/events/condition.js';
 
-const raster = new TileLayer({
+const style = new Style({
-  source: new OSM(),
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
 });
 
 const vector = new VectorLayer({
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/ecoregions.json',
     format: new GeoJSON(),
   }),
+  background: 'white',
+  style: function (feature) {
+    const color = feature.get('COLOR') || '#eeeeee';
+    style.getFill().setColor(color);
+    return style;
+  },
 });
 
 const map = new Map({
-  layers: [raster, vector],
+  layers: [vector],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -29,20 +37,39 @@ const map = new Map({
 
 let select = null; // ref to currently selected interaction
 
+const selected = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+  stroke: new Stroke({
+    color: 'rgba(255, 255, 255, 0.7)',
+    width: 2,
+  }),
+});
+
+function selectStyle(feature) {
+  const color = feature.get('COLOR') || '#eeeeee';
+  selected.getFill().setColor(color);
+  return selected;
+}
+
 // select interaction working on "singleclick"
-const selectSingleClick = new Select();
+const selectSingleClick = new Select({style: selectStyle});
 
 // select interaction working on "click"
 const selectClick = new Select({
   condition: click,
+  style: selectStyle,
 });
 
 // select interaction working on "pointermove"
 const selectPointerMove = new Select({
   condition: pointerMove,
+  style: selectStyle,
 });
 
 const selectAltClick = new Select({
+  style: selectStyle,
   condition: function (mapBrowserEvent) {
     return click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent);
   },

examples/select-hover-features.html

@@ -7,4 +7,4 @@ docs: >
 tags: "select, vector"
 ---
 <div id="map" class="map"></div>
-<span id="status"></span>
+<span id="status">&nbsp;</span>

examples/select-hover-features.js

@@ -1,36 +1,33 @@
 import Fill from '../src/ol/style/Fill.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
-import OSM from '../src/ol/source/OSM.js';
 import Stroke from '../src/ol/style/Stroke.js';
 import Style from '../src/ol/style/Style.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
-const raster = new TileLayer({
+const style = new Style({
-  source: new OSM(),
-});
-
-const highlightStyle = new Style({
   fill: new Fill({
-    color: 'rgba(255,255,255,0.7)',
+    color: '#eeeeee',
-  }),
-  stroke: new Stroke({
-    color: '#3399CC',
-    width: 3,
   }),
 });
 
 const vector = new VectorLayer({
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/ecoregions.json',
     format: new GeoJSON(),
   }),
+  background: 'white',
+  style: function (feature) {
+    const color = feature.get('COLOR') || '#eeeeee';
+    style.getFill().setColor(color);
+    return style;
+  },
 });
 
 const map = new Map({
-  layers: [raster, vector],
+  layers: [vector],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -38,9 +35,19 @@ const map = new Map({
   }),
 });
 
-let selected = null;
+const selectStyle = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+  stroke: new Stroke({
+    color: 'rgba(255, 255, 255, 0.7)',
+    width: 2,
+  }),
+});
+
 const status = document.getElementById('status');
 
+let selected = null;
 map.on('pointermove', function (e) {
   if (selected !== null) {
     selected.setStyle(undefined);
@@ -49,12 +56,13 @@ map.on('pointermove', function (e) {
 
   map.forEachFeatureAtPixel(e.pixel, function (f) {
     selected = f;
-    f.setStyle(highlightStyle);
+    selectStyle.getFill().setColor(f.get('COLOR') || '#eeeeee');
+    f.setStyle(selectStyle);
     return true;
   });
 
   if (selected) {
-    status.innerHTML = ' Hovering: ' + selected.get('name');
+    status.innerHTML = selected.get('ECO_NAME');
   } else {
     status.innerHTML = ' ';
   }

examples/select-multiple-features.js

@@ -1,40 +1,37 @@
 import Fill from '../src/ol/style/Fill.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
-import OSM from '../src/ol/source/OSM.js';
 import Stroke from '../src/ol/style/Stroke.js';
 import Style from '../src/ol/style/Style.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {fromLonLat} from '../src/ol/proj.js';
-
-const raster = new TileLayer({
-  source: new OSM(),
-});
 
 const highlightStyle = new Style({
   fill: new Fill({
-    color: 'rgba(255,255,255,0.7)',
+    color: '#EEE',
   }),
   stroke: new Stroke({
     color: '#3399CC',
-    width: 3,
+    width: 2,
   }),
 });
 
 const vector = new VectorLayer({
+  background: 'white',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/us-states.json',
     format: new GeoJSON(),
   }),
 });
 
 const map = new Map({
-  layers: [raster, vector],
+  layers: [vector],
   target: 'map',
   view: new View({
-    center: [0, 0],
+    center: fromLonLat([-100, 38.5]),
-    zoom: 2,
+    zoom: 4,
     multiWorld: true,
   }),
 });

examples/sphere-mollweide.js

@@ -6,6 +6,7 @@ import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 import proj4 from 'proj4';
+import {Fill, Style} from '../src/ol/style.js';
 import {register} from '../src/ol/proj/proj4.js';
 
 proj4.defs(
@@ -26,14 +27,25 @@ const sphereMollweideProjection = new Projection({
   worldExtent: [-179, -89.99, 179, 89.99],
 });
 
+const style = new Style({
+  fill: new Fill({
+    color: '#eeeeee',
+  }),
+});
+
 const map = new Map({
   keyboardEventTarget: document,
   layers: [
     new VectorLayer({
       source: new VectorSource({
-        url: 'data/geojson/countries-110m.geojson',
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
         format: new GeoJSON(),
       }),
+      style: function (feature) {
+        const color = feature.get('COLOR_BIO') || '#eeeeee';
+        style.getFill().setColor(color);
+        return style;
+      },
     }),
     new Graticule(),
   ],
@@ -41,6 +53,6 @@ const map = new Map({
   view: new View({
     center: [0, 0],
     projection: sphereMollweideProjection,
-    zoom: 1,
+    zoom: 2,
   }),
 });

examples/translate-features.js

@@ -1,6 +1,6 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
-import OSM from '../src/ol/source/OSM.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 import {
@@ -8,15 +8,12 @@ import {
   Translate,
   defaults as defaultInteractions,
 } from '../src/ol/interaction.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {fromLonLat} from '../src/ol/proj.js';
-
-const raster = new TileLayer({
-  source: new OSM(),
-});
 
 const vector = new VectorLayer({
+  background: 'white',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/us-states.json',
     format: new GeoJSON(),
   }),
 });
@@ -29,10 +26,10 @@ const translate = new Translate({
 
 const map = new Map({
   interactions: defaultInteractions().extend([select, translate]),
-  layers: [raster, vector],
+  layers: [vector],
   target: 'map',
   view: new View({
-    center: [0, 0],
+    center: fromLonLat([-100, 38.5]),
-    zoom: 2,
+    zoom: 4,
   }),
 });

examples/vector-label-decluttering.js

@@ -4,12 +4,13 @@ import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
+import {fromLonLat} from '../src/ol/proj.js';
 
 const map = new Map({
   target: 'map',
   view: new View({
-    center: [0, 0],
+    center: fromLonLat([-100, 38.5]),
-    zoom: 1,
+    zoom: 4,
   }),
 });
 
@@ -38,12 +39,14 @@ const countryStyle = new Style({
 const style = [countryStyle, labelStyle];
 
 const vectorLayer = new VectorLayer({
+  background: 'white',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/us-states.json',
     format: new GeoJSON(),
   }),
   style: function (feature) {
-    labelStyle.getText().setText(feature.get('name'));
+    const label = feature.get('name').split(' ').join('\n');
+    labelStyle.getText().setText(label);
     return style;
   },
   declutter: true,

examples/vector-layer.js

@@ -3,35 +3,23 @@ import Map from '../src/ol/Map.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 
 const style = new Style({
   fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)',
+    color: '#eeeeee',
-  }),
-  stroke: new Stroke({
-    color: '#319FD3',
-    width: 1,
-  }),
-  text: new Text({
-    font: '12px Calibri,sans-serif',
-    fill: new Fill({
-      color: '#000',
-    }),
-    stroke: new Stroke({
-      color: '#fff',
-      width: 3,
-    }),
   }),
 });
 
 const vectorLayer = new VectorLayer({
+  background: '#1a2b39',
   source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
+    url: 'https://openlayers.org/data/vector/ecoregions.json',
     format: new GeoJSON(),
   }),
   style: function (feature) {
-    style.getText().setText(feature.get('name'));
+    const color = feature.get('COLOR') || '#eeeeee';
+    style.getFill().setColor(color);
     return style;
   },
 });
@@ -45,33 +33,15 @@ const map = new Map({
   }),
 });
 
-const highlightStyle = new Style({
-  stroke: new Stroke({
-    color: '#f00',
-    width: 1,
-  }),
-  fill: new Fill({
-    color: 'rgba(255,0,0,0.1)',
-  }),
-  text: new Text({
-    font: '12px Calibri,sans-serif',
-    fill: new Fill({
-      color: '#000',
-    }),
-    stroke: new Stroke({
-      color: '#f00',
-      width: 3,
-    }),
-  }),
-});
-
 const featureOverlay = new VectorLayer({
   source: new VectorSource(),
   map: map,
-  style: function (feature) {
+  style: new Style({
-    highlightStyle.getText().setText(feature.get('name'));
+    stroke: new Stroke({
-    return highlightStyle;
+      color: 'rgba(255, 255, 255, 0.7)',
-  },
+      width: 2,
+    }),
+  }),
 });
 
 let highlight;
@@ -82,7 +52,7 @@ const displayFeatureInfo = function (pixel) {
 
   const info = document.getElementById('info');
   if (feature) {
-    info.innerHTML = feature.getId() + ': ' + feature.get('name');
+    info.innerHTML = feature.get('ECO_NAME') || ' ';
   } else {
     info.innerHTML = ' ';
   }