Community

How to display widgets vertically outside view ui

1444
2
Jump to solution
05-18-2020 03:56 AM
AlanLX
by
New Contributor II
‎05-18-2020 03:56 AM

To start, sorry for my rough English but I speak French.

I would like to create a new application with, on the right of the map, a toolbar that would contain several widgets.

Then I would like the content of each widget to open in another div.

I followed this discussion but I can't seem to position the widgets vertically and make their content visible in another div.

Attached is a view of the application design

 

Thank you in advance for the help you can give me.

Ps: i'm webdesigner but new in javascript.

Preview file
145 KB
Preview file
168 KB
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-18-2020 06:38 AM

This a very rough hurried sample of that.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Toolbar - 4.14</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.14/"></script>

  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .appCont {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
    }

    #viewDiv {
      width: calc(100% - 32px);
      height: 100%;
      padding: 0;
      margin: 0;
    }

    #toolbar {
      height: 100%;
      width: 32px;
      padding: 0;
      margin: 0;
      display: flex;
      background: green;
      flex-flow: column;
    }

    #widgetDivCont {
      width: 300px;
      padding: 0;
      margin: 0;
      display: flex;
      background: white;
      flex-flow: column;
      display: none;
    }

    #widgetDiv,
    #widgetDiv2 {
      max-height: 200px;
    }

    .myButton {
      font-size: 14px;
      color: #fff;
      width: 32px;
      height: 32px;
      padding: 0;
      margin: 0;
      overflow: hidden;
      cursor: pointer;
      text-align: center;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }
  </style>

  <script>
    require([
      "esri/WebScene",
      "esri/views/SceneView",
      "esri/widgets/Home",
      "esri/widgets/BasemapGallery",
      "esri/widgets/LayerList"
    ], function (WebScene, SceneView, Home, BasemapGallery, LayerList) {
      var scene = new WebScene({
        portalItem: {
          // autocasts as new PortalItem()
          id: "adfad6ee6c6043238ea64e121bb6429a"
        }
      });

      var view = new SceneView({
        container: "viewDiv",
        map: scene
      });

      const widgetDivCont = document.getElementById('widgetDivCont');
      const bmBtn = document.getElementById('basemapBtn');
      const lyrlistBtn = document.getElementById('llBtn');
      bmBtn.addEventListener('click', function(){
        widgetDivCont.style.display = "block";
      });

      var basemapGallery = new BasemapGallery({
        view: view,
        container: widgetDiv
      });

      view.when(function() {
        var layerList = new LayerList({
          view: view,
          container: widgetDiv2
        });
      });
    });
  </script>
</head>

<body></body>
<div class="appCont">
  <div id="viewDiv"></div>
  <div id="toolbar">
    <div id="basemapBtn" class="myButton esri-home"><span aria-hidden="true" class="esri-icon esri-icon-basemap"></span></div>
    <div id="llBtn" class="myLayerList myButton"><span aria-hidden="true" class="esri-icon esri-icon-bookmark"></span></div>
  </div>
  <div id="widgetDivCont">
    <div id="widgetDiv"></div>
    <div id="widgetDiv2"></div>
  </div>
</div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

2 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-18-2020 06:38 AM

This a very rough hurried sample of that.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Toolbar - 4.14</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.14/"></script>

  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .appCont {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
    }

    #viewDiv {
      width: calc(100% - 32px);
      height: 100%;
      padding: 0;
      margin: 0;
    }

    #toolbar {
      height: 100%;
      width: 32px;
      padding: 0;
      margin: 0;
      display: flex;
      background: green;
      flex-flow: column;
    }

    #widgetDivCont {
      width: 300px;
      padding: 0;
      margin: 0;
      display: flex;
      background: white;
      flex-flow: column;
      display: none;
    }

    #widgetDiv,
    #widgetDiv2 {
      max-height: 200px;
    }

    .myButton {
      font-size: 14px;
      color: #fff;
      width: 32px;
      height: 32px;
      padding: 0;
      margin: 0;
      overflow: hidden;
      cursor: pointer;
      text-align: center;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }
  </style>

  <script>
    require([
      "esri/WebScene",
      "esri/views/SceneView",
      "esri/widgets/Home",
      "esri/widgets/BasemapGallery",
      "esri/widgets/LayerList"
    ], function (WebScene, SceneView, Home, BasemapGallery, LayerList) {
      var scene = new WebScene({
        portalItem: {
          // autocasts as new PortalItem()
          id: "adfad6ee6c6043238ea64e121bb6429a"
        }
      });

      var view = new SceneView({
        container: "viewDiv",
        map: scene
      });

      const widgetDivCont = document.getElementById('widgetDivCont');
      const bmBtn = document.getElementById('basemapBtn');
      const lyrlistBtn = document.getElementById('llBtn');
      bmBtn.addEventListener('click', function(){
        widgetDivCont.style.display = "block";
      });

      var basemapGallery = new BasemapGallery({
        view: view,
        container: widgetDiv
      });

      view.when(function() {
        var layerList = new LayerList({
          view: view,
          container: widgetDiv2
        });
      });
    });
  </script>
</head>

<body></body>
<div class="appCont">
  <div id="viewDiv"></div>
  <div id="toolbar">
    <div id="basemapBtn" class="myButton esri-home"><span aria-hidden="true" class="esri-icon esri-icon-basemap"></span></div>
    <div id="llBtn" class="myLayerList myButton"><span aria-hidden="true" class="esri-icon esri-icon-bookmark"></span></div>
  </div>
  <div id="widgetDivCont">
    <div id="widgetDiv"></div>
    <div id="widgetDiv2"></div>
  </div>
</div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
AlanLX
by
New Contributor II
‎05-28-2020 11:57 PM

Hello Robert,

Sorry to not have answered directly but I wanted to come back with a complete version of my project to share with other users.

In the meantime, thank you already for answering my question.

Best regard.

Alan.

0 Kudos