@eeacms/volto-arcgis-block 0.1.23 → 0.1.27

package/CHANGELOG.md

@@ -4,8 +4,60 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.1.27](https://github.com/eea/volto-arcgis-block/compare/0.1.26...0.1.27)
+
+- Bugs n improvements [`#91`](https://github.com/eea/volto-arcgis-block/pull/91)
+- ESLint fix [`27ee762`](https://github.com/eea/volto-arcgis-block/commit/27ee762c776b8635cb414edf5f20e3e40187801b)
+- Granularity [`9e8d87a`](https://github.com/eea/volto-arcgis-block/commit/9e8d87a9b5baebec5d5300195bd3ba2f9d5e1e2c)
+
+#### [0.1.26](https://github.com/eea/volto-arcgis-block/compare/0.1.25...0.1.26)
+
+> 17 January 2022
+
+- Develop [`#89`](https://github.com/eea/volto-arcgis-block/pull/89)
+- Bug fixing [`#88`](https://github.com/eea/volto-arcgis-block/pull/88)
+- Bugs n improvements [`#87`](https://github.com/eea/volto-arcgis-block/pull/87)
+- Develop [`#86`](https://github.com/eea/volto-arcgis-block/pull/86)
+- Time slider drag/drop [`#85`](https://github.com/eea/volto-arcgis-block/pull/85)
+- Use cases [`#84`](https://github.com/eea/volto-arcgis-block/pull/84)
+- Develop [`#81`](https://github.com/eea/volto-arcgis-block/pull/81)
+- Downloadable dataset [`c48eea9`](https://github.com/eea/volto-arcgis-block/commit/c48eea93b0f71134f9aa8fee1f5d6b4cf7e1368b)
+- add flattenToAppURL to send the correct url to the MapViewerConfig action [`ca5f684`](https://github.com/eea/volto-arcgis-block/commit/ca5f684ae683e0df249d3fab3534f579583f03a8)
+- ESLint fix [`7f43112`](https://github.com/eea/volto-arcgis-block/commit/7f4311224483fb599e7cecfe65096166ed5f2026)
+- Use case highlight [`2279a5a`](https://github.com/eea/volto-arcgis-block/commit/2279a5ad669172545588e9030e3cf49ca4e30dfa)
+
+#### [0.1.25](https://github.com/eea/volto-arcgis-block/compare/0.1.24...0.1.25)
+
+> 5 January 2022
+
+- Develop [`#83`](https://github.com/eea/volto-arcgis-block/pull/83)
+- Bugs n improvements [`#82`](https://github.com/eea/volto-arcgis-block/pull/82)
+- ESLint fix [`c129348`](https://github.com/eea/volto-arcgis-block/commit/c129348ee3886e0419029dd2bfe835c28878444c)
+- Filter by product and dataset [`c89711a`](https://github.com/eea/volto-arcgis-block/commit/c89711acf4f46c8426c7e34add2baf4debe67697)
+- ESLint fix [`406842a`](https://github.com/eea/volto-arcgis-block/commit/406842a54f1964bf2b4b0e709719028a5a47a903)
+- Timeslider bug fixing [`c7a8345`](https://github.com/eea/volto-arcgis-block/commit/c7a834538a54a8c48e2e34259d3d733a1194007a)
+
+#### [0.1.24](https://github.com/eea/volto-arcgis-block/compare/0.1.23...0.1.24)
+
+> 21 December 2021
+
+- Develop [`#77`](https://github.com/eea/volto-arcgis-block/pull/77)
+- Bugs n improvements [`#80`](https://github.com/eea/volto-arcgis-block/pull/80)
+- The area array to a json object and added a unique_id to the cart [`#79`](https://github.com/eea/volto-arcgis-block/pull/79)
+- Remove Global from legend [`#76`](https://github.com/eea/volto-arcgis-block/pull/76)
+- ESLint fix [`974d62b`](https://github.com/eea/volto-arcgis-block/commit/974d62bd5b66025e12fa85dffcd0d1a5ae04cba4)
+- ESLint fix [`5c4b0d7`](https://github.com/eea/volto-arcgis-block/commit/5c4b0d76de50edd85809c35449f2fb364a9e9312)
+- ESLint fix [`d57d144`](https://github.com/eea/volto-arcgis-block/commit/d57d144fd0e3dbbbbc95195f289d50e6c4b03375)
+- ESLint fix [`9eb0a0c`](https://github.com/eea/volto-arcgis-block/commit/9eb0a0c17d018ac1b25bde422ac149b46b146ff4)
+- ESLint fix [`5fd3772`](https://github.com/eea/volto-arcgis-block/commit/5fd3772f197a3a380067962a5638dbf901a4624e)
+- Pixel info [`1ccef39`](https://github.com/eea/volto-arcgis-block/commit/1ccef39a9adcc3ee94655c77a5a166b613600a08)
+- NUTS bug fix [`37fe7f3`](https://github.com/eea/volto-arcgis-block/commit/37fe7f3fad2c005e3b7c234b3b0564d5df92fa8c)
+
 #### [0.1.23](https://github.com/eea/volto-arcgis-block/compare/0.1.22...0.1.23)
 
+> 17 December 2021
+
+- Develop [`#75`](https://github.com/eea/volto-arcgis-block/pull/75)
 - Use cases region highlight [`#71`](https://github.com/eea/volto-arcgis-block/pull/71)
 - Bugs n improvements [`#74`](https://github.com/eea/volto-arcgis-block/pull/74)
 - Add NUTS 2 in the Map viewer [`#72`](https://github.com/eea/volto-arcgis-block/pull/72)

package/Jenkinsfile

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-arcgis-block"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,clms.land.copernicus.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,clms.land.copernicus.eu,water.europa.eu-freshwater"
         DEPENDENCIES = ""
     }
 
@@ -124,7 +124,7 @@ pipeline {
             node(label: 'docker') {
               script {
                 try {
-                  sh '''docker pull plone; docker run -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
+                  sh '''docker pull plone; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
                   sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=test plone/volto-addon-ci cypress'''
                 } finally {
                   try {
@@ -142,7 +142,8 @@ pipeline {
                              reportName: 'CypressCoverage',
                              reportTitles: 'Integration Tests Code Coverage'])
                     }
-                    archiveArtifacts artifacts: 'cypress-reports/videos/*.mp4', fingerprint: true
+                    sh '''touch empty_file; for ok_test in $(grep -E 'file=.*failures="0"' $(grep 'testsuites .*failures="0"' $(find cypress-results -name *.xml) empty_file | awk -F: '{print $1}') empty_file | sed 's/.* file="\\(.*\\)" time.*/\\1/' | sed 's#^cypress/integration/##g' | sed 's#^../../../node_modules/@eeacms/##g'); do rm -f cypress-reports/videos/$ok_test.mp4; rm -f cypress-reports/$ok_test.mp4; done'''
+                    archiveArtifacts artifacts: 'cypress-reports/**/*.mp4', fingerprint: true, allowEmptyArchive: true
                     stash name: "cypress-coverage", includes: "cypress-coverage/**", allowEmpty: true
                   }
                   finally {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.23",
+  "version": "0.1.27",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",
@@ -40,7 +40,9 @@
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-solid-svg-icons": "5.15.3",
     "@fortawesome/react-fontawesome": "0.1.14",
-    "@eeacms/volto-clms-utils": "0.1.1"
+    "@eeacms/volto-clms-utils": "0.1.1",
+    "highcharts": "^9.3.2",
+    "highcharts-react-official": "^3.1.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

package/src/components/MapViewer/AreaWidget.jsx

@@ -1,7 +1,4 @@
 import React, { createRef } from 'react';
-//import "@arcgis/core/assets/esri/css/main.css";
-//import "./css/ArcgisMap.css";
-//import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { loadModules } from 'esri-loader';
 
 var Graphic,
@@ -174,7 +171,10 @@ class AreaWidget extends React.Component {
           }),
           symbol: fillSymbol,
         });
-        this.props.updateArea({ origin: e.origin, end: { x: e.x, y: e.y } });
+        this.props.updateArea({
+          origin: { x: origin.longitude, y: origin.latitude },
+          end: { x: p.longitude, y: p.latitude },
+        });
         this.props.view.graphics.add(extentGraphic);
       }
     });
@@ -202,7 +202,14 @@ class AreaWidget extends React.Component {
     });
     this.props.map.add(this.nutsGroupLayer);
     this.props.view.on('click', (event) => {
-      if (this.props.mapViewer.activeWidget === this) {
+      if (
+        (this.props.mapViewer.activeWidget === this || this.props.download) &&
+        (this.props.mapViewer.activeWidget
+          ? !this.props.mapViewer.activeWidget.container.current.classList.contains(
+              'info-container',
+            )
+          : true)
+      ) {
         this.props.view.hitTest(event).then((response) => {
           if (response.results.length > 0) {
             let graphic = response.results.filter((result) => {

package/src/components/MapViewer/BasemapWidget.jsx

@@ -15,7 +15,7 @@ class BasemapWidget extends React.Component {
     //not be showing the basemap panel
     this.state = { showMapMenu: false };
     this.menuClass =
-      'esri-icon-basemap esri-widget--button esri-widget esri-interactive esri-icon-basemap';
+      'esri-icon-basemap esri-widget--button esri-widget esri-interactive';
     this.loadFirst = true;
   }
 

package/src/components/MapViewer/InfoWidget.jsx

@@ -0,0 +1,469 @@
+import React, { createRef } from 'react';
+import { loadModules } from 'esri-loader';
+import Highcharts from 'highcharts';
+import HighchartsReact from 'highcharts-react-official';
+var GeometryEngine, Graphic;
+
+class InfoWidget extends React.Component {
+  /**
+   * Creator of the InfoWidget 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, timeLayers: {} };
+    this.map = this.props.map;
+    this.menuClass =
+      'esri-icon-description esri-widget--button esri-widget esri-interactive';
+  }
+
+  loader() {
+    return loadModules(['esri/geometry/geometryEngine', 'esri/Graphic']).then(
+      ([_GeometryEngine, _Graphic]) => {
+        [GeometryEngine, Graphic] = [_GeometryEngine, _Graphic];
+      },
+    );
+  }
+
+  /**
+   * Method that will be invoked when the
+   * button is clicked. It controls the open
+   * and close actions of the component
+   */
+  openMenu() {
+    if (this.state.showMapMenu) {
+      this.props.mapViewer.setActiveWidget();
+      this.container.current.querySelector('.info-panel').style.display =
+        'none';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.replace('esri-icon-right-arrow', 'esri-icon-description');
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({ showMapMenu: false, pixelInfo: false, timeLayers: {} });
+      this.props.view.popup.autoOpenEnabled = true;
+      this.removeMarker();
+    } else {
+      this.props.mapViewer.setActiveWidget(this);
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.replace('esri-icon-description', 'esri-icon-right-arrow');
+      this.container.current.querySelector('.info-panel').style.display =
+        'block';
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({ showMapMenu: true });
+      this.props.mapViewer.view.popup.close();
+      this.props.view.popup.autoOpenEnabled = false;
+    }
+  }
+  /**
+   * This method is executed after the rener method is executed
+   */
+  async componentDidMount() {
+    await this.loader();
+    this.props.view.ui.add(this.container.current, 'top-right');
+    this.props.view.on('click', (e) => {
+      if (this.props.mapViewer.activeWidget === this) {
+        let option = document.querySelector('#info_layer').value;
+        let selected = this.props.activeLayers[
+          this.props.activeLayers.findIndex((a) => a.name === option)
+        ];
+        let layer = selected.layer;
+        let title = selected.title;
+        let name = selected.name;
+        this.identify(layer, e).then((response) => {
+          let variables = response.variables.options;
+          let variable = response.variables.selected;
+          if (
+            this.state.variables
+              ? variables.includes(this.state.variables.selected)
+              : false
+          ) {
+            variable = this.state.variables.selected;
+          }
+          let data = {
+            x: response.timeFields.values
+              .map((a) => {
+                return a[response.timeFields.start];
+              })
+              .sort((a, b) => {
+                return new Date(a).getTime() - new Date(b).getTime();
+              }),
+            y: response.data.values.map((a) => {
+              return Math.round(a[variable] * 100) / 100;
+            }),
+          };
+          let chartData = this.createChart(title, variable, data);
+          this.addMarker(e);
+          this.setState({
+            pixelInfo: true,
+            data: response,
+            options: chartData,
+            variables: { options: variables, selected: variable },
+            timeLayers: { selected: name },
+          });
+        });
+      }
+    });
+  }
+
+  addMarker(evt) {
+    this.removeMarker();
+    let lat = evt.mapPoint.latitude;
+    let long = evt.mapPoint.longitude;
+    var point = {
+      type: 'point',
+      longitude: long,
+      latitude: lat,
+    };
+    var markerSymbol = {
+      type: 'simple-marker',
+      color: [255, 255, 255, 0.75],
+      outline: {
+        color: 'black',
+        width: '2px',
+      },
+    };
+    var pointGraphic = new Graphic({
+      geometry: point,
+      symbol: markerSymbol,
+      attributes: { long, lat, id: 'pixel-info' },
+    });
+    this.props.view.graphics.add(pointGraphic);
+  }
+
+  removeMarker() {
+    if (
+      this.props.view.graphics.items.find((a) => {
+        return a.attributes ? a.attributes.id === 'pixel-info' : false;
+      })
+    ) {
+      let marker = this.props.view.graphics.items.find((a) => {
+        return a.attributes && a.attributes.id === 'pixel-info';
+      });
+      this.props.view.graphics.remove(marker);
+    }
+  }
+
+  identify(layer, evt) {
+    let values = { timeFields: {}, data: {}, variables: {} };
+    //Complete time data
+    values.timeFields['start'] = layer.timeInfo.startField;
+    values.timeFields['end'] = layer.timeInfo.endField;
+    let timeQuery = layer.createQuery();
+    timeQuery.outFields = [layer.timeInfo.startField];
+    let fields = layer.fields
+      .filter((a) => {
+        return (
+          a.type !== 'date' &&
+          a.type !== 'geometry' &&
+          a.type !== 'string' &&
+          a.type !== 'oid'
+        );
+      })
+      .map((b) => {
+        return b.name;
+      });
+    let field = layer.displayField in fields ? layer.displayField : fields[0];
+    values.variables = { options: fields, selected: field };
+    if (layer.timeInfo.fullTimeExtent.endField) {
+      timeQuery.outFields.push(layer.timeInfo.endField);
+    }
+    timeQuery.returnDistinctValues = true;
+    timeQuery.returnGeometry = false;
+    let p1 = layer.queryFeatures(timeQuery).then((r) => {
+      let timevals = [];
+      r.features.forEach((e) => timevals.push(e.attributes));
+      values.timeFields['values'] = timevals;
+    });
+
+    //Query for data
+    let query = layer.createQuery();
+    query.geometry = this.props.view.toMap(evt); // the point location of the pointer
+    query.distance = 1000;
+    query.units = 'meters';
+    query.spatialRelationship = 'intersects'; // this is the default
+    query.returnGeometry = true;
+    query.outFields = [fields.toString()]; // Information to be returned
+    values.data['outFields'] = [fields.toString()];
+
+    let p2 = layer.queryFeatures(query).then((response) => {
+      //First of all, we get all the points with its distance to click point
+      let points = response.features.map((e) => {
+        return {
+          latitude: e.geometry.latitude,
+          longitude: e.geometry.longitude,
+          distance: GeometryEngine.distance(
+            this.props.view.toMap(evt),
+            e.geometry,
+            'meters',
+          ),
+        };
+      });
+      let min_distance = Math.min.apply(
+        null,
+        points.map((e) => e.distance),
+      ); //minimum distance
+      let point = points.find((e) => e.distance <= min_distance); //minimum distance point
+      //get de info of the minimum distance point at all the times possible
+      let info = response.features.filter(
+        (e) =>
+          e.geometry.latitude === point.latitude &&
+          e.geometry.longitude === point.longitude,
+      );
+      values.data['values'] = info.map((e) => {
+        return e.attributes;
+      });
+    });
+
+    return Promise.all([p1, p2]).then(() => {
+      return values;
+    });
+  }
+
+  createChart(title, variable, chartData) {
+    let chartOptions = {
+      chart: {
+        height: 208,
+      },
+      title: {
+        text: title,
+        style: {},
+      },
+      subtitle: {
+        text: '',
+        style: {
+          display: 'none',
+        },
+      },
+      plotOptions: {
+        line: {
+          pointPlacement: 'between',
+        },
+      },
+      xAxis: {
+        title: {
+          text: null,
+        },
+        labels: {
+          format: '{value:%d/%m/%Y}',
+        },
+        type: 'datetime',
+        categories: chartData.x,
+        tickmarkPlacement: 'between',
+        startOnTick: true,
+        endOnTick: true,
+      },
+      legend: {
+        enabled: false,
+      },
+      tooltip: {
+        shared: true,
+        useHTML: true,
+        headerFormat: '{point.x:%d/%m/%Y}<br><b>{point.point.symbolName}</b>',
+      },
+      series: [
+        {
+          marker: {
+            enabled: false,
+          },
+          name: variable,
+          data: chartData.y,
+          shadow: false,
+          zIndex: 1,
+          color: '#a0b128',
+        },
+      ],
+      exporting: {
+        buttons: {
+          contextButton: {
+            enabled: false,
+          },
+        },
+      },
+      credits: {
+        enabled: false,
+      },
+    };
+    return chartOptions;
+  }
+
+  getActiveLayers() {
+    let layers = {};
+    if (!this.state.timeLayers.hasOwnProperty('selected')) {
+      layers.selected = this.props.activeLayers
+        .map((a) => {
+          return a.name;
+        })
+        .reverse()[0];
+      layers.layer = this.props.activeLayers[
+        this.props.activeLayers.findIndex((a) => a.name === layers.selected)
+      ].layer;
+    } else if (
+      !this.props.activeLayers
+        .map((a) => {
+          return a.name;
+        })
+        .includes(this.state.timeLayers.selected)
+    ) {
+      layers.selected = this.props.activeLayers
+        .map((a) => {
+          return a.name;
+        })
+        .reverse()[0];
+      layers.layer = this.props.activeLayers[
+        this.props.activeLayers.findIndex((a) => a.name === layers.selected)
+      ].layer;
+    }
+    this.setState({
+      timeLayers: layers,
+    });
+  }
+
+  selectLayer(option) {
+    let selected = this.props.activeLayers[
+      this.props.activeLayers.findIndex((a) => a.name === option)
+    ];
+    let names = this.state.timeLayers.names;
+    let name = option;
+    let layer = selected.layer;
+    this.removeMarker();
+    this.setState({
+      timeLayers: { names: names, selected: name, layer: layer },
+      pixelInfo: false,
+      data: {},
+      variables: {},
+    });
+  }
+
+  selectVariable(option) {
+    let variables = this.state.variables.options;
+    let variable = option;
+    let selected = this.props.activeLayers[
+      this.props.activeLayers.findIndex(
+        (a) => a.name === this.state.timeLayers.selected,
+      )
+    ];
+    let title = selected.title;
+    let data = {
+      x: this.state.data.timeFields.values
+        .map((a) => {
+          return a[this.state.data.timeFields.start];
+        })
+        .sort((a, b) => {
+          return new Date(a).getTime() - new Date(b).getTime();
+        }),
+      y: this.state.data.data.values.map((a) => {
+        return Math.round(a[variable] * 100) / 100;
+      }),
+    };
+    let chartData = this.createChart(title, variable, data);
+    this.setState({
+      options: chartData,
+      variables: { options: variables, selected: variable },
+    });
+  }
+
+  /**
+   * This method renders the component
+   * @returns jsx
+   */
+  render() {
+    let isEmpty = true;
+    let pixelInfo = true;
+    if (this.state.pixelInfo && this.state.data) {
+      isEmpty =
+        this.state.data.data.values.map((a) => {
+          return a[this.state.variables.selected];
+        }).length === 0;
+    }
+    if (
+      (this.props.activeLayers &&
+        !this.props.activeLayers
+          .map((a) => {
+            return a.name;
+          })
+          .includes(this.state.timeLayers.selected)) ||
+      (this.props.activeLayers &&
+        document.querySelector('#info_layer').value !==
+          this.state.timeLayers.selected)
+    ) {
+      pixelInfo = false;
+      this.removeMarker();
+    }
+    return (
+      <>
+        <div ref={this.container} className="info-container">
+          <div
+            className={this.menuClass}
+            id="info_button"
+            title="Info"
+            onClick={this.openMenu.bind(this)}
+            onKeyDown={this.openMenu.bind(this)}
+            tabIndex="0"
+            role="button"
+          ></div>
+          <div className="info-panel">
+            {this.state.showMapMenu && (
+              <label>
+                Layer
+                <select
+                  className="esri-select"
+                  id="info_layer"
+                  value={this.state.timeLayers.selected}
+                  onBlur={(e) => e.preventDefault()}
+                  onChange={(e) => this.selectLayer(e.target.value)}
+                >
+                  {this.props.activeLayers.map((option) => (
+                    <option key={option.name} value={option.name}>
+                      {option.title}
+                    </option>
+                  ))}
+                </select>
+              </label>
+            )}
+            {this.state.pixelInfo && pixelInfo ? (
+              <>
+                <label>
+                  Variable
+                  <select
+                    className="esri-select"
+                    id="info_variable"
+                    value={this.state.variables.selected}
+                    onBlur={(e) => e.preventDefault()}
+                    onChange={(e) => this.selectVariable(e.target.value)}
+                  >
+                    {this.state.variables.options.map((option) => (
+                      <option key={option} value={option}>
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+                {isEmpty ? (
+                  <span className="info-panel-empty">No data</span>
+                ) : (
+                  <HighchartsReact
+                    highcharts={Highcharts}
+                    options={this.state.options}
+                  />
+                )}
+              </>
+            ) : (
+              <span className="info-panel-empty">
+                Click on the map to get pixel info
+              </span>
+            )}
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default InfoWidget;

package/src/components/MapViewer/MapViewer.jsx

@@ -8,10 +8,12 @@ import PrintWidget from './PrintWidget';
 import AreaWidget from './AreaWidget';
 import ScaleWidget from './ScaleWidget';
 import LegendWidget from './LegendWidget';
+import InfoWidget from './InfoWidget';
 import MenuWidget from './MenuWidget';
 import { MapViewerConfig } from '../../actions';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom;
@@ -44,6 +46,10 @@ class MapViewer extends React.Component {
     this.mapViewer.setState({ area: shared_value });
   }
 
+  updateActiveLayers(shared_value) {
+    this.mapViewer.setState({ activeLayers: shared_value });
+  }
+
   loader() {
     return loadModules([
       'esri/WebMap',
@@ -87,7 +93,7 @@ class MapViewer extends React.Component {
     // After launching the MapViewerConfig action
     // we will have stored the json response here:
     // this.props.mapviewer_config
-    this.props.MapViewerConfig(this.props.url);
+    this.props.MapViewerConfig(flattenToAppURL(this.props.url));
 
     //Once we have created the MapView, we need to ensure that the map div
     //is refreshed in order to show the map on it. To do so, we need to
@@ -156,6 +162,19 @@ class MapViewer extends React.Component {
     if (this.view) return <ScaleWidget view={this.view} mapViewer={this} />;
   }
 
+  renderInfo() {
+    if (this.view)
+      return (
+        <InfoWidget
+          view={this.view}
+          map={this.map}
+          mapViewer={this}
+          updateActiveLayers={this.updateActiveLayers}
+          activeLayers={this.state.activeLayers}
+        />
+      );
+  }
+
   renderMenu() {
     if (this.view)
       return (
@@ -167,6 +186,7 @@ class MapViewer extends React.Component {
           mapViewer={this}
           updateArea={this.updateArea}
           area={this.state.area}
+          updateActiveLayers={this.updateActiveLayers}
         />
       ); //call conf
   }
@@ -188,6 +208,7 @@ class MapViewer extends React.Component {
           {this.renderPrint()}
           {this.renderArea()}
           {this.renderScale()}
+          {this.renderInfo()}
           {this.renderMenu()}
         </div>
       </div>