fix: Error about undefined symbolizer offset

hslayers · Jun 18, 2021 · eac5db2 · eac5db2
1 parent 3c309e4
commit eac5db2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 42 deletions.
diff --git a/projects/hslayers/src/assets/locales/en.json b/projects/hslayers/src/assets/locales/en.json
@@ -392,8 +392,8 @@
     "403": "Http failure response for {{url}}: 403 Forbidden",
     "404": "Http failure response for {{url}}: 404 Not Found",
     "502": "Http failure response for {{url}}: 502 Bad Gateway",
-    "Invalid Params": "Please check if all the required text fields are filled in before sharing the map!",
-    "Timeout has occurred": "Http failure response for {{url}}: Timeout Out"
+    "Timeout has occurred": "Http failure response for {{url}}: Timeout Out",
+    "Invalid Params": "Please check if all the required text fields are filled in before sharing the map!"
   },
   "FEATURE_TABLE": {
     "delete": "delete",
@@ -726,8 +726,8 @@
     "clusterRule": "Rule for clusters",
     "removeRule": "Remove rule",
     "selectIcon": "Select icon",
-    "anchorY": "Anchor Y",
-    "anchorX": "Anchor X",
+    "anchorY": "Offset Y",
+    "anchorX": "Offset X",
     "warningAttribStoredNotVisualized": "Attribute stored in SLD, but currently is not visualized correctly",
     "warningAttribNotStoredNotVisualized": "Attribute currently not visualized correctly and not stored in SLD",
     "dashPattern": "Dash pattern"
@@ -746,14 +746,5 @@
     "routerLayer": "Route layer",
     "waypointLayer": "Waypoint layer",
     "travelRoute": "Travel route"
-  },
-  "ERRORMESSAGES": {
-    "0": "Http failure response for {{url}}: 0 Unknown Error",
-    "400": "Http failure response for {{url}}: 400 Bad Request",
-    "403": "Http failure response for {{url}}: 403 Forbidden",
-    "404": "Http failure response for {{url}}: 404 Not Found",
-    "502": "Http failure response for {{url}}: 502 Bad Gateway",
-    "Timeout has occurred": "Http failure response for {{url}}: Timeout Out",
-    "Invalid Params": "Please check if all the required text fields are filled in before sharing the map!"
   }
 }
diff --git a/projects/hslayers/src/components/styles/backwards-compatibility.ts b/projects/hslayers/src/components/styles/backwards-compatibility.ts
@@ -1,8 +1,13 @@
-import BaseLayer from 'ol/layer/Base';
-import Feature from 'ol/Feature';
 import SLDParser from 'geostyler-sld-parser';
-import VectorLayer from 'ol/layer/Vector';
 import {Circle, Fill, Icon, Stroke, Style} from 'ol/style';
+import {
+  FillSymbolizer,
+  IconSymbolizer,
+  LineSymbolizer,
+  MarkSymbolizer,
+  Symbolizer,
+  SymbolizerKind,
+} from 'geostyler-style';
 
 export async function parseStyle(j): Promise<{sld?: string; style: Style}> {
   const style_json: any = {};
@@ -66,7 +71,7 @@ export async function parseStyle(j): Promise<{sld?: string; style: Style}> {
  * @param layer - Vector layer to get title from
  */
 async function convertHsStyleToSld(json: any): Promise<string> {
-  const symbolizers = [];
+  const symbolizers: Symbolizer[] = [];
   if (json.image?.type == 'circle') {
     symbolizers.push(createCircleSymbol(json));
   }
@@ -95,13 +100,8 @@ async function convertHsStyleToSld(json: any): Promise<string> {
  * @param json
  * @returns
  */
-function createPolygonSymbol(json: any): {
-  kind: string;
-  color: string;
-  outlineColor?: string;
-  outlineWidth?: number;
-} {
-  const tmp = {
+function createPolygonSymbol(json: any): FillSymbolizer {
+  const tmp: FillSymbolizer = {
     kind: 'Fill',
     color: json.fill.color,
   };
@@ -120,12 +120,8 @@ function createPolygonSymbol(json: any): {
  * @param json
  * @returns
  */
-function createLineSymbol(json: any): {
-  kind: string;
-  color: string;
-  width?: number;
-} {
-  const tmp = {
+function createLineSymbol(json: any): LineSymbolizer {
+  const tmp: LineSymbolizer = {
     kind: 'Line',
     color: json.stroke.color,
     width: json.stroke.width,
@@ -139,15 +135,8 @@ function createLineSymbol(json: any): {
  * @param json
  * @returns
  */
-function createCircleSymbol(json: any): {
-  kind: string;
-  wellKnownName: string;
-  color: string;
-  strokeColor?: string;
-  strokeWidth?: number;
-  radius: number;
-} {
-  const tmp: any = {
+function createCircleSymbol(json: any): MarkSymbolizer {
+  const tmp: MarkSymbolizer = {
     kind: 'Mark',
     wellKnownName: 'circle',
     color: json.image.fill.color || json.fill,
@@ -172,9 +161,10 @@ function createCircleSymbol(json: any): {
  * @param json
  * @returns
  */
-function createIconSymbol(json: any): {kind: string; image: string} {
+function createIconSymbol(json: any): IconSymbolizer {
   return {
     kind: 'Icon',
+    offset: [0, 0],
     image:
       json.image.src.replace('data:image/svg+xml;base64,', 'base64:') +
       `?fill=${encodeURIComponent(

diff --git a/projects/hslayers/src/components/styles/symbolizers/icon-symbolizer.html b/projects/hslayers/src/components/styles/symbolizers/icon-symbolizer.html
@@ -69,7 +69,7 @@
     </div>
   </div>
 
-  <div class="d-flex flex-row">
+  <div class="d-flex flex-row" *ngIf="symbolizer.offset != undefined">
     <div class="p-1 w-25 mt-2">{{'STYLER.anchorX' | translate}}:</div>
     <span class="badge badge-warning mt-2" style="height: 2em; width:2em" title="{{'STYLER.warningAttribNotStoredNotVisualized' | translate}}">!</span>
     <div class="p-1 w-75">
@@ -87,7 +87,7 @@
   </div>
 
 
-  <div class="d-flex flex-row">
+  <div class="d-flex flex-row" *ngIf="symbolizer.offset != undefined">
     <div class="p-1 w-25 mt-2">{{'STYLER.anchorY' | translate}}:</div>
     <span class="badge badge-warning mt-2" style="height: 2em; width:2em" title="{{'STYLER.warningAttribNotStoredNotVisualized' | translate}}">!</span>
     <div class="p-1 w-75">