Update geojson-vt example

examples/box-selection.css

@@ -1,3 +0,0 @@
-#map {
-  background: #1a2b39;
-}

examples/box-selection.js

@@ -22,6 +22,7 @@ const map = new Map({
   layers: [
     new VectorLayer({
       source: vectorSource,
+      background: '#1a2b39',
       style: function (feature) {
         const color = feature.get('COLOR_BIO') || '#eeeeee';
         style.getFill().setColor(color);

examples/geojson-vt.js

@@ -1,21 +1,20 @@
 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 {
-  Tile as TileLayer,
-  VectorTile as VectorTileLayer,
-} from '../src/ol/layer.js';
+import {Fill, Style} from '../src/ol/style.js';
 
 // Converts geojson-vt data to GeoJSON
 const replacer = function (key, value) {
-  if (value.geometry) {
+  if (!value || !value.geometry) {
+    return value;
+  }
+
   let type;
   const rawType = value.type;
   let geometry = value.geometry;
-
   if (rawType === 1) {
     type = 'MultiPoint';
     if (geometry.length == 1) {
@@ -44,17 +43,25 @@ const replacer = function (key, value) {
     },
     'properties': value.tags,
   };
-  } else {
-    return value;
-  }
 };
 
-const map = new Map({
-  layers: [
-    new TileLayer({
-      source: new OSM(),
+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: [layer],
   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({
-      source: vectorSource,
-    });
-    map.addLayer(vectorLayer);
+    layer.setSource(vectorSource);
   });

examples/vector-layer.css

@@ -1,3 +0,0 @@
-#map {
-  background: #1a2b39;
-}

examples/vector-layer.js

@@ -12,6 +12,7 @@ const style = new Style({
 });
 
 const vectorLayer = new VectorLayer({
+  background: '#1a2b39',
   source: new VectorSource({
     url: 'https://openlayers.org/data/vector/ecoregions.json',
     format: new GeoJSON(),