Merge pull request #199 from NieuwlandGeo/externalgraphic-inlinecontent

Externalgraphic inlinecontent

Author: ajkopinga

docs/assets/sldreader-standalone.js

@@ -1,4 +1,4 @@
-/* Version: 0.6.1 - May 14, 2025 12:07:44 */
+/* Version: 0.6.1 - May 19, 2025 12:07:05 */
 var SLDReader = (function (exports, RenderFeature, Style, Icon, Fill, Stroke, Circle, RegularShape, render, Point, LineString, extent, has, Polygon, MultiPolygon, Text, MultiPoint) {
   'use strict';
 
@@ -413,6 +413,15 @@ var SLDReader = (function (exports, RenderFeature, Style, Icon, Fill, Stroke, Ci
           console.error('Error converting parametric SVG: ', e);
         }
       }
+    } else if (externalgraphic.inlinecontent) {
+      if (externalgraphic.encoding?.indexOf('base64') > -1) {
+        externalgraphic.onlineresource = `data:${externalgraphic.format || ''};base64,${externalgraphic.inlinecontent}`;
+        delete externalgraphic.inlinecontent;
+      } else if (externalgraphic.encoding?.indexOf('xml') > -1) {
+        const encodedXml = window.encodeURIComponent(externalgraphic.inlinecontent);
+        externalgraphic.onlineresource = `data:image/svg+xml;utf8,${encodedXml}`;
+        delete externalgraphic.inlinecontent;
+      }
     }
   }
 
@@ -751,6 +760,14 @@ var SLDReader = (function (exports, RenderFeature, Style, Icon, Fill, Stroke, Ci
     OnlineResource: (element, obj) => {
       obj.onlineresource = element.getAttribute('xlink:href');
     },
+    InlineContent: (element, obj) => {
+      obj.encoding = element.getAttribute('encoding');
+      if (obj.encoding?.indexOf('base64') > -1) {
+        obj.inlinecontent = element.textContent?.trim();
+      } else if (obj.encoding?.indexOf('xml') > -1) {
+        obj.inlinecontent = element.innerHTML?.trim();
+      }
+    },
     CssParameter: (element, obj, prop, options) => addParameterValue(element, obj, prop, 'styling', options),
     SvgParameter: (element, obj, prop, options) => addParameterValue(element, obj, prop, 'styling', options)
   };

src/Reader/index.js

@@ -143,6 +143,15 @@ function addExternalGraphicProp(node, obj, prop, options) {
         console.error('Error converting parametric SVG: ', e);
       }
     }
+  } else if (externalgraphic.inlinecontent) {
+    if (externalgraphic.encoding?.indexOf('base64') > -1) {
+      externalgraphic.onlineresource = `data:${externalgraphic.format || ''};base64,${externalgraphic.inlinecontent}`;
+      delete externalgraphic.inlinecontent;
+    } else if (externalgraphic.encoding?.indexOf('xml') > -1) {
+      const encodedXml = window.encodeURIComponent(externalgraphic.inlinecontent);
+      externalgraphic.onlineresource = `data:image/svg+xml;utf8,${encodedXml}`;
+      delete externalgraphic.inlinecontent;
+    }
   }
 }
 
@@ -532,6 +541,14 @@ const SymbParsers = {
   OnlineResource: (element, obj) => {
     obj.onlineresource = element.getAttribute('xlink:href');
   },
+  InlineContent: (element, obj) => {
+    obj.encoding = element.getAttribute('encoding');
+    if (obj.encoding?.indexOf('base64') > -1) {
+      obj.inlinecontent = element.textContent?.trim();
+    } else if (obj.encoding?.indexOf('xml') > -1) {
+      obj.inlinecontent = element.innerHTML?.trim();
+    }
+  },
   CssParameter: (element, obj, prop, options) =>
     addParameterValue(element, obj, prop, 'styling', options),
   SvgParameter: (element, obj, prop, options) =>

test/Reader.test.js

@@ -2,6 +2,7 @@
 import { sld } from './data/test.sld';
 import { sld11 } from './data/test11.sld';
 import { dynamicSld } from './data/dynamic.sld';
+import { externalGraphicInlineContentSld } from './data/externalgraphic-inlinecontent.sld';
 import { graphicstrokeSymbolizerSld } from './data/graphicstrokeSymbolizer.sld';
 import { graphicStrokeWithGap } from './data/graphicstroke-with-gap.sld';
 import { graphicStrokeWithComments } from './data/graphicstroke-with-comments.sld';
@@ -582,6 +583,31 @@ describe('SVG style parameters', () => {
     });
   });
 
+  describe('ExternalGraphic with InlineContent', () => {
+    let style;
+    beforeEach(() => {
+      const parsedSld = Reader(externalGraphicInlineContentSld);
+      [style] = parsedSld.layers[0].styles[0].featuretypestyles;
+    });
+
+    it('Base64 inline content is converted to base64 onlineresource', () => {
+      const externalgraphic =
+        style.rules[0].pointsymbolizer[0].graphic.externalgraphic;
+      expect(externalgraphic.onlineresource).to.equal(
+        'data:image/png;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
+      );
+    });
+
+    it('SVG xml inline content is converted to base64 onlineresource', () => {
+      const externalgraphic =
+        style.rules[1].pointsymbolizer[0].graphic.externalgraphic;
+      console.log(externalgraphic.onlineresource);
+      expect(externalgraphic.onlineresource).to.equal(
+        'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M50%2C3l12%2C36h38l-30%2C22l11%2C36l-31-21l-31%2C21l11-36l-30-22h38z%22%20fill%3D%22%23FF0%22%20stroke%3D%22%23FC0%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E'
+      );
+    });
+  });
+
   describe('Parse units of measure', () => {
     let parsedSld;
     let pointSymbolizer;

test/data/externalgraphic-inlinecontent.sld.js

@@ -0,0 +1,43 @@
+export const externalGraphicInlineContentSld = `<?xml version="1.0" encoding="UTF-8"?>
+<sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" 
+  xmlns:sld="http://www.opengis.net/sld" 
+  xmlns:ogc="http://www.opengis.net/ogc" 
+  xmlns:gml="http://www.opengis.net/gml" 
+  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0.0">
+  <NamedLayer>
+    <sld:Name>icons_puntenlaag</sld:Name>
+    <UserStyle>
+      <sld:Name>icons_puntenlaag</sld:Name>
+      <sld:FeatureTypeStyle>
+        <sld:Rule>
+          <sld:Name>Inline base64</sld:Name>
+          <sld:PointSymbolizer>
+            <sld:Graphic>
+              <sld:ExternalGraphic>
+                <sld:InlineContent encoding="base64">R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==</sld:InlineContent>
+                <sld:Format>image/png</sld:Format>
+              </sld:ExternalGraphic>
+              <sld:Size>24</sld:Size>
+            </sld:Graphic>
+          </sld:PointSymbolizer>
+        </sld:Rule>
+        <sld:Rule>
+          <sld:Name>Inline svg</sld:Name>
+          <sld:PointSymbolizer>
+            <sld:Graphic>
+              <sld:ExternalGraphic>
+                <sld:InlineContent encoding="xml">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><path d="M50,3l12,36h38l-30,22l11,36l-31-21l-31,21l11-36l-30-22h38z" fill="#FF0" stroke="#FC0" stroke-width="2"/></svg>
+                </sld:InlineContent>
+                <sld:Format>image/svg+xml</sld:Format>
+              </sld:ExternalGraphic>
+              <sld:Size>24</sld:Size>
+            </sld:Graphic>
+          </sld:PointSymbolizer>
+        </sld:Rule>
+      </sld:FeatureTypeStyle>
+    </UserStyle>
+  </NamedLayer>
+</sld:StyledLayerDescriptor>`;
+
+export default externalGraphicInlineContentSld;