Fix ol9 regularshape

.prettierignore

@@ -1,3 +1,3 @@
 package.json
 bs-config.js
-docs/*
+docs/assets/sldreader.js

docs/_includes/head_custom.html

@@ -1,7 +1,13 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" type="text/css">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/codemirror.min.css" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/codemirror.min.css" >
+
+{% if page.custom_css %}
+<link rel="stylesheet" href="{{ page.custom_css }}">
+{% endif %}
+
 <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.3/core.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
+
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
 
 <script src="assets/sldreader.js"></script>
 

docs/api.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: API
-nav_order: 5
+nav_order: 999
 ---
 
 # Basic usage

docs/assets/mark-gallery.css

@@ -0,0 +1,25 @@
+#mark-gallery {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.mark-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #5c5962;
+  max-width: 92px;
+  margin: 1rem;
+}
+
+.mark-card .mark-box {
+  width: 92px;
+  height: 92px;
+}
+
+.mark-card .mark-title {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0.5rem;
+  font-size: 10;
+  font-family: monospace;
+}

docs/assets/mark-gallery.js

@@ -0,0 +1,132 @@
+/* global ol SLDReader */
+const BOX_WIDTH = 92; // px
+const BOX_HEIGHT = 92; // px
+
+let styleFunction = null; // Style that maps a feature with a wellknownname property to a mark symbolizer.
+
+// prettier-ignore
+const wellknownnames = [
+  'circle', 'triangle', 'star', 'cross', 'hexagon', 'octagon',
+  'cross2', 'x', 'diamond', 'horline', 'line', 'backslash', 'slash',
+];
+
+function createFeatureTypeStyle() {
+  const featureTypeStyle = {
+    rules: wellknownnames.map(wellknownname => ({
+      filter: {
+        type: 'comparison',
+        operator: 'propertyisequalto',
+        matchcase: true,
+        expression1: {
+          type: 'propertyname',
+          typeHint: 'string',
+          value: 'wellknownname',
+        },
+        expression2: wellknownname,
+      },
+      pointsymbolizer: [
+        {
+          graphic: {
+            mark: {
+              wellknownname,
+              fill: {
+                styling: {
+                  fill: '#F5F5F5',
+                },
+              },
+              stroke: {
+                styling: {
+                  stroke: '#7253ed',
+                  strokeWidth: 2.0,
+                },
+              },
+            },
+            size: 40,
+          },
+        },
+      ],
+    })),
+  };
+
+  // Add else filter to display unknown wellknownname as a boring gray square.
+  featureTypeStyle.rules.push({
+    elsefilter: true,
+    pointsymbolizer: [
+      {
+        graphic: {
+          mark: {
+            wellknownname: 'square',
+            fill: {
+              styling: {
+                fill: '#cccccc',
+              },
+            },
+            stroke: {
+              styling: {
+                stroke: '#000000',
+                strokeWidth: 1.0,
+              },
+            },
+          },
+          size: 20,
+        },
+      },
+    ],
+  });
+
+  return featureTypeStyle;
+}
+
+function getOlMarkStyle(wellknownname) {
+  if (typeof styleFunction !== 'function') {
+    styleFunction = SLDReader.createOlStyleFunction(createFeatureTypeStyle());
+  }
+  const olFeature = new ol.Feature({
+    wellknownname,
+    geometry: new ol.geom.Point([0, 0]),
+  });
+  const style = styleFunction(olFeature)[0];
+  return style;
+}
+
+function prepareGallery() {
+  const galleryContainer = document.querySelector('#mark-gallery');
+  wellknownnames.forEach(wellknownname => {
+    const markCard = document.createElement('div');
+    markCard.classList.add('mark-card');
+    galleryContainer.appendChild(markCard);
+
+    const markBox = document.createElement('div');
+    markBox.classList.add('mark-box');
+    markCard.appendChild(markBox);
+
+    // Draw point symbol using point style corresponding to the symbol wellknownname.
+    const canvasWidth = BOX_WIDTH * ol.has.DEVICE_PIXEL_RATIO;
+    const canvasHeight = BOX_HEIGHT * ol.has.DEVICE_PIXEL_RATIO;
+    const symbolCanvas = document.createElement('canvas');
+    symbolCanvas.width = canvasWidth;
+    symbolCanvas.height = canvasHeight;
+    markBox.appendChild(symbolCanvas);
+
+    const context = symbolCanvas.getContext('2d');
+    const olContext = ol.render.toContext(context, {
+      size: [BOX_WIDTH, BOX_HEIGHT],
+    });
+    const symbolStyle = getOlMarkStyle(wellknownname);
+    olContext.setStyle(symbolStyle);
+    const centerX = BOX_WIDTH / 2;
+    const centerY = BOX_HEIGHT / 2;
+    olContext.drawGeometry(new ol.geom.Point([centerX, centerY]));
+
+    const markTitle = document.createElement('div');
+    markTitle.classList.add('mark-title');
+    markTitle.textContent = wellknownname;
+    markCard.appendChild(markTitle);
+  });
+}
+
+function init() {
+  prepareGallery();
+}
+
+document.addEventListener('DOMContentLoaded', init);

docs/assets/ol.js

@@ -55,6 +55,7 @@ fetch('assets/sld-tasmania.xml')
   .then(response => response.text())
   .then(text => {
     const sldObject = SLDReader.Reader(text);
+    window.sldObject = sldObject;
     styleSelector(sldObject);
 
     const setLayerStyle = (layer, stylename) => {

docs/assets/sldreader.js

@@ -1866,7 +1866,7 @@
         color: 'red',
       }),
       points: 4,
-      radius1: 8,
+      radius: 8,
       radius2: 0,
       stroke: new style.Stroke({
         color: 'red',
@@ -2033,7 +2033,7 @@
         return new style.RegularShape({
           fill: fill,
           points: 5,
-          radius1: radius,
+          radius: radius,
           radius2: radius / 2.5,
           stroke: stroke,
           rotation: rotationRadians,
@@ -2043,7 +2043,7 @@
         return new style.RegularShape({
           fill: fill,
           points: 4,
-          radius1: radius,
+          radius: radius,
           radius2: 0,
           stroke:
             stroke ||
@@ -2089,7 +2089,7 @@
           angle: Math.PI / 4,
           fill: fill,
           points: 4,
-          radius1: Math.sqrt(2.0) * radius,
+          radius: Math.sqrt(2.0) * radius,
           radius2: 0,
           stroke:
             stroke ||
@@ -2104,7 +2104,7 @@
         return new style.RegularShape({
           fill: fill,
           points: 4,
-          radius1: radius,
+          radius: radius,
           stroke: stroke,
           rotation: rotationRadians,
         });
@@ -2156,7 +2156,7 @@
           fill: fill,
           points: 4,
           // For square, scale radius so the height of the square equals the given size.
-          radius1: radius * Math.sqrt(2.0),
+          radius: radius * Math.sqrt(2.0),
           stroke: stroke,
           rotation: rotationRadians,
         });

docs/mark-gallery.html

@@ -0,0 +1,22 @@
+---
+layout: default
+title: PointSymbolizer gallery
+nav_order: 5
+custom_css: assets/mark-gallery.css
+---
+
+<div class="row">
+  <div class="col-md-12">
+    <h1>PointSymbolizer gallery</h1>
+    <p><a href="assets/mark-gallery.js">View code</a></p>
+  </div>
+</div>
+<div class="row">
+  <p>
+    This page displays all supported PointSymbolizer marks by wellknownname.
+  </p>
+  <div class="col-md-6">
+    <div id="mark-gallery"></div>
+  </div>
+</div>
+<script src="assets/mark-gallery.js"></script>

src/styles/static.js

@@ -42,7 +42,7 @@ export const imageErrorPointStyle = new Style({
       color: 'red',
     }),
     points: 4,
-    radius1: 8,
+    radius: 8,
     radius2: 0,
     stroke: new Stroke({
       color: 'red',

src/styles/wellknown.js

@@ -46,7 +46,7 @@ function getWellKnownSymbol(
       return new RegularShape({
         fill,
         points: 5,
-        radius1: radius,
+        radius,
         radius2: radius / 2.5,
         stroke,
         rotation: rotationRadians,
@@ -56,7 +56,7 @@ function getWellKnownSymbol(
       return new RegularShape({
         fill,
         points: 4,
-        radius1: radius,
+        radius,
         radius2: 0,
         stroke:
           stroke ||
@@ -102,7 +102,7 @@ function getWellKnownSymbol(
         angle: Math.PI / 4,
         fill,
         points: 4,
-        radius1: Math.sqrt(2.0) * radius,
+        radius: Math.sqrt(2.0) * radius,
         radius2: 0,
         stroke:
           stroke ||
@@ -117,7 +117,7 @@ function getWellKnownSymbol(
       return new RegularShape({
         fill,
         points: 4,
-        radius1: radius,
+        radius,
         stroke,
         rotation: rotationRadians,
       });
@@ -169,7 +169,7 @@ function getWellKnownSymbol(
         fill,
         points: 4,
         // For square, scale radius so the height of the square equals the given size.
-        radius1: radius * Math.sqrt(2.0),
+        radius: radius * Math.sqrt(2.0),
         stroke,
         rotation: rotationRadians,
       });

test/OlStyler.test.js

@@ -97,7 +97,7 @@ describe('creates point style', () => {
       {
         graphic: {
           mark: {
-            wellknownname: 'circle',
+            wellknownname: 'star',
             fill: {},
             stroke: {},
           },
@@ -109,12 +109,17 @@ describe('creates point style', () => {
     ],
   };
   it('returns array', () => {
-    const style = OlStyler(styleDescription, getMockOLFeature('Point'));
-    expect(style).to.be.an('array');
+    const styles = OlStyler(styleDescription, getMockOLFeature('Point'));
+    expect(styles).to.be.an('array');
   });
   it('returns style', () => {
-    const style = OlStyler(styleDescription, getMockOLFeature('Point'));
-    expect(style['0']).to.be.an.instanceOf(Style);
+    const [style] = OlStyler(styleDescription, getMockOLFeature('Point'));
+    expect(style).to.be.an.instanceOf(Style);
+  });
+  it('uses radius and radius2 for star-like regular shape', () => {
+    const [style] = OlStyler(styleDescription, getMockOLFeature('Point'));
+    expect(style.getImage().getRadius()).to.equal(5);
+    expect(style.getImage().getRadius2()).to.equal(2);
   });
 });