@sedoo/unidoo 0.1.71 → 0.1.72

package/src/components/UnidooMapGeoFeatures.vue

@@ -28,7 +28,7 @@ import "ol-ext/dist/ol-ext.css";
 import {
   Select,
   DragRotateAndZoom,
-  defaults as defaultInteractions,
+  defaults as defaultInteractions
 } from "ol/interaction";
 import { click, pointerMove } from "ol/events/condition";
 import { FullScreen } from "ol/control";
@@ -61,52 +61,52 @@ export default {
       content_title: null,
       popupArray: [],
       popupTitleArray: [],
-      fullscreenToggled: false, // property to track fullscreen state
+      fullscreenToggled: false // property to track fullscreen state
     };
   },
   props: {
     title: {
       type: String,
-      default: "Component Unidoo MapGeoFeatures",
+      default: "Component Unidoo MapGeoFeatures"
     },
     colorTitle: {
       type: String,
-      default: "#3f4a75",
+      default: "#3f4a75"
     },
     colorFeature: {
       type: String,
-      default: "green",
+      default: "green"
     },
     colorOfSelectedFeature: {
       type: String,
-      default: "blue",
+      default: "blue"
     },
     serviceUrl: {
       type: String,
-      required: true,
+      required: true
     },
     bannedKeys: {
       type: String,
       default: () => {
         return "geometry,origin,interval,source,technicalId,externalLinkPrefix,externalLink,UTC_time,altitude";
-      },
+      }
     },
     shapeStylePoint: {
       type: String,
-      default: "circle",
+      default: "circle"
     },
     disablePopupProperties: {
       type: String,
-      default: "false",
+      default: "false"
     },
     noTitleInPopupWithOneFeature: {
       type: String,
-      default: "true",
+      default: "true"
     },
     isRotationShapeStylePoint: {
       type: String,
-      default: "false",
-    },
+      default: "false"
+    }
   },
   computed: {
     maxPopupHeight() {
@@ -116,7 +116,7 @@ export default {
         return this.calculateMaxPopupHeight();
       }
       return this.calculateMaxPopupHeight();
-    },
+    }
   },
 
   created() {
@@ -151,13 +151,13 @@ export default {
         if (newVal !== oldVal && newVal !== undefined) {
           this.loadFeatures();
         }
-      },
+      }
     },
     fullscreenToggled(newValue, oldValue) {
       if (newValue !== oldValue) {
         this.maxPopupHeight = this.calculateMaxPopupHeight();
       }
-    },
+    }
   },
 
   methods: {
@@ -176,11 +176,13 @@ export default {
     },
 
     beforeDestroy() {
-      window.removeEventListener("resize", this.handleResize);
-      document.removeEventListener(
-        "fullscreenchange",
-        this.handleFullscreenChange
-      );
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", this.handleResize);
+        document.removeEventListener(
+          "fullscreenchange",
+          this.handleFullscreenChange
+        );
+      }
     },
 
     rotationInRadians(featureRotation) {
@@ -204,67 +206,71 @@ export default {
      * @param {string} [integrity] - The integrity hash of the stylesheet for subresource integrity checking. Optional.
      */
     addStylesheet(href, integrity = "") {
-      // Check if the stylesheet already exists
-      const existingLink = document.querySelector(`link[href="${href}"]`);
-
-      if (!existingLink) {
-        const link = document.createElement("link");
-        link.href = href;
-        link.rel = "stylesheet";
-        link.crossOrigin = "anonymous";
-        if (integrity) {
-          link.integrity = integrity;
+      if (typeof document !== "undefined") {
+        // Check if the stylesheet already exists
+        const existingLink = document.querySelector(`link[href="${href}"]`);
+
+        if (!existingLink) {
+          const link = document.createElement("link");
+          link.href = href;
+          link.rel = "stylesheet";
+          link.crossOrigin = "anonymous";
+          if (integrity) {
+            link.integrity = integrity;
+          }
+          document.head.appendChild(link);
         }
-        document.head.appendChild(link);
       }
     },
 
     loadFeatures() {
-      this.infoLog("Loading features...");
+      if (typeof window !== "undefined") {
+        this.infoLog("Loading features...");
 
-      if (this.popupArray && this.popupArray.length > 0) {
-        // Close the popup if it is already open before loading new features.
-        this.closePopup();
-      }
+        if (this.popupArray && this.popupArray.length > 0) {
+          // Close the popup if it is already open before loading new features.
+          this.closePopup();
+        }
 
-      if (this.popupTitleArray && this.popupTitleArray.length > 0) {
-        // Close the popup title if it is already open before loading new features.
-        this.closePopupTitle();
-      }
+        if (this.popupTitleArray && this.popupTitleArray.length > 0) {
+          // Close the popup title if it is already open before loading new features.
+          this.closePopupTitle();
+        }
 
-      this.axios
-        .get(this.serviceUrl)
-        .then((res) => {
-          if (typeof res.data === "object") {
-            // Your existing code...
-            const geoJsonObject = res.data;
-            geoJsonObject.crs = {
-              type: "name",
-              properties: {
-                name: "EPSG:3857",
-              },
-            };
-            this.geoJsonObject = geoJsonObject;
-            if (geoJsonObject.features && geoJsonObject.features.length > 0) {
-              this.updateMapFeatures(geoJsonObject);
+        this.axios
+          .get(this.serviceUrl)
+          .then((res) => {
+            if (typeof res.data === "object") {
+              // Your existing code...
+              const geoJsonObject = res.data;
+              geoJsonObject.crs = {
+                type: "name",
+                properties: {
+                  name: "EPSG:3857"
+                }
+              };
+              this.geoJsonObject = geoJsonObject;
+              if (geoJsonObject.features && geoJsonObject.features.length > 0) {
+                this.updateMapFeatures(geoJsonObject);
+              } else {
+                this.warnLog(
+                  "loadFeatures() : No features found in geoJsonObject ! :",
+                  geoJsonObject
+                );
+              }
+              // fix the problem of the map loading the first time the component UnidooMapGepFeatures is loaded in a project (e.g. iagos-frontend-custom-elements)
+              this.$nextTick(() => {
+                // $nextTick is a Vue method that allows you to access the DOM after the next update cycle. This is useful here to make sure that the map is resized after the features are loaded.
+                window.dispatchEvent(new Event("resize")); // force the map to be resized after the features are loaded (ref : https://intranet.sedoo.fr/astuces-openlayers/)
+              });
             } else {
-              this.warnLog(
-                "loadFeatures() : No features found in geoJsonObject ! :",
-                geoJsonObject
-              );
+              this.errorLog("API response is not an object:", res.data);
             }
-            // fix the problem of the map loading the first time the component UnidooMapGepFeatures is loaded in a project (e.g. iagos-frontend-custom-elements)
-            this.$nextTick(() => {
-              // $nextTick is a Vue method that allows you to access the DOM after the next update cycle. This is useful here to make sure that the map is resized after the features are loaded.
-              window.dispatchEvent(new Event("resize")); // force the map to be resized after the features are loaded (ref : https://intranet.sedoo.fr/astuces-openlayers/)
-            });
-          } else {
-            this.errorLog("API response is not an object:", res.data);
-          }
-        })
-        .catch((error) => {
-          this.errorLog("API request error:", error);
-        });
+          })
+          .catch((error) => {
+            this.errorLog("API request error:", error);
+          });
+      }
     },
 
     initMap() {
@@ -274,25 +280,25 @@ export default {
         LineString: new Style({
           stroke: new Stroke({
             color: this.colorFeature,
-            width: 2,
-          }),
+            width: 2
+          })
         }),
         /* For SAFIRE */
         MultiLineString: new Style({
           stroke: new Stroke({
             color: this.colorFeature,
-            width: 1,
-          }),
+            width: 1
+          })
         }),
         Polygon: new Style({
           stroke: new Stroke({
             color: this.colorFeature,
-            width: 3,
+            width: 3
           }),
           fill: new Fill({
-            color: "rgba(0, 0, 255, 0.1)",
-          }),
-        }),
+            color: "rgba(0, 0, 255, 0.1)"
+          })
+        })
       };
 
       this.styles = styles;
@@ -301,25 +307,25 @@ export default {
         LineString: new Style({
           stroke: new Stroke({
             color: this.colorOfSelectedFeature,
-            width: 2,
-          }),
+            width: 2
+          })
         }),
         /* For SAFIRE */
         MultiLineString: new Style({
           stroke: new Stroke({
             color: this.colorOfSelectedFeature,
-            width: 1,
-          }),
+            width: 1
+          })
         }),
         Polygon: new Style({
           stroke: new Stroke({
             color: this.colorOfSelectedFeature,
-            width: 3,
+            width: 3
           }),
           fill: new Fill({
-            color: "rgba(0, 0, 255, 0.1)",
-          }),
-        }),
+            color: "rgba(0, 0, 255, 0.1)"
+          })
+        })
       };
 
       this.selectedStyle = selectedStyle;
@@ -329,7 +335,7 @@ export default {
 
       const vectorLayer = new VectorLayer({
         source: this.vectorSource,
-        style: this.styleFunction,
+        style: this.styleFunction
       });
 
       // this is where we create the OpenLayers map
@@ -341,9 +347,9 @@ export default {
         layers: [
           // adding a background tiled layer
           new TileLayer({
-            source: new OSM(), // tiles are served by OpenStreetMap
+            source: new OSM() // tiles are served by OpenStreetMap
           }),
-          vectorLayer,
+          vectorLayer
         ],
         // overlays: [this.popupOverlay],
         // the map view will initially show the whole world
@@ -351,23 +357,25 @@ export default {
           zoom: 0,
           center: [0, 0],
           constrainResolution: false,
-          projection: "EPSG:3857",
-        }),
+          projection: "EPSG:3857"
+        })
       });
 
       const fullscreen = new FullScreen();
       this.map.addControl(fullscreen);
 
-      // Listen for changes in fullscreen state
-      document.addEventListener(
-        "fullscreenchange",
-        this.handleFullscreenChange
-      );
+      if (typeof document !== "undefined") {
+        // Listen for changes in fullscreen state
+        document.addEventListener(
+          "fullscreenchange",
+          this.handleFullscreenChange
+        );
+      }
 
       // add select interaction to change the color of a selected feature
       this.selectInteraction = new Select({
         condition: click,
-        style: this.selectedStyleFunction,
+        style: this.selectedStyleFunction
       });
 
       this.map.addInteraction(this.selectInteraction);
@@ -375,7 +383,7 @@ export default {
       // add hover interaction to show that a feature is selectable (change the color style)
       this.hoverInteraction = new Select({
         condition: pointerMove,
-        style: this.selectedStyleFunction,
+        style: this.selectedStyleFunction
       });
 
       this.map.addInteraction(this.hoverInteraction);
@@ -396,7 +404,7 @@ export default {
 
       const geoJson = new GeoJSON({
         dataProjection: "EPSG:4326",
-        featureProjection: "EPSG:3857",
+        featureProjection: "EPSG:3857"
       });
 
       const features = geoJsonObject.features;
@@ -411,7 +419,7 @@ export default {
             const batch = features.slice(i, i + batchSize);
             const featureCollection = {
               type: "FeatureCollection",
-              features: batch,
+              features: batch
             };
             // Convert a collection of GeoJSON features to OpenLayers feature.
             const olFeatures = geoJson.readFeatures(featureCollection);
@@ -437,7 +445,7 @@ export default {
           this.map.getView().fit(this.vectorSource.getExtent(), {
             duration: 500, // Optional: smooth transition
             padding: [100, 100, 100, 100], // Optional: padding around the features
-            maxZoom: 16, // Prevents zooming in too closely
+            maxZoom: 16 // Prevents zooming in too closely
           });
         } else {
           this.warnLog(
@@ -492,85 +500,85 @@ export default {
         imageStyle = new CircleStyle({
           radius: 5,
           fill: new Fill({
-            color: fillColor,
+            color: fillColor
           }),
           stroke: new Stroke({
             color: color,
-            width: 1,
-          }),
+            width: 1
+          })
         });
       } else if (this.shapeStylePoint === "triangle") {
         imageStyle = new RegularShape({
           fill: new Fill({
-            color: fillColor,
+            color: fillColor
           }),
           stroke: new Stroke({
             color: color,
-            width: 1,
+            width: 1
           }),
           points: 3,
           radius: 10,
           angle: 0,
-          rotation: this.rotationInRadians(featureRotation),
+          rotation: this.rotationInRadians(featureRotation)
         });
       } else if (this.shapeStylePoint === "square") {
         imageStyle = new RegularShape({
           fill: new Fill({
-            color: fillColor,
+            color: fillColor
           }),
           stroke: new Stroke({
             color: color,
-            width: 1,
+            width: 1
           }),
           points: 4,
           radius: 10,
           angle: Math.PI / 4,
-          rotation: this.rotationInRadians(featureRotation),
+          rotation: this.rotationInRadians(featureRotation)
         });
       } else if (this.shapeStylePoint === "star") {
         imageStyle = new RegularShape({
           fill: new Fill({
-            color: fillColor,
+            color: fillColor
           }),
           stroke: new Stroke({
             color: color,
-            width: 1,
+            width: 1
           }),
           points: 5,
           radius: 10,
           radius2: 4,
           angle: 0,
-          rotation: this.rotationInRadians(featureRotation),
+          rotation: this.rotationInRadians(featureRotation)
         });
       } else if (this.shapeStylePoint === "cross") {
         imageStyle = new RegularShape({
           fill: new Fill({
-            color: fillColor,
+            color: fillColor
           }),
           stroke: new Stroke({
             color: color,
-            width: 2,
+            width: 2
           }),
           points: 4,
           radius: 10,
           radius2: 0,
           angle: 0,
-          rotation: this.rotationInRadians(featureRotation),
+          rotation: this.rotationInRadians(featureRotation)
         });
       } else if (this.shapeStylePoint === "x") {
         imageStyle = new RegularShape({
           fill: new Fill({
-            color: fillColor,
+            color: fillColor
           }),
           stroke: new Stroke({
             color: color,
-            width: 2,
+            width: 2
           }),
           points: 4,
           radius: 10,
           radius2: 0,
           angle: Math.PI / 4,
-          rotation: this.rotationInRadians(featureRotation),
+          rotation: this.rotationInRadians(featureRotation)
         });
       } else if (this.shapeStylePoint.startsWith("fontawesome:")) {
         // Check if shapeStylePoint starts with 'fontawesome:' and then parse the string to get the icon name
@@ -581,13 +589,13 @@ export default {
           text: String.fromCharCode(iconUnicode), // Convert the Unicode number of tto a character to display the icon (e.g., '\uf3c5')
           font: "normal 36px FontAwesome",
           fill: new Fill({
-            color: fillColor,
+            color: fillColor
           }),
           stroke: new Stroke({
             color: color,
-            width: 1,
+            width: 1
           }),
-          rotation: this.rotationInRadians(featureRotation),
+          rotation: this.rotationInRadians(featureRotation)
         });
       } else if (this.shapeStylePoint.startsWith("material:")) {
         // Check if shapeStylePoint starts with 'material:' and then parse the string to get the icon name
@@ -596,13 +604,13 @@ export default {
           text: iconName, // Use the parsed icon name here
           font: "normal 44px Material Icons",
           fill: new Fill({
-            color: fillColor,
+            color: fillColor
           }),
           stroke: new Stroke({
             color: color,
-            width: 1,
+            width: 1
           }),
-          rotation: this.rotationInRadians(featureRotation),
+          rotation: this.rotationInRadians(featureRotation)
         });
       } else {
         this.errorLog(
@@ -614,7 +622,7 @@ export default {
 
       return new Style({
         image: imageStyle,
-        text: textStyle,
+        text: textStyle
       });
     },
 
@@ -656,8 +664,8 @@ export default {
           closeBox: true,
           autoPan: true, // Activate the map centering on the popup
           autoPanAnimation: {
-            duration: 250, // Duration of the map moving animation
-          },
+            duration: 250 // Duration of the map moving animation
+          }
         });
         this.popupArray.push(popup);
 
@@ -984,8 +992,8 @@ export default {
             closeBox: false,
             autoPan: true, // Activate the map centering on the popup
             autoPanAnimation: {
-              duration: 250, // Duration of the map moving animation
-            },
+              duration: 250 // Duration of the map moving animation
+            }
           });
           this.popupTitleArray.push(popupTitle);
 
@@ -996,8 +1004,8 @@ export default {
           popupTitle.show(positionfromLonLat, `<div>${feature.title}</div>`);
         }
       });
-    },
-  },
+    }
+  }
 };
 </script>