@sedoo/unidoo 0.1.16 → 0.1.18

package/src/components/UnidooMapGeoFeatures.vue

@@ -0,0 +1,637 @@
+/* eslint-disable no-new */
+<template>
+  <v-app>
+    <v-card height="564px">
+      <v-toolbar
+          flat
+          dark
+          :color="colorTitle"
+      >
+        <v-card-title>{{ title }}</v-card-title>
+      </v-toolbar>
+      <div ref="map-root" style="width: 100%; height: 100%"></div>
+      <!-- Popup -->
+      <div v-show="content_element" id="popup" class="ol-popup">
+        <a href="#" id="popup-closer" class="ol-popup-closer" @click.prevent="closePopup"></a>
+        <div id="popup-content"></div>
+      </div>
+      <!-- Snackbar (Toast Notification) -->
+      <v-snackbar v-model="showToast" :bottom="true" :timeout="10000" :color="colorFeature">
+        Click on a feature drawn to view more details!
+        <v-btn color="pink" text @click="showToast = false">
+          Close
+        </v-btn>
+      </v-snackbar>
+    </v-card>
+  </v-app>
+</template>
+
+<script>
+import View from 'ol/View'
+import Map from 'ol/Map'
+import TileLayer from 'ol/layer/Tile'
+import OSM from 'ol/source/OSM'
+import GeoJSON from 'ol/format/GeoJSON';
+import VectorLayer from 'ol/layer/Vector'
+import VectorSource from 'ol/source/Vector'
+import {Fill, RegularShape, Stroke, Style} from 'ol/style';
+// importing the OpenLayers stylesheet is required for having
+// good looking buttons!
+import 'ol/ol.css'
+import {Select} from "ol/interaction";
+import {click, pointerMove} from "ol/events/condition";
+import {FullScreen} from "ol/control";
+import {Overlay} from "ol";
+import CircleStyle from "ol/style/Circle";
+import {
+  DragRotateAndZoom,
+  defaults as defaultInteractions,
+} from 'ol/interaction.js';
+
+
+export default {
+  name: 'MapContainer',
+  components: {},
+  data() {
+    return {
+      map: null,
+      vectorLayer: null,
+      vectorSource: null,
+      openStyle: null,
+      selectedStyle: null,
+      loadingStations: false,
+      selectInteraction: null,
+      features: {},
+      feature: null,
+      popupOverlay: null,
+      featureProperties: {},
+      geoJsonObject: null,
+      content_element: null,
+      showToast: false,
+      bannedKeysArray: [],
+    };
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'title',
+    },
+    colorTitle: {
+      type: String,
+      default: '#3f4a75',
+    },
+    colorFeature: {
+      type: String,
+      default: 'green',
+    },
+    colorOfSelectedFeature: {
+      type: String,
+      default: 'blue',
+    },
+    serviceUrl: {
+      type: String,
+      default: '',
+    },
+    bannedKeys: {
+      type: String,
+      default: () => {
+        return 'geometry,origin,interval,source,technicalId,externalLinkPrefix,externalLink,UTC_time,altitude';
+      }
+    },
+    shapeStylePoint: {
+      type: String,
+      default: 'circle',
+    },
+    disablePopup: {
+      type: String,
+      default: 'false',
+    }
+  },
+  created() {
+    // Show the toast notification if the disablePopup prop is not set to true.
+    if (this.disablePopup.toLowerCase() !== 'true') {
+        this.showToast = true;
+    }
+  },
+  mounted() {
+    this.initMap();
+    //
+    if (!this.disablePopup !== 'true') {
+      console.log('axios.then : initPopup()');
+      this.initPopup();
+    }
+    this.loadFeatures();
+  },
+  watch: {
+    serviceUrl: {
+      immediate: true, // also call the handler right after component initialization
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          console.log(`Service URL changed from ${oldVal} to ${newVal}`);
+          this.loadFeatures();
+        }
+      }
+    }
+  },
+  methods: {
+    loadFeatures() {
+
+      if (this.popupOverlay) {
+        // Close the popup if it is already open before loading new features.
+        this.closePopup();
+      }
+
+      this.axios.get(this.serviceUrl)
+          .then(res => {
+            const geoJsonObject = res.data
+            geoJsonObject.crs = {
+              type: 'name',
+              properties: {
+                name: 'EPSG:3857',
+              },
+            }
+            this.geoJsonObject = geoJsonObject;
+            this.updateMapFeatures(geoJsonObject);
+
+
+          })
+    },
+
+    initMap() {
+
+      //Initialisation de la Map
+
+      console.log('initMap()');
+
+      const styles = {
+
+        LineString: new Style({
+          stroke: new Stroke({
+            color: this.colorFeature,
+            width: 2,
+          }),
+        }),
+        /* For SAFIRE */
+        MultiLineString: new Style({
+          stroke: new Stroke({
+            color: this.colorFeature,
+            width: 1,
+          }),
+        }),
+        Polygon: new Style({
+          stroke: new Stroke({
+            color: this.colorFeature,
+            width: 3,
+          }),
+          fill: new Fill({
+            color: 'rgba(0, 0, 255, 0.1)',
+          }),
+        }),
+        Point: this.getPointStyle(false), // setting Point style dynamically when it is not selected (false)
+      }
+
+      const selectedStyle = {
+
+        LineString: new Style({
+          stroke: new Stroke({
+            color: this.colorOfSelectedFeature,
+            width: 2,
+          }),
+        }),
+        /* For SAFIRE */
+        MultiLineString: new Style({
+          stroke: new Stroke({
+            color: this.colorOfSelectedFeature,
+            width: 1,
+          }),
+        }),
+        Polygon: new Style({
+          stroke: new Stroke({
+            color: this.colorOfSelectedFeature,
+            width: 3,
+          }),
+          fill: new Fill({
+            color: 'rgba(0, 0, 255, 0.1)',
+          }),
+        }),
+        Point: this.getPointStyle(true), // setting Point style dynamically when it is selected (true)
+      }
+
+      this.selectedStyle = selectedStyle;
+
+      const styleFunction = function (feature) {
+        return styles[feature.getGeometry().getType()];
+      };
+
+      // Initialization of vectorSource should be empty at first.
+      this.vectorSource = new VectorSource({wrapX: false});
+
+      const vectorLayer = new VectorLayer({
+        source: this.vectorSource,
+        style: styleFunction,
+      });
+
+      // this is where we create the OpenLayers map
+      // eslint-disable-next-line no-new
+      this.map = new Map({
+        interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
+        // the map will be created using the 'map-root' ref
+        target: this.$refs['map-root'],
+        layers: [
+          // adding a background tiled layer
+          new TileLayer({
+            source: new OSM() // tiles are served by OpenStreetMap
+          }),
+          vectorLayer
+        ],
+        //overlays: [this.popupOverlay],
+        // the map view will initially show the whole world
+        view: new View({
+          zoom: 0,
+          center: [0, 0],
+          constrainResolution: true,
+          projection: 'EPSG:3857'
+        }),
+      });
+
+      if (this.vectorSource.getFeatures().length > 0) {
+        this.map.getView().fit(this.vectorSource.getExtent());
+      }
+
+      let fullscreen = new FullScreen();
+      this.map.addControl(fullscreen);
+
+
+      //add select interaction to change the color of a selected feature
+      this.selectInteraction = new Select({
+        condition: click,
+        style: this.selectedStyleFunction,
+      });
+
+      this.map.addInteraction(this.selectInteraction);
+
+      //add hover interaction to show that a feature is selectable (change the color style)
+      this.hoverInteraction = new Select({
+        condition: pointerMove,
+        style: this.selectedStyleFunction,
+      });
+
+      this.map.addInteraction(this.hoverInteraction);
+
+
+    },
+
+    async updateMapFeatures(geoJsonObject) {
+      // Clear existing features.
+      this.vectorSource.clear();
+
+      // Convert GeoJSON features and add them to the source.
+      let geoJson = new GeoJSON({
+        dataProjection: 'EPSG:4326',
+        featureProjection: 'EPSG:3857'
+      });
+
+      let features = geoJsonObject.features;
+      if (features) {
+        this.features = features;
+        for (const element of features) {
+          this.vectorSource.addFeature(geoJson.readFeature(element));
+        }
+      }
+
+      // The $nextTick method is used to wait for Vue’s next update cycle to perform operations after the DOM has been updated. By using 'await', we ensure that the code following this line does not execute until the DOM updates are completed.
+      // This is particularly useful here to make sure that any features added to the vector source are rendered on the map before trying to adjust the view to fit them.
+      // Thus, we prevent potential issues where the view adjustment might occur before the features are fully rendered, which could result in an incorrect view or visual bugs.
+      await this.$nextTick();
+
+      // Log the extent for debugging:
+      console.log(this.vectorSource.getExtent());
+
+      // Check if there are features to fit to:
+      if (this.vectorSource.getFeatures().length > 0) {
+        // Ensure the view is adjusted to show the new features.
+        this.map.getView().fit(this.vectorSource.getExtent());
+      }
+
+    },
+
+
+    selectedStyleFunction(feature) {
+
+      return this.selectedStyle[feature.getGeometry().getType()];
+
+    },
+
+    getPointStyle(isSelectedColor) {
+      let image;
+      let color = this.colorFeature;
+      let fillColor = 'rgba(0, 0, 255, 0.1)';
+      if (isSelectedColor) {
+        color = this.colorOfSelectedFeature;
+        fillColor = this.colorOfSelectedFeature;
+      }
+
+      if (this.shapeStylePoint === 'circle') {
+        image = new CircleStyle({
+          radius: 5,
+          fill: new Fill({
+            color: fillColor,
+          }),
+          stroke: new Stroke({
+            color: color,
+            width: 1,
+          }),
+        });
+      } else if (this.shapeStylePoint === 'triangle') {
+        image = new RegularShape({
+          fill: new Fill({
+            color: fillColor,
+          }),
+          stroke: new Stroke({
+            color: color,
+            width: 1,
+          }),
+          points: 3,
+          radius: 10,
+          angle: 0,
+        });
+      } else if (this.shapeStylePoint === 'square') {
+        image = new RegularShape({
+          fill: new Fill({
+            color: fillColor,
+          }),
+          stroke: new Stroke({
+            color: color,
+            width: 1,
+          }),
+          points: 4,
+          radius: 10,
+          angle: Math.PI / 4,
+        });
+      } else if (this.shapeStylePoint === 'star') {
+        image = new RegularShape({
+          fill: new Fill({
+            color: fillColor,
+          }),
+          stroke: new Stroke({
+            color: color,
+            width: 1,
+          }),
+          points: 5,
+          radius: 10,
+          radius2: 4,
+          angle: 0,
+        });
+      } else if (this.shapeStylePoint === 'cross') {
+        image = new RegularShape({
+          fill: new Fill({
+            color: fillColor,
+          }),
+          stroke: new Stroke({
+            color: color,
+            width: 2,
+          }),
+          points: 4,
+          radius: 10,
+          radius2: 0,
+          angle: 0,
+        });
+      } else if (this.shapeStylePoint === 'x') {
+        image = new RegularShape({
+          fill: new Fill({
+            color: fillColor,
+          }),
+          stroke: new Stroke({
+            color: color,
+            width: 2,
+          }),
+          points: 4,
+          radius: 10,
+          radius2: 0,
+          angle: Math.PI / 4,
+        });
+      }
+
+      return new Style({
+        image: image
+      });
+    },
+
+    initPopup() {
+
+      //Initialisation de la Popup
+
+      console.log('initPopup()');
+
+      //init Array of excluded properties
+      this.bannedKeysArray = this.bannedKeys.split(',');
+
+      /**
+       * Elements that make up the popup.
+       */
+      const container = document.getElementById('popup');
+      this.content_element = document.getElementById('popup-content');
+      const closer = document.getElementById('popup-closer');
+
+      //Create a popup as an overlay
+      this.popupOverlay = new Overlay({
+        element: container,
+        positioning: "top-center",
+        stopEvent: true,
+        autoPan: { //the map automatically pans to make the overlay (popup) entirely visible.
+          animation: {
+            duration: 250,
+          },
+          offset: [0, -10]
+        },
+      });
+
+      // Change the cursor when hovering over a feature in the vector layer
+      this.map.on("pointermove", (evt) => {
+        if (!evt.dragging) {
+          this.map.getTargetElement().style.cursor = this.map.hasFeatureAtPixel(
+              this.map.getEventPixel(evt.originalEvent)
+          )
+              ? "pointer"
+              : "";
+        }
+
+      });
+
+      // Add a click handler to get the clicked feature
+      this.map.on("click", (evt) => {
+        let features = [];
+        this.map.forEachFeatureAtPixel(
+            evt.pixel,
+            (feature, layer) => {
+              features.push(feature);
+            }
+        );
+        if (features.length) {
+          this.createPopup(features, evt.coordinate);
+        } else {
+          this.popupOverlay.setPosition(undefined);
+          closer.blur();
+          return false;
+        }
+
+      });
+
+
+    },
+
+    /**
+     * Build the content of the popup and display it by adding the popupOverlay to the map
+     * reference code reused and modified : safire-components projects (git repo https://gitlab.in2p3.fr/sedoo)
+     * @param features
+     * @param position
+     */
+    createPopup(features, position) {
+      let content = '';
+      let i = 0;
+      features.forEach(feature => {
+        if (feature.id_) { //if feature.id_ is defined (e.g for SAFIRE)
+          content += '<p><h4>' + feature.id_ + '</h4>';
+        } else { //if feature.id_ is not defined (e.g for IAGOS)
+          i++;
+          let featureTitle = this.getFeatureTitleBasedOnGeometryType(feature);
+          if (features.length > 1) {
+            content += '<details>';
+            content += '<summary><b>' + featureTitle + ' ' + i + '</b></summary>';
+          } else {
+            content += '<p><h4>' + featureTitle + '</h4>';
+          }
+        }
+        let keys = this.extractKeysFromValues(feature.values_);
+        keys.forEach(key => {
+
+          //if feature.values_[key] is an Array
+          if (Array.isArray(feature.values_[key])) {
+            content += '<details>';
+            content += '<summary>' + key + ':</summary>'
+            if (feature.values_[key].length) {
+              content += '<ul>'
+              feature.values_[key].forEach(value => {
+                content += '<li>' + value + '</li>';
+              });
+              content += '</ul>';
+            } else {
+              content += '<kbd style="margin-left: 2em;">Empty</kbd>';
+            }
+            content += '</details>';
+          } else {
+            //Display content for a non array value
+            content += '<p>' + key + ':<kbd style="margin-left: 2em;">' + feature.values_[key] + '</kbd></p>';
+          }
+        });
+        if (features.length > 1 && !feature.id_) {
+          content += '</details>';
+        } else {
+          content += '</p>';
+        }
+      });
+
+      this.content_element.innerHTML = content;
+
+      this.popupOverlay.setPosition(position);
+      this.map.addOverlay(this.popupOverlay);
+
+    },
+
+    getFeatureTitleBasedOnGeometryType(feature) {
+      switch (feature.getGeometry().getType()) {
+        case 'Point':
+          return 'Site';
+        case 'LineString':
+        case 'MultiLineString':
+          return 'Trajectory';
+        case 'Polygon':
+          return 'Area';
+        default:
+          return 'Feature';
+      }
+    },
+
+    extractKeysFromValues(values) {
+      let result = [];
+      if (!!values) {
+        Object.keys(values).forEach(value => {
+          if (!this.exactWordIsInArray(value, this.bannedKeysArray)) //this.bannedKeysArray : properties to not display in the popup
+            result.push(value);
+        });
+      }
+      return result;
+    },
+
+    exactWordIsInArray(word, array) {
+      let result = false;
+      if (word && array)
+        array.forEach((item) =>
+            item && item === word ? (result = true) : null
+        );
+      return result;
+    },
+
+    closePopup() {
+      this.map.removeOverlay(this.popupOverlay);
+    }
+
+  }
+
+}
+</script>
+<style scoped>
+
+.ol-popup {
+  position: absolute;
+  background-color: white;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+  bottom: 12px;
+  left: -50px;
+  /*min-width: 280px;*/
+  /*cf. SAFIR */
+  min-width: 450px;
+  max-height: 250px;
+  /*overflow-y: scroll; adding this makes the arrow disappear*/
+  color: black;
+  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+}
+
+#popup-content {
+  max-height: 200px; /* Or whatever height you want */
+  overflow-y: auto; /* Use auto instead of scroll to only show scrollbar when necessary */
+}
+
+
+.ol-popup:after, .ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+}
+
+.ol-popup-closer:after {
+  content: "✖";
+}
+</style>