@eeacms/volto-arcgis-block - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

CHANGELOG.md

@@ -7,4 +7,26 @@ ### Changelog
 
+#### [0.1.2](https://github.com/eea/volto-arcgis-block/compare/0.1.1...0.1.2)
+
+- Config n bugs [`#5`](https://github.com/eea/volto-arcgis-block/pull/5)
+- Map styles [`#4`](https://github.com/eea/volto-arcgis-block/pull/4)
+- check if url parameter is empty [`55f51a1`](https://github.com/eea/volto-arcgis-block/commit/55f51a135a9b6041d29fcd3d140f7eeb4b6881e8)
+- Bug fixing [`65e6452`](https://github.com/eea/volto-arcgis-block/commit/65e645284f05cd754d3611fc1b4cb391c4a666d5)
+- Bug fixing [`9283523`](https://github.com/eea/volto-arcgis-block/commit/9283523a0934b0f872e003d9bf87028b7689eafe)
+- Bug fixing [`6712fba`](https://github.com/eea/volto-arcgis-block/commit/6712fba55a7ad63742abcfa0558409f016d56ac3)
+- Bug fixing [`ed87b10`](https://github.com/eea/volto-arcgis-block/commit/ed87b10aa86bea0553ea247bf8d0d52bb1b86121)
+- Some improvements [`cad5529`](https://github.com/eea/volto-arcgis-block/commit/cad55295ad9ee0c295579f15e4df7cbe9810e2a8)
+- Bug fixing [`ded397d`](https://github.com/eea/volto-arcgis-block/commit/ded397d406935e5e616b308e4d7511c0df9a74be)
+- Bug fixing [`0c583b1`](https://github.com/eea/volto-arcgis-block/commit/0c583b156651a7c567ef9db1771c8d421567e8a6)
+- Bug fixing [`9ccd086`](https://github.com/eea/volto-arcgis-block/commit/9ccd086d7c8f8d84173f966b686a6f7ec13308aa)
+- Bug fixing [`46ffd09`](https://github.com/eea/volto-arcgis-block/commit/46ffd09fa653b8c7b83b86b77e3c1bdc410dc5b0)
+- ESLint [`a9ed3ba`](https://github.com/eea/volto-arcgis-block/commit/a9ed3ba08b52d20eeb6b0240aa31e9c4bdb9c6f0)
+- UseCases block [`f8f6e1f`](https://github.com/eea/volto-arcgis-block/commit/f8f6e1f9d2a90e8e26dee63091ab16b2441a0e00)
+- dynamic dataset api url [`872c1f5`](https://github.com/eea/volto-arcgis-block/commit/872c1f52d57ed41b0a982594e083fea95957033b)
+- Bug fixing [`b5bf029`](https://github.com/eea/volto-arcgis-block/commit/b5bf0296c53cfb7a512b989f246300f06afe5ed9)
+
 #### [0.1.1](https://github.com/eea/volto-arcgis-block/compare/0.1.0...0.1.1)
 
+> 26 July 2021
+
+- Fix files generated by template [`#2`](https://github.com/eea/volto-arcgis-block/pull/2)
 - Integration [`#3`](https://github.com/eea/volto-arcgis-block/pull/3)
@@ -11,0 +33,0 @@ - Sync with eea template [`#1`](https://github.com/eea/volto-arcgis-block/pull/1)

package.json

 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "volto-arcgis-block: Volto add-on",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/components/index.js

 import MapViewer from './MapViewer/MapViewer';
-import Edit from './Blocks/Edit';
-import View from './Blocks/View';
+import MapViewerEdit from './Blocks/MapViewer/Edit';
+import MapViewerView from './Blocks/MapViewer/View';
 
-export { MapViewer, Edit, View };
+import UseCasesMapViewerEdit from './Blocks/UseCasesMapViewer/Edit';
+import UseCasesMapViewerView from './Blocks/UseCasesMapViewer/View';
+
+export {
+  MapViewer,
+  MapViewerEdit,
+  MapViewerView,
+  UseCasesMapViewerEdit,
+  UseCasesMapViewerView,
+};

src/components/MapViewer/AreaWidget.jsx

@@ -6,3 +6,3 @@ import React, { createRef } from 'react';
 
-var Graphic, Extent, WMSLayer, GroupLayer;
+var Graphic, Extent, FeatureLayer, GroupLayer;
 
@@ -23,2 +23,4 @@ class AreaWidget extends React.Component {
       '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;
   }
@@ -30,9 +32,9 @@
       '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,
@@ -87,19 +89,11 @@ ];
     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,
     });
@@ -145,2 +139,3 @@ this.nutsGroupLayer.add(layer);
   clearWidget() {
+    this.props.mapViewer.view.popup.close();
     if (this.state.ShowGraphics) {
@@ -147,0 +142,0 @@ this.state.ShowGraphics.remove();

src/components/MapViewer/BasemapWidget.jsx

@@ -13,3 +13,3 @@ import React, { createRef } from 'react';
     //We create a reference to a DOM element to be mounted
-    this.basemaps = createRef();
+    this.container = createRef();
     //Initially, we set the state of the component to
@@ -20,2 +20,3 @@ //not be showing the basemap panel
       'esri-icon-basemap esri-widget--button esri-widget esri-interactive esri-icon-basemap';
+    this.loadFirst = true;
   }
@@ -37,8 +38,35 @@
   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.basemaps.current.classList.replace(
-        'esri-icon-right-arrow',
-        'esri-icon-basemap',
-      );
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.replace('esri-icon-right-arrow', 'esri-icon-basemap');
       // By invoking the setState, we notify the state we want to reach
@@ -48,8 +76,8 @@ // and ensure that the component is rendered again
     } else {
+      this.props.mapViewer.setActiveWidget(this);
       this.basemapGallery.domNode.classList.add('basemap-gallery-container');
       this.basemapGallery.domNode.style.display = 'block';
-      this.basemaps.current.classList.replace(
-        'esri-icon-basemap',
-        'esri-icon-right-arrow',
-      );
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.replace('esri-icon-basemap', 'esri-icon-right-arrow');
       // By invoking the setState, we notify the state we want to reach
@@ -65,7 +93,8 @@ // and ensure that the component is rendered again
     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.basemaps.current, 'top-right');
-    this.props.view.ui.add(this.basemapGallery, 'top-right');
+    this.props.view.ui.add(this.container.current, 'top-right');
   }
@@ -79,12 +108,15 @@ /**
       <>
-        <div
-          ref={this.basemaps}
-          className={this.menuClass}
-          id="map_basemap_button"
-          role="button"
-          title="Basemap gallery"
-          onClick={this.openMenu.bind(this)}
-          onKeyDown={() => this.openMenu.bind(this)}
-          tabIndex={0}
-        ></div>
+        <div ref={this.container} className="basemap-container">
+          <div
+            // ref={this.basemaps}
+            className={this.menuClass}
+            id="map_basemap_button"
+            role="button"
+            title="Basemap gallery"
+            onClick={this.openMenu.bind(this)}
+            onKeyDown={() => this.openMenu.bind(this)}
+            tabIndex={0}
+          ></div>
+          <div className="basemap-panel"></div>
+        </div>
       </>
@@ -91,0 +123,0 @@ );

src/components/MapViewer/LegendWidget.jsx

@@ -36,3 +36,2 @@ import React, { createRef } from 'react';
     if (this.state.showMapMenu) {
-      //this.props.mapViewer.setActiveWidget();
       this.container.current.querySelector('.legend-panel').style.display =
@@ -47,3 +46,2 @@ 'none';
     } else {
-      //this.props.mapViewer.setActiveWidget(this);
       this.container.current
@@ -50,0 +48,0 @@ .querySelector('.esri-widget--button')

src/components/MapViewer/MapViewer.jsx

@@ -12,2 +12,3 @@ import React, { createRef } from 'react';
 import MenuWidget from './MenuWidget';
+//import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom;
@@ -21,2 +22,8 @@
   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);
@@ -31,2 +38,3 @@ //we create a reference to the DOM element that will
     this.compCfg = this.props.cfg.Components;
+    this.url = this.props.cfg.url || ''; // Get url or default
     this.map = null;
@@ -33,0 +41,0 @@ this.id = props.id;

src/components/MapViewer/MenuWidget.jsx

@@ -41,3 +41,2 @@ import React, { createRef } from 'react';
     if (this.state.showMapMenu) {
-      this.props.mapViewer.setActiveWidget();
       this.container.current.querySelector('#tabcontainer').style.display =
@@ -54,3 +53,2 @@ 'none';
     } else {
-      this.props.mapViewer.setActiveWidget(this);
       this.container.current.querySelector('#tabcontainer').style.display =
@@ -148,3 +146,3 @@ 'block';
     var inheritedIndexProduct = inheritedIndex + '_' + prodIndex;
-    var checkProduct = 'map_product_' + inheritedIndex;
+    var checkProduct = 'map_product_' + inheritedIndexProduct;
     for (var i in product.Datasets) {
@@ -196,3 +194,3 @@ datasets.push(
                   className="ccl-form-check-label"
-                  htmlFor={'map_product_' + inheritedIndexProduct}
+                  htmlFor={checkProduct}
                   key={'f' + prodIndex}
@@ -209,3 +207,3 @@ >
             className="ccl-form map-menu-products-container"
-            id={'datasets_container' + prodIndex}
+            id={'datasets_container_' + inheritedIndexProduct}
           >
@@ -244,3 +242,3 @@ {datasets}
     var inheritedIndexDataset = inheritedIndex + '_' + datIndex;
-    var checkIndex = 'map_dataset_' + inheritedIndex;
+    var checkIndex = 'map_dataset_' + inheritedIndexDataset;
 
@@ -266,3 +264,3 @@ for (var i in dataset.Layer) {
         className="ccl-form-group map-menu-dataset"
-        id={'dataset_ ' + inheritedIndexDataset}
+        id={'dataset_' + inheritedIndexDataset}
         key={'a' + datIndex}
@@ -285,3 +283,3 @@ >
             className="ccl-form-check-label"
-            htmlFor={'map_dataset_' + inheritedIndexDataset}
+            htmlFor={checkIndex}
             key={'d' + datIndex}
@@ -429,2 +427,3 @@ >
   activeLayersAsArray() {
+    var messageLayers = document.querySelector('#nolayers_message');
     let activeLayersArray = [];
@@ -435,2 +434,5 @@ for (var i in this.activeLayersJSON) {
 
+    if (!activeLayersArray.length) {
+      messageLayers && (messageLayers.style.display = 'block');
+    } else messageLayers && (messageLayers.style.display = 'none');
     return activeLayersArray.reverse();
@@ -497,4 +499,14 @@ }
           <span className="active-layer-position" key={'d_' + elem.id}>
-            <FontAwesomeIcon icon={['fas', 'arrow-up']} />
-            <FontAwesomeIcon icon={['fas', 'arrow-down']} />
+            <span class="active-layer-position-down">
+              <FontAwesomeIcon
+                className="map-menu-icon"
+                icon={['fas', 'long-arrow-alt-up']}
+              />
+            </span>
+            <span class="active-layer-position-up">
+              <FontAwesomeIcon
+                className="map-menu-icon"
+                icon={['fas', 'long-arrow-alt-down']}
+              />
+            </span>
           </span>
@@ -511,3 +523,3 @@ <span className="active-layer-hide">
               className="map-menu-icon"
-              icon={['far', 'times-circle']}
+              icon={['fas', 'times']}
               onClick={() => this.deleteCrossEvent(elem)}
@@ -708,2 +720,5 @@ />
                   {this.activeLayersAsArray()}
+                  <span className="message" id="nolayers_message">
+                    No layers selected
+                  </span>
                 </div>
@@ -710,0 +725,0 @@ </div>

src/constants.js

 export const ARCGIS_BLOCK = 'arcgis_block';
+export const USE_CASES_BLOCK = 'use_cases_block';

src/index.js

 import world from '@plone/volto/icons/world.svg';
-import { View, Edit } from '@eeacms/volto-arcgis-block/components';
+import menu from '@plone/volto/icons/menu.svg';
+
+import {
+  MapViewerView,
+  MapViewerEdit,
+  UseCasesMapViewerView,
+  UseCasesMapViewerEdit,
+} from '@eeacms/volto-arcgis-block/components';
 import { ARCGIS_BLOCK } from '@eeacms/volto-arcgis-block/constants';
+import { USE_CASES_BLOCK } from '@eeacms/volto-arcgis-block/constants';
 
@@ -11,4 +19,4 @@ export default (config) => {
     group: 'common', // The group (blocks can be grouped, displayed in the chooser)
-    view: View, // The view mode component
-    edit: Edit, // The edit mode component
+    view: MapViewerView, // The view mode component
+    edit: MapViewerEdit, // The edit mode component
     restricted: false, // If the block is restricted, it won't show in the chooser
@@ -35,3 +43,20 @@ mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
   };
+
+  config.blocks.blocksConfig[USE_CASES_BLOCK] = {
+    id: USE_CASES_BLOCK, // The name (id) of the block
+    title: 'Use Cases Map', // The display name of the block
+    icon: menu, // The icon used in the block chooser
+    group: 'common', // The group (blocks can be grouped, displayed in the chooser)
+    view: UseCasesMapViewerView, // The view mode component
+    edit: UseCasesMapViewerEdit, // The edit mode component
+    restricted: false, // If the block is restricted, it won't show in the chooser
+    mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
+    blockHasOwnFocusManagement: false, // Set this to true if the block manages its own focus
+    sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
+    security: {
+      addPermission: [], // Future proof (not implemented yet) add user permission role(s)
+      view: [], // Future proof (not implemented yet) view user role(s)
+    },
+  };
   return config;
 };

No alert changes

Improved metrics

Total package byte prevSize

10449674

increased by0.07%

Number of package files

49

increased by13.95%

Lines of code

3448

increased by2.53%

No dependency changes