Merge pull request #5 from eea/config_n_bugs

Config n bugs
eea · Sep 6, 2021 · 175f68a · 175f68a
2 parents 55f51a1 + 65e6452
commit 175f68a
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 28 deletions.
diff --git a/src/components/MapViewer/AreaWidget.jsx b/src/components/MapViewer/AreaWidget.jsx
@@ -3,7 +3,7 @@ import React, { createRef } from 'react';
 //import "./css/ArcgisMap.css";
 import { loadModules } from 'esri-loader';
 
-var Graphic, Extent, WMSLayer, GroupLayer;
+var Graphic, Extent, FeatureLayer, GroupLayer;
 
 class AreaWidget extends React.Component {
   /**
@@ -19,19 +19,21 @@ class AreaWidget extends React.Component {
     this.state = { showMapMenu: false };
     this.menuClass =
       'esri-icon-cursor-marquee esri-widget--button esri-widget esri-interactive';
+    // Enable defaultPopup option to charge popup and highlifght feature
+    this.props.mapViewer.view.popup.defaultPopupTemplateEnabled = true;
   }
 
   loader() {
     return loadModules([
       'esri/Graphic',
       'esri/geometry/Extent',
-      'esri/layers/WMSLayer',
+      'esri/layers/FeatureLayer',
       'esri/layers/GroupLayer',
-    ]).then(([_Graphic, _Extent, _WMSLayer, _GroupLayer]) => {
-      [Graphic, Extent, WMSLayer, GroupLayer] = [
+    ]).then(([_Graphic, _Extent, _FeatureLayer, _GroupLayer]) => {
+      [Graphic, Extent, FeatureLayer, GroupLayer] = [
         _Graphic,
         _Extent,
-        _WMSLayer,
+        _FeatureLayer,
         _GroupLayer,
       ];
     });
@@ -81,23 +83,15 @@ class AreaWidget extends React.Component {
   }
   loadNutsService(id, level) {
     this.clearWidget();
+
     var url =
-      'https://bm-eugis.tk/arcgis/services/CLMS/NUTS_2021/MapServer/WmsServer?';
-    var layer = new WMSLayer({
+      'https://bm-eugis.tk/arcgis/rest/services/CLMS/NUTS_2021/MapServer/0';
+    var layer = new FeatureLayer({
       url: url,
       id: id,
-      featureInfoFormat: 'text/html',
-      featureInfoUrl: url,
-      sublayers: [
-        {
-          name: 0,
-          popupEnabled: true,
-          queryable: true,
-        },
-      ],
-      customParameters: {
-        layerDefs: "{'0':'LEVL_CODE=" + level + "'}",
-      },
+      outFields: ['*'],
+      popupEnabled: true,
+      definitionExpression: 'LEVL_CODE=' + level,
     });
     this.nutsGroupLayer.add(layer);
   }
@@ -138,6 +132,7 @@ class AreaWidget extends React.Component {
     this.setState({ ShowGraphics: drawGraphics });
   }
   clearWidget() {
+    this.props.mapViewer.view.popup.close();
     if (this.state.ShowGraphics) {
       this.state.ShowGraphics.remove();
       this.setState({ ShowGraphics: null });

diff --git a/src/components/MapViewer/BasemapWidget.jsx b/src/components/MapViewer/BasemapWidget.jsx
@@ -16,6 +16,7 @@ class BasemapWidget extends React.Component {
     this.state = { showMapMenu: false };
     this.menuClass =
       'esri-icon-basemap esri-widget--button esri-widget esri-interactive esri-icon-basemap';
+    this.loadFirst = true;
   }
 
   loader() {
@@ -32,7 +33,35 @@ class BasemapWidget extends React.Component {
    * and close actions of the component
    */
   openMenu() {
+    if (this.loadFirst) {
+      document
+        .querySelectorAll('.esri-basemap-gallery__item')[3]
+        .setAttribute('aria-selected', true);
+      document
+        .querySelectorAll('.esri-basemap-gallery__item')[3]
+        .classList.add('esri-basemap-gallery__item--selected');
+      this.loadFirst = false;
+
+      document
+        .querySelector('.esri-basemap-gallery__item-container')
+        .addEventListener(
+          'click',
+          (e) => {
+            document
+              .querySelectorAll('.esri-basemap-gallery__item')[3]
+              .setAttribute('aria-selected', false);
+            document
+              .querySelectorAll('.esri-basemap-gallery__item')[3]
+              .classList.remove('esri-basemap-gallery__item--selected');
+          },
+          {
+            once: true,
+          },
+        );
+    }
+
     if (this.state.showMapMenu) {
+      this.props.mapViewer.setActiveWidget();
       this.basemapGallery.domNode.style.display = 'none';
       this.container.current
         .querySelector('.esri-widget--button')
@@ -41,6 +70,7 @@ class BasemapWidget extends React.Component {
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
     } else {
+      this.props.mapViewer.setActiveWidget(this);
       this.basemapGallery.domNode.classList.add('basemap-gallery-container');
       this.basemapGallery.domNode.style.display = 'block';
       this.container.current
@@ -56,12 +86,12 @@ class BasemapWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
+    if (!this.container.current) return;
     this.basemapGallery = new BasemapGallery({
       view: this.props.view,
       container: this.container.current.querySelector('.basemap-panel'),
     });
     this.props.view.ui.add(this.container.current, 'top-right');
-    //this.props.view.ui.add(this.basemapGallery, 'top-right');
   }
   /**
    * This method renders the component

diff --git a/src/components/MapViewer/LegendWidget.jsx b/src/components/MapViewer/LegendWidget.jsx
@@ -33,7 +33,6 @@ class LegendWidget extends React.Component {
    */
   openMenu() {
     if (this.state.showMapMenu) {
-      //this.props.mapViewer.setActiveWidget();
       this.container.current.querySelector('.legend-panel').style.display =
         'none';
       this.container.current
@@ -43,7 +42,6 @@ class LegendWidget extends React.Component {
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
     } else {
-      //this.props.mapViewer.setActiveWidget(this);
       this.container.current
         .querySelector('.esri-widget--button')
         .classList.replace('esri-icon-legend', 'esri-icon-right-arrow');

diff --git a/src/components/MapViewer/MapViewer.jsx b/src/components/MapViewer/MapViewer.jsx
@@ -9,6 +9,7 @@ import AreaWidget from './AreaWidget';
 import ScaleWidget from './ScaleWidget';
 import LegendWidget from './LegendWidget';
 import MenuWidget from './MenuWidget';
+//import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom;
 
 class MapViewer extends React.Component {
@@ -17,6 +18,12 @@ class MapViewer extends React.Component {
    * @param {*} props
    */
   constructor(props) {
+    /* --> this is a code to fetch for the URL
+    console.log(props);
+    fetch(props.url)
+    .then(response =>{console.log(response); response.json()})
+    .then(data => console.log(data)); <-- */
+
     super(props);
     //we create a reference to the DOM element that will
     //be later mounted. We will use the reference that we

diff --git a/src/components/MapViewer/MenuWidget.jsx b/src/components/MapViewer/MenuWidget.jsx
@@ -38,7 +38,6 @@ class MenuWidget extends React.Component {
    */
   openMenu() {
     if (this.state.showMapMenu) {
-      this.props.mapViewer.setActiveWidget();
       this.container.current.querySelector('#tabcontainer').style.display =
         'none';
       this.container.current.querySelector('#paneles').style.display = 'none';
@@ -50,7 +49,6 @@ class MenuWidget extends React.Component {
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
     } else {
-      this.props.mapViewer.setActiveWidget(this);
       this.container.current.querySelector('#tabcontainer').style.display =
         'block';
       this.container.current.querySelector('#paneles').style.display = 'block';
@@ -418,11 +416,15 @@ class MenuWidget extends React.Component {
    * just in the order they were added to map
    */
   activeLayersAsArray() {
+    var messageLayers = document.querySelector('#nolayers_message');
     let activeLayersArray = [];
     for (var i in this.activeLayersJSON) {
       activeLayersArray.push(this.activeLayersJSON[i]);
     }
 
+    if (!activeLayersArray.length) {
+      messageLayers && (messageLayers.style.display = 'block');
+    } else messageLayers && (messageLayers.style.display = 'none');
     return activeLayersArray.reverse();
   }
 
@@ -703,6 +705,9 @@ class MenuWidget extends React.Component {
               >
                 <div id="active_layers" className="map-active-layers">
                   {this.activeLayersAsArray()}
+                  <span className="message" id="nolayers_message">
+                    No layers selected
+                  </span>
                 </div>
               </div>
             </div>

diff --git a/src/components/MapViewer/css/ArcgisMap.css b/src/components/MapViewer/css/ArcgisMap.css
@@ -5,6 +5,14 @@
   height: 100%;
 }
 
+.map-container .esri-component {
+  pointer-events: none !important;
+}
+
+.map-container .esri-component > div {
+  pointer-events: auto;
+}
+
 .loading {
   position: absolute;
   top: 50%;
@@ -21,8 +29,8 @@
   margin: 0;
 }
 
-.esri-view .esri-view-surface--inset-outline:focus::after {
-  outline: none !important;
+.esri-view .esri-view-surface {
+  outline: none;
 }
 
 .esri-component.esri-zoom.esri-widget {
@@ -79,7 +87,9 @@
 .measurement-buttons {
   display: flex;
   justify-content: space-evenly;
+  border-bottom: solid 1px #adb0b8;
   background: white;
+  white-space: nowrap;
 }
 
 .esri-measurement p {
@@ -367,6 +377,7 @@
   justify-content: space-between;
   padding: 1rem;
   border-bottom: solid 1px lightgray;
+  cursor: move;
 }
 
 .active-layer-options {
@@ -441,10 +452,15 @@
 }
 
 /* Legend*/
+.legend-container {
+  display: flex;
+}
+
 .legend-panel {
   display: none;
+  max-height: 260px;
 }
 
-.legend-container {
-  display: flex;
+.legend-panel.esri-legend {
+  overflow: auto;
 }