@eeacms/volto-arcgis-block 0.1.13 → 0.1.17

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -0,0 +1,81 @@
+import React, { createRef } from 'react';
+import { loadModules } from 'esri-loader';
+var TimeSlider;
+
+class TimesliderWidget extends React.Component {
+  /**
+   * Creator of the TimeSlider widget class
+   * @param {*} props
+   */
+  constructor(props) {
+    super(props);
+    //We create a reference to a DOM element to be mounted
+    this.container = createRef();
+    //Initially, we set the state of the component to
+    //not be showing the basemap panel
+    this.state = { showMapMenu: false };
+    this.map = this.props.map;
+    this.layer = this.props.layer;
+  }
+
+  loader() {
+    return loadModules([
+      'esri/widgets/TimeSlider',
+      'esri/layers/WMSLayer',
+    ]).then(([_TimeSlider]) => {
+      [TimeSlider] = [_TimeSlider];
+    });
+  }
+
+  /**
+   * This method is executed after the rener method is executed
+   */
+  async componentDidMount() {
+    await this.loader();
+    this.TimesliderWidget = new TimeSlider({
+      view: this.props.view,
+      container: document.querySelector('.timeslider-panel'),
+      timeVisible: true,
+      mode: this.props.download ? 'time-window' : 'instant',
+      loop: false,
+      values: this.props.time.start
+        ? this.props.download
+          ? [new Date(this.props.time.start), new Date(this.props.time.end)]
+          : [new Date(this.props.time.start)]
+        : null,
+    });
+    this.props.view.ui.add(this.container.current, 'bottom-right');
+    this.container.current.style.display = 'block';
+
+    this.props.view.whenLayerView(this.layer).then((lv) => {
+      this.TimesliderWidget.fullTimeExtent = this.layer.timeInfo.fullTimeExtent;
+    });
+
+    this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
+      let start = new Date(timeExtent.start).getTime();
+      let end = new Date(timeExtent.end).getTime();
+      this.props.time.elem.setAttribute('time-start', start);
+      this.props.time.elem.setAttribute('time-end', end);
+      if (this.props.download) {
+        this.props.time.dataset.setAttribute('time-start', start);
+        this.props.time.dataset.setAttribute('time-end', end);
+      }
+    });
+  }
+
+  /**
+   * This method renders the component
+   * @returns jsx
+   */
+  render() {
+    return (
+      <>
+        <div ref={this.container} className="timeslider-container">
+          <div className="timeslider-panel"></div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default TimesliderWidget;

package/src/components/MapViewer/css/ArcgisMap.css

@@ -38,7 +38,6 @@
 }
 
 .esri-component.esri-zoom.esri-widget {
-  margin-bottom: 0;
   background: none;
   box-shadow: none;
 }
@@ -83,6 +82,11 @@
   box-shadow: none !important;
 }
 
+.basemap-panel.esri-basemap-gallery {
+  width: 300px;
+  max-height: 260px;
+}
+
 .esri-basemap-gallery {
   display: none;
   margin: 0 !important;
@@ -92,10 +96,6 @@
   margin: 0;
 }
 
-.esri-view-height-small .esri-ui-corner .esri-widget--panel-height-only {
-  max-height: 260px;
-}
-
 /* Measure */
 .measurement-container {
   display: flex;
@@ -104,12 +104,13 @@
 
 .measurement-container .measurement-area.esri-measurement {
   display: block;
-  width: 225px;
   flex-direction: column;
 }
 
 .measurement-panel {
   display: none;
+  width: 300px;
+  max-height: 260px;
 }
 
 .measurement-buttons {
@@ -192,7 +193,8 @@
 
 .area-panel {
   display: none;
-  width: 260px;
+  width: 300px;
+  max-height: 260px;
   padding: 1rem;
   background-color: white;
   font-size: 1rem;
@@ -210,14 +212,17 @@
 
 /* Left menu */
 .map-menu {
+  position: relative;
   display: none;
   width: 450px;
   font-size: 1rem;
 }
 
 .map-menu.tab-container .tab {
-  display: inline-block;
+  display: flex !important;
   width: 50%;
+  align-items: center;
+  justify-content: center;
   padding: 1rem;
   border-bottom: solid 4px white;
   margin: 0;
@@ -226,6 +231,7 @@
   cursor: pointer;
   font-weight: bold;
   text-align: center;
+  white-space: normal;
 }
 
 .map-menu.tab-container .tab-selected {
@@ -234,6 +240,9 @@
 }
 
 .map-menu.tab-container .tabs {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
   border-bottom: solid 1px #dadada;
   background-color: white;
   white-space: nowrap;
@@ -294,6 +303,14 @@
   }
 }
 
+.map-menu .login-block {
+  width: 100%;
+  margin: 0;
+  background: none;
+  float: none;
+  font-size: 0.85rem;
+}
+
 .map-menu.tab-container .panel-selected {
   display: block;
 }
@@ -450,6 +467,12 @@
   cursor: move;
 }
 
+.locked {
+  cursor: auto;
+  opacity: 0.3;
+  pointer-events: none;
+}
+
 .active-layer-options {
   white-space: nowrap;
 }
@@ -519,7 +542,7 @@
 .map-download-buttons {
   display: flex;
   justify-content: space-between;
-  margin-top: 1rem;
+  margin: 0 1rem;
 }
 
 .map-download-block .ccl-form-group:not(:first-of-type) {
@@ -531,6 +554,15 @@
   height: 100%;
 }
 
+.ui.floating.message {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  transform: translate(0, 4rem);
+}
+
 /* Legend*/
 .legend-container {
   display: flex;
@@ -545,3 +577,12 @@
 .legend-panel.esri-legend {
   overflow: auto;
 }
+
+/* Modal */
+.ui.modal {
+  margin: 0 !important;
+}
+
+.ui.modal p {
+  font-size: 1rem;
+}

package/src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -23,6 +23,11 @@ class InfoWidget extends React.Component {
    * @returns lateralMenu DOM
    */
   showUseCase(UseCase) {
+    let responsibleOrganizationOrPerson = UseCase.Responsible_organisation
+      ? UseCase.Responsible_organisation
+      : UseCase.Contact_person_name_
+      ? UseCase.Contact_person_name_
+      : '';
     return (
       <>
         <div className="use-cases-products-title">Use case detail</div>
@@ -37,12 +42,7 @@ class InfoWidget extends React.Component {
             ></span>
           </div>
           <div className="use-case-detail-image">
-            <img
-              src={
-                'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-              }
-              alt="Placeholder"
-            />
+            <img src={UseCase.Link_to_image} alt="Use Case" />
           </div>
           <div className="use-case-detail-content">
             <div className="use-case-detail-product">
@@ -55,13 +55,14 @@ class InfoWidget extends React.Component {
               <span>{UseCase.Use_case_topics}</span>
               <span>{UseCase.Use_case_submitting_production_year}</span>
               <span>{UseCase.Spatial_coverage}</span>
+              <span>{responsibleOrganizationOrPerson}</span>
             </div>
             <div className="use-case-detail-description">
               <p>{UseCase.Use_case_summary}</p>
               {UseCase.Links_to_web_sites && (
                 <p>
-                  For further information{' '}
-                  <a href={UseCase.Links_to_web_sites}>here</a>.
+                  For further information
+                  <a href={UseCase.Links_to_web_sites.split(' ')[0]}> here</a>.
                 </p>
               )}
             </div>
@@ -77,7 +78,12 @@ class InfoWidget extends React.Component {
    * @returns useCasesRegion
    */
   getDataBrief(data) {
-    const children = data.map((val) => {
+    let children = data.map((val) => {
+      let responsibleOrganizationOrPerson = val.Responsible_organisation
+        ? val.Responsible_organisation
+        : val.Contact_person_name_
+        ? val.Contact_person_name_
+        : '';
       return (
         <>
           <div
@@ -98,6 +104,7 @@ class InfoWidget extends React.Component {
               <span>{val.Use_case_topics}</span>
               <span>{val.Use_case_submitting_production_year}</span>
               <span>{val.Spatial_coverage}</span>
+              <span>{responsibleOrganizationOrPerson}</span>
             </div>
           </div>
         </>
@@ -113,7 +120,7 @@ class InfoWidget extends React.Component {
    * @returns useCasesDOM
    */
   showBrief(selectedRegion) {
-    const regionFeatures = [];
+    let regionFeatures = [];
     if (mapViewer.state.useCaseLevel === 2) {
       for (let feature in this.features) {
         if (this.features[feature].attributes.Region === selectedRegion) {
@@ -183,8 +190,8 @@ class InfoWidget extends React.Component {
    * Transfrom raw data to ordered data by Service products
    */
   proccessDataSummary() {
-    const serviceProducts = this.getDifferentproductUsed(this.features);
-    const elements = [];
+    let serviceProducts = this.getDifferentproductUsed(this.features);
+    let elements = [];
 
     for (let serviceProduct in serviceProducts) {
       processedData[serviceProducts[serviceProduct]] = [];
@@ -208,7 +215,7 @@ class InfoWidget extends React.Component {
    * @returns lateralMenuDOM
    */
   getDataSummary(data, Copernicus_Land_Monitoring_Service_products_used) {
-    const children = this.getDataBrief(data);
+    let children = this.getDataBrief(data);
 
     return (
       <>
@@ -247,7 +254,7 @@ class InfoWidget extends React.Component {
    */
   setDOMSummary() {
     this.proccessDataSummary();
-    const DOMElements = [];
+    let DOMElements = [];
     for (let product_use_name in processedData)
       DOMElements.push(
         this.getDataSummary(processedData[product_use_name], product_use_name),
@@ -326,17 +333,6 @@ class InfoWidget extends React.Component {
     }
   }
 
-  /**
-   * It highlights the information displayed for a use case on the infoWidget.
-   * */
-  highligtInfo() {}
-
-  /**
-   * Highlights the point on the map corresponding to the use case
-   * @param {*} coords
-   */
-  highligtPoint(coords) {}
-
   /**
    * This method will return the corresponding lateral menu depending on layers.
    * @returns HTML
@@ -350,10 +346,10 @@ class InfoWidget extends React.Component {
       case 3:
         return this.showBrief(mapViewer.state.selectedUseCases);
       case 4:
-        const title = mapViewer.state.selectedUseCase.Use_case_title;
-        const bbox = mapViewer.state.selectedUseCase.BBOX;
-        const region = mapViewer.state.selectedUseCase.Region;
-        const country = mapViewer.state.selectedUseCase.Spatial_coverage;
+        let title = mapViewer.state.selectedUseCase.Use_case_title;
+        let bbox = mapViewer.state.selectedUseCase.BBOX;
+        let region = mapViewer.state.selectedUseCase.Region;
+        let country = mapViewer.state.selectedUseCase.Spatial_coverage;
         navigationControl.navigateToLocation(
           bbox,
           title,
@@ -361,9 +357,11 @@ class InfoWidget extends React.Component {
           country,
           layerSpatial,
         );
-        document
-          .querySelector('.use-cases-products-list')
-          .scrollTo({ top: 0, behavior: 'smooth' });
+        try {
+          document
+            .querySelector('.use-cases-products-list')
+            .scrollTo({ top: 0, behavior: 'smooth' });
+        } catch {}
         return this.showUseCase(mapViewer.state.selectedUseCase);
       default:
         return 0;

package/src/components/UseCasesMapViewer/LayerControl.jsx

@@ -3,6 +3,8 @@ class LayerControl {
   constructor(props) {
     this.map = props.map;
     this.view = props.view;
+    this.worldDimensions = props.worldDimensions;
+    this.maxZoom = props.maxZoom;
     mapViewer = props.mapViewer;
     FeatureLayer = props.FeatureLayer;
     Extent = props.Extent;
@@ -14,7 +16,7 @@ class LayerControl {
    * @returns FeatureLayer
    */
   createLayer(layerInfo) {
-    const newLayer = new FeatureLayer({
+    let newLayer = new FeatureLayer({
       url: layerInfo.url,
       id: layerInfo.id,
       outFields: ['*'],
@@ -37,7 +39,7 @@ class LayerControl {
    * @param {String} id
    */
   showLayer(id) {
-    const items = this.map.layers.items;
+    let items = this.map.layers.items;
     for (let layer in items)
       items[layer].id === id && (items[layer].visible = true);
   }
@@ -47,7 +49,7 @@ class LayerControl {
    * @param {String} id
    */
   hideLayer(id) {
-    const items = this.map.layers.items;
+    let items = this.map.layers.items;
     for (let layer in items) {
       items[layer].id === id && (items[layer].visible = false);
     }
@@ -58,7 +60,7 @@ class LayerControl {
    * @param {String} id
    */
   removeLayer(id) {
-    const items = this.map.layers.items;
+    let items = this.map.layers.items;
     for (let layer in items)
       items[layer].id === id && this.map.remove(items[layer]);
   }
@@ -68,39 +70,45 @@ class LayerControl {
    * @param {Array} boundingBox
    */
   zoomToExtent(boundingBox) {
-    const newExtent = new Extent(
+    let newExtent = new Extent(
       boundingBox[0],
       boundingBox[1],
       boundingBox[2],
       boundingBox[3],
     );
-    const zoomOnBounding = this.getBoundsZoomLevel(boundingBox);
+    let zoomOnBounding = this.getBoundsZoomLevel(boundingBox);
     this.view.zoom = zoomOnBounding;
     this.view.extent = newExtent;
   }
 
   getBoundsZoomLevel(bounds) {
-    const mapDim = { height: this.view.height, width: this.view.width };
-    const WORLD_DIM = { height: 256, width: 256 };
-    const ZOOM_MAX = 5;
+    let mapDim = { height: this.view.height, width: this.view.width };
 
-    const ne = [bounds[2], bounds[3]];
-    const sw = [bounds[0], bounds[1]];
+    let ne = [bounds[2], bounds[3]];
+    let sw = [bounds[0], bounds[1]];
 
-    const latFraction = (this.latRad(ne[1]) - this.latRad(sw[1])) / Math.PI;
+    let latFraction = (this.latRad(ne[1]) - this.latRad(sw[1])) / Math.PI;
 
-    const lngDiff = ne[0] - sw[0];
-    const lngFraction = (lngDiff < 0 ? lngDiff + 360 : lngDiff) / 360;
+    let lngDiff = ne[0] - sw[0];
+    let lngFraction = (lngDiff < 0 ? lngDiff + 360 : lngDiff) / 360;
 
-    const latZoom = this.zoom(mapDim.height, WORLD_DIM.height, latFraction);
-    const lngZoom = this.zoom(mapDim.width, WORLD_DIM.width, lngFraction);
+    let latZoom = this.zoom(
+      mapDim.height,
+      this.worldDimensions.height,
+      latFraction,
+    );
+    let lngZoom = this.zoom(
+      mapDim.width,
+      this.worldDimensions.width,
+      lngFraction,
+    );
 
-    return Math.min(latZoom, lngZoom, ZOOM_MAX);
+    return Math.min(latZoom, lngZoom, this.zoomMax);
     //TODO calculate the corresponding level of zoom automatically
   }
   latRad(lat) {
-    const sin = Math.sin((lat * Math.PI) / 180);
-    const radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
+    let sin = Math.sin((lat * Math.PI) / 180);
+    let radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
     return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
   }
 
@@ -115,11 +123,11 @@ class LayerControl {
    * @returns
    */
   async getPointInfo(screenPoint, options) {
-    const pointInformation = await this.view
+    let pointInformation = await this.view
       .hitTest(screenPoint, options && options)
       .then(function (response) {
         if (response.results.length) {
-          const graphic = response.results.filter(function (result) {
+          let graphic = response.results.filter(function (result) {
             return result.graphic;
           });
           return graphic[0].graphic.attributes;
@@ -129,7 +137,7 @@ class LayerControl {
   }
 
   getRegionInfo(region, callback) {
-    const xmlhttp = new XMLHttpRequest();
+    let xmlhttp = new XMLHttpRequest();
     const url = `${mapViewer.spatialConfig.url}/query?where=Region+%3D+%27${region}%27&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&having=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&historicMoment=&returnDistinctValues=false&resultOffset=&resultRecordCount=&queryByDistance=&returnExtentOnly=false&datumTransformation=&parameterValues=&rangeValues=&quantizationParameters=&featureEncoding=esriDefault&f=pjson`;
     xmlhttp.onreadystatechange = () => {
       if (xmlhttp.readyState === 4 && xmlhttp.status === 200)
@@ -140,7 +148,7 @@ class LayerControl {
   }
 
   checkIfMorePoints(latLon, callback) {
-    const xmlhttp = new XMLHttpRequest();
+    let xmlhttp = new XMLHttpRequest();
     const url = `${mapViewer.spatialConfig.url}/query?where=Latitude%3D+${latLon.latitude}+AND+Longitude%3D+${latLon.longitude}&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&having=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&historicMoment=&returnDistinctValues=false&resultOffset=&resultRecordCount=&queryByDistance=&returnExtentOnly=false&datumTransformation=&parameterValues=&rangeValues=&quantizationParameters=&featureEncoding=esriDefault&f=pjson`;
     xmlhttp.onreadystatechange = () => {
       if (xmlhttp.readyState === 4 && xmlhttp.status === 200)
@@ -154,6 +162,33 @@ class LayerControl {
     return JSON.parse(xmlhttp.responseText);
   }
 
+  /**
+   * It highlights the information displayed for a use case on the infoWidget.
+   * */
+  highlightInfo(response) {
+    if (response.results.length > 1) {
+      if (
+        response.results[0].graphic.geometry !== null &&
+        mapViewer.popupOnce
+      ) {
+        mapViewer.popupOnce = false;
+        document.querySelector('.map').style.cursor = 'pointer';
+        document
+          .querySelector(
+            '#use_case_' + response.results[0].graphic.attributes.OBJECTID,
+          )
+          .classList.add('selected');
+      }
+    } else {
+      mapViewer.popupOnce = true;
+      document.querySelector('.map').style.cursor = '';
+      if (document.querySelector('.use-case-element.selected'))
+        document
+          .querySelector('.use-case-element.selected')
+          .classList.remove('selected');
+    }
+  }
+
   /**
    * Order retreived features by Service product name
    * @param {Object} features

package/src/components/UseCasesMapViewer/LegendWidget.jsx

@@ -0,0 +1,122 @@
+import React, { createRef } from 'react';
+//import "@arcgis/core/assets/esri/css/main.css";
+//import "./css/ArcgisMap.css";
+import { loadModules } from 'esri-loader';
+var Legend;
+
+class LegendWidget extends React.Component {
+  /**
+   * Creator of the Basemap widget class
+   * @param {*} props
+   */
+  constructor(props) {
+    super(props);
+    this.view = props.view;
+    this.mapViewer = props.mapViewer;
+    this.container = createRef();
+    this.menuClass =
+      'esri-icon-legend esri-widget--button esri-widget esri-interactive';
+  }
+
+  loader() {
+    return loadModules(['esri/widgets/Legend']).then(([_Legend]) => {
+      Legend = _Legend;
+    });
+  }
+
+  /**
+   * Method that will be invoked when the
+   * button is clicked. It controls the open
+   * and close actions of the component
+   */
+  openMenu() {
+    if (this.mapViewer.state.showMapMenu) {
+      this.container.current.querySelector('.legend-panel').style.display =
+        'none';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.replace('esri-icon-right-arrow', 'esri-icon-legend');
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.mapViewer.setState({ showMapMenu: false });
+    } else {
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.replace('esri-icon-legend', 'esri-icon-right-arrow');
+      this.container.current.querySelector('.legend-panel').style.display =
+        'block';
+
+      this.container.current.children[1].querySelector(
+        '.esri-legend__service-label',
+      ).textContent = 'Use Cases Coverage Legend';
+
+      try {
+        this.container.current.children[1]
+          .querySelector('.esri-legend__layer-caption')
+          .remove();
+      } catch {}
+      let legendCells = this.container.current.children[1].querySelectorAll(
+        '.esri-legend__layer-cell--info',
+      );
+
+      for (let i = 0; i < legendCells.length; i++) {
+        let currentValue = legendCells[i].textContent;
+        switch (currentValue.toLowerCase()) {
+          case 'eu':
+            legendCells[i].textContent = 'EU27+UK';
+            break;
+          case 'eea':
+            legendCells[i].textContent = 'EEA 38';
+            break;
+          case 'others':
+            legendCells[i].textContent = 'Country';
+            break;
+          default:
+            break;
+        }
+      }
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.mapViewer.setState({ showMapMenu: true });
+    }
+  }
+  /**
+   * This method is executed after the rener method is executed
+   */
+  async componentDidMount() {
+    await this.loader();
+    this.view.ui.add(this.container.current, 'top-right');
+    this.LegendWidget = new Legend({
+      view: this.view,
+      container: document.querySelector('.legend-panel'),
+    });
+  }
+  /**
+   * This method renders the component
+   * @returns jsx
+   */
+  render() {
+    return (
+      <>
+        <div
+          hidden={this.mapViewer.state.useCaseLevel === 1}
+          ref={this.container}
+          className="legend-container"
+        >
+          <div
+            className={this.menuClass}
+            id="legend_button"
+            title="Legend"
+            onClick={this.openMenu.bind(this)}
+            onKeyDown={this.openMenu.bind(this)}
+            tabIndex="0"
+            role="button"
+          ></div>
+          <div className="legend-panel"></div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default LegendWidget;

package/src/components/UseCasesMapViewer/NavigationControl.jsx

@@ -36,7 +36,7 @@ class NavigationControl extends React.Component {
    * @param {FeatureLayer} layer
    */
   navigateToRegion(bBox, region, layer) {
-    const boundingBox = this.clearBBOX(bBox);
+    let boundingBox = this.clearBBOX(bBox);
     this.layerControl.zoomToExtent(boundingBox);
     this.layerControl.hideLayer(layerRegion.id);
     this.layerControl.showLayer(layerSpatial.id);
@@ -64,7 +64,7 @@ class NavigationControl extends React.Component {
    * @returns Array BBox
    */
   clearBBOX(stringBbox) {
-    const floatBbox = [];
+    let floatBbox = [];
     // typeof stringBbox !== 'string' && (stringBbox = stringBbox.toString());
     stringBbox = stringBbox.replace('[', '');
     stringBbox = stringBbox.replace(']', '');