Accept an object literal for static layer styling

examples/canvas-gradient-pattern.js

@@ -4,7 +4,6 @@ import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 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';
 
 // Gradient and pattern are in canvas pixel space, so we adjust for the
@@ -29,13 +28,11 @@ const vectorLayer = new VectorLayer({
     url: 'data/kml/states.kml',
     format: new KML({extractStyles: false}),
   }),
-  style: new Style({
-    fill: new Fill({color: gradient}),
-    stroke: new Stroke({
-      color: '#333',
-      width: 1,
-    }),
-  }),
+  style: {
+    'fill-color': gradient,
+    'stroke-width': 1,
+    'stroke-color': '#333',
+  },
 });
 
 const map = new Map({

examples/center.js

@@ -1,38 +1,27 @@
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
-/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
 const source = new VectorSource({
   url: 'data/geojson/switzerland.geojson',
   format: new GeoJSON(),
 });
-const style = new Style({
-  fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)',
-  }),
-  stroke: new Stroke({
-    color: '#319FD3',
-    width: 1,
-  }),
-  image: new CircleStyle({
-    radius: 5,
-    fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.6)',
-    }),
-    stroke: new Stroke({
-      color: '#319FD3',
-      width: 1,
-    }),
-  }),
-});
+
 const vectorLayer = new VectorLayer({
   source: source,
-  style: style,
+  style: {
+    'fill-color': 'rgba(255, 255, 255, 0.6)',
+    'stroke-width': 1,
+    'stroke-color': '#319FD3',
+    'circle-radius': 5,
+    'circle-fill-color': 'rgba(255, 255, 255, 0.6)',
+    'circle-stroke-width': 1,
+    'circle-stroke-color': '#319FD3',
+  },
 });
+
 const view = new View({
   center: [0, 0],
   zoom: 1,

examples/custom-interactions.js

@@ -1,7 +1,6 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
 import {LineString, Point, Polygon} from '../src/ol/geom.js';
 import {
   Pointer as PointerInteraction,
@@ -147,22 +146,16 @@ const map = new Map({
       source: new VectorSource({
         features: [pointFeature, lineFeature, polygonFeature],
       }),
-      style: new Style({
-        image: new Icon({
-          anchor: [0.5, 46],
-          anchorXUnits: 'fraction',
-          anchorYUnits: 'pixels',
-          opacity: 0.95,
-          src: 'data/icon.png',
-        }),
-        stroke: new Stroke({
-          width: 3,
-          color: [255, 0, 0, 1],
-        }),
-        fill: new Fill({
-          color: [0, 0, 255, 0.6],
-        }),
-      }),
+      style: {
+        'icon-src': 'data/icon.png',
+        'icon-opacity': 0.95,
+        'icon-anchor': [0.5, 46],
+        'icon-anchor-x-units': 'fraction',
+        'icon-anchor-y-units': 'pixels',
+        'stroke-width': 3,
+        'stroke-color': [255, 0, 0, 1],
+        'fill-color': [0, 0, 255, 0.6],
+      },
     }),
   ],
   target: 'map',

examples/draw-and-modify-features.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 import {Draw, Modify, Snap} from '../src/ol/interaction.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -13,21 +12,13 @@ const raster = new TileLayer({
 const source = new VectorSource();
 const vector = new VectorLayer({
   source: source,
-  style: new Style({
-    fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.2)',
-    }),
-    stroke: new Stroke({
-      color: '#ffcc33',
-      width: 2,
-    }),
-    image: new CircleStyle({
-      radius: 7,
-      fill: new Fill({
-        color: '#ffcc33',
-      }),
-    }),
-  }),
+  style: {
+    'fill-color': 'rgba(255, 255, 255, 0.2)',
+    'stroke-color': '#ffcc33',
+    'stroke-width': 2,
+    'circle-radius': 7,
+    'circle-fill-color': '#ffcc33',
+  },
 });
 
 // Limit multi-world panning to one world east and west of the real world.

examples/geographic.js

@@ -1,4 +1,3 @@
-import {Circle, Fill, Style} from '../src/ol/style.js';
 import {Feature, Map, Overlay, View} from '../src/ol/index.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Point} from '../src/ol/geom.js';
@@ -25,12 +24,10 @@ const map = new Map({
       source: new VectorSource({
         features: [new Feature(point)],
       }),
-      style: new Style({
-        image: new Circle({
-          radius: 9,
-          fill: new Fill({color: 'red'}),
-        }),
-      }),
+      style: {
+        'circle-radius': 9,
+        'circle-fill-color': 'red',
+      },
     }),
   ],
 });

examples/measure.js

@@ -17,21 +17,13 @@ const source = new VectorSource();
 
 const vector = new VectorLayer({
   source: source,
-  style: new Style({
-    fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.2)',
-    }),
-    stroke: new Stroke({
-      color: '#ffcc33',
-      width: 2,
-    }),
-    image: new CircleStyle({
-      radius: 7,
-      fill: new Fill({
-        color: '#ffcc33',
-      }),
-    }),
-  }),
+  style: {
+    'fill-color': 'rgba(255, 255, 255, 0.2)',
+    'stroke-color': '#ffcc33',
+    'stroke-width': 2,
+    'circle-radius': 7,
+    'circle-fill-color': '#ffcc33',
+  },
 });
 
 /**

examples/snap.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 import {Draw, Modify, Select, Snap} from '../src/ol/interaction.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -11,21 +10,13 @@ const raster = new TileLayer({
 
 const vector = new VectorLayer({
   source: new VectorSource(),
-  style: new Style({
-    fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.2)',
-    }),
-    stroke: new Stroke({
-      color: '#ffcc33',
-      width: 2,
-    }),
-    image: new CircleStyle({
-      radius: 7,
-      fill: new Fill({
-        color: '#ffcc33',
-      }),
-    }),
-  }),
+  style: {
+    'fill-color': 'rgba(255, 255, 255, 0.2)',
+    'stroke-color': '#ffcc33',
+    'stroke-width': 2,
+    'circle-radius': 7,
+    'circle-fill-color': '#ffcc33',
+  },
 });
 
 const map = new Map({

examples/vector-wfs.js

@@ -3,7 +3,6 @@ import Map from '../src/ol/Map.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
-import {Stroke, Style} from '../src/ol/style.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {bbox as bboxStrategy} from '../src/ol/loadingstrategy.js';
 
@@ -24,12 +23,11 @@ const vectorSource = new VectorSource({
 
 const vector = new VectorLayer({
   source: vectorSource,
-  style: new Style({
-    stroke: new Stroke({
-      color: 'rgba(0, 0, 255, 1.0)',
-      width: 2,
-    }),
-  }),
+  style: {
+    'stroke-width': 0.75,
+    'stroke-color': 'white',
+    'fill-color': 'rgba(100,100,100,0.25)',
+  },
 });
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';