Merge pull request #99 from felix-mu/98-bug-map-icon-fonts-not-loading-initially

Merge branch 98-bug-map-icon-fonts-not-loading-initially

Author: felix-mu

.config/webpack/webpack.config.ts

@@ -95,8 +95,23 @@ const config = async (env): Promise<Configuration> => ({
           },
         },
       },
+      // {
+      //   test: /fontmaki.*\.css/,
+      //   use: [
+      //     { loader: "style-loader", options: { injectType: "linkTag", attributes: { rel: "preload", as: "style", onload: "this.rel = 'stylesheet'" } } },
+      //     // "css-loader"
+      //   ],
+      //   type: 'asset/resource',
+      //   generator: {
+      //     // Keep publicPath relative for host.com/grafana/ deployments
+      //     publicPath: `public/plugins/${pluginJson.id}/static/css/`,
+      //     outputPath: 'static/css/',
+      //     filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
+      //   },
+      // },
       {
         test: /\.css$/,
+        // exclude: /fontmaki.*\.css/,
         use: ["style-loader", "css-loader"]
       },
       {

package-lock.json

@@ -45,7 +45,7 @@
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.194",
     "@types/node": "^18.15.11",
-    "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@^2.3.0",
+    "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@^3.6.5",
     "commit-and-tag-version": "^12.4.1",
     "commitizen": "^4.3.0",
     "copy-webpack-plugin": "^11.0.0",
@@ -86,7 +86,7 @@
     "@types/tinycolor2": "^1.4.3",
     "bootstrap-icons": "^1.11.2",
     "ol": "7.2.2",
-    "ol-ext": "^3.2.30",
+    "ol-ext": "^4.0.36",
     "ol-layerswitcher": "^4.1.2",
     "proj4": "^2.9.0",
     "react": "17.0.2",

package.json

@@ -15,6 +15,10 @@ import { isArray, isEqual } from 'lodash';
 import './GeomapPanel.css';
 import "bootstrap-icons/font/bootstrap-icons.css";
 
+// Load directly when plugin
+import 'static/css/fontmaki2.css';
+import 'static/css/fontmaki.css';
+
 // import 'ol-layerswitcher/dist/ol-layerswitcher.css';
 
 // import WKT from 'ol/format/WKT.js';
@@ -386,6 +390,14 @@ export class GeomapPanel extends Component<Props, State> {
       this.map.dispose();
     }
 
+    // Load fontmaki fonts which are used for icons
+    for (const fontFace of document.fonts) {
+      // if (fontFace.family.toLowerCase().includes("fontmaki") || 
+      //         fontFace.family.toLowerCase().includes("grafana")) {
+        await fontFace.load()
+      // }
+    }
+    // await document.fonts.ready
 
     const { options } = this.props;
     this.map = new Map({
@@ -401,7 +413,7 @@ export class GeomapPanel extends Component<Props, State> {
     this.mouseWheelZoom = new MouseWheelZoom();
     this.map.addInteraction(this.mouseWheelZoom);
     await this.initControls(options.controls);
-    this.initBasemap(options.basemap);
+    await this.initBasemap(options.basemap);
     await this.initLayers(options.layers);
     this.forceUpdate(); // first render
 
@@ -513,7 +525,7 @@ export class GeomapPanel extends Component<Props, State> {
     }
   };
 
-  async initBasemap(cfg: ExtendMapLayerOptions) {
+  async initBasemap(cfg: ExtendMapLayerOptions) {    
     if (!this.map) {
       return;
     }

src/GeomapPanel.tsx

@@ -228,13 +228,15 @@ export const LayerEditor: FC<LayerEditorProps> = ({ options, onChange, data, fil
         settings: {},
         defaultValue: true
       });
-      builder.addBooleanSwitch({
-        path: 'enabledForDataLinks',
-        name: 'Toggle to include the data layer for data links',
-        description: 'If toggled the layer is used to interpolate the data links URL.',
-        settings: {},
-        defaultValue: true
-      });
+      if (!layer.isBaseMap) {
+        builder.addBooleanSwitch({
+          path: 'enabledForDataLinks',
+          name: 'Toggle to include the data layer for data links',
+          description: 'If toggled the layer is used to interpolate the data links URL.',
+          settings: {},
+          defaultValue: true
+        });
+      }
     }
 
     if (layer.registerOptionsUI) {
@@ -267,7 +269,7 @@ export const LayerEditor: FC<LayerEditorProps> = ({ options, onChange, data, fil
       }
     };
 
-    const currentOptions = { ...options, type: layer.id, config: { ...layer.defaultOptions, ...options?.config } };
+    const currentOptions = { /*...options*/...context.options, type: layer.id, config: { ...layer.defaultOptions, ...options?.config } };
 
     // Update the panel options if not set
     if (!options || (layer.defaultOptions && !options.config)) {

src/editor/LayerEditor.tsx

@@ -458,7 +458,7 @@ export const markersLayer: ExtendMapLayerRegistryItem<MarkersConfig> = {
   },
   // Marker overlay options
   registerOptionsUI: (builder) => {
-    const iconType = Object.getOwnPropertyNames(FontSymbol.prototype.defs.glyphs);
+    const iconType = Object.getOwnPropertyNames(FontSymbol.defs.glyphs);
     let iconValues: any = [];
     iconValues.push({ value: '', label: 'none' });
     iconType.map((n) => iconValues.push({ value: n, label: n.replace('fa-', '') }));