topic Re: How to display widgets horizontally outside mapview in ArcGIS JavaScript Maps SDK Questions

How to display widgets horizontally outside mapview

DianeBird — Thu, 06 Feb 2020 22:45:39 GMT

This may seem rudimentary for some, but I am new to Java. I have created an app with a separate header div and wish to display a few often used widgets in that division. They are coming out in a vertical order. How do I change the layout of the items in this division to horizontal?

Re: How to display widgets horizontally outside mapview

RobertScheitlin__GISP — Fri, 07 Feb 2020 13:39:46 GMT

Here is a thread where I demonstrated how to make widgets appear horizontally in a toolbar like fashion:

https://community.esri.com/thread/238393-create-widget-toolbar-using-dom-elements

Re: How to display widgets horizontally outside mapview

DianeBird — Tue, 11 Feb 2020 22:05:41 GMT

Thank you. I saw this thread earlier. However, I want to add it to a separate division in the application, not just to the top left of the view.

If I remove the code:

view.ui.add(toolbarTable,);

Do I add:

container: “xxxxxDiv”;

Is there something else I am missing? It is not showing up?

Re: How to display widgets horizontally outside mapview

RobertScheitlin__GISP — Wed, 28 Jul 2021 01:40:21 GMT

Here is a sample for that specifically then.

<!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%;
      }
      #viewDiv {
        top: 36px;
        height: calc(100% - 36px);
        width: 100%;
        padding: 0;
        margin: 0;
        position: absolute;
      }
      #toolbar {
        height: 36px;
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: end;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/widgets/Home"
      ], function(Map, SceneView, Home) {
        var map = new Map({
          basemap: "streets",
          ground: "world-elevation"
        });

        var view = new SceneView({
          container: "viewDiv",
          map: map,
          center: [-56.049, 38.485, 78],
          zoom: 3
        });
        
        const toolbarTable = document.createElement("table");
        toolbarTable.style.opacity = "1";
        toolbarTable.style.backgroundColor = "#ffffff";
        const toolbar = document.getElementById('toolbar');
        const fillerdiv = document.createElement("div");
        fillerdiv.style.width = "100%";
        toolbar.appendChild(fillerdiv);
        toolbar.appendChild(toolbarTable);
          
        const row = toolbarTable.insertRow(0);
        
        const cell1 = row.insertCell(0);
        const cDiv1 = document.createElement("div");
        cell1.appendChild(cDiv1);
        const cell2 = row.insertCell(1);
        const cDiv2 = document.createElement("div");
        cell2.appendChild(cDiv2);
        const cell3 = row.insertCell(2);
        const cDiv3 = document.createElement("div");
        cell3.appendChild(cDiv3);
        
        //Note: I'm not planning to add three Home buttons
        // just used this for testing widget behavior
        
        const homeBtn1 = new Home({
            view : view,
            container: cDiv1
        });
        
        const homeBtn2 = new Home({
            view : view,
            container: cDiv2
        });
        
        const homeBtn3 = new Home({
            view : view,
            container: cDiv3
        });
      });
    </script>
  </head>

  <body>
    <div id="toolbar"></div>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to display widgets horizontally outside mapview

DianeBird — Fri, 14 Feb 2020 19:31:16 GMT

Got it! Thanks.

Re: How to display widgets horizontally outside mapview

LefterisKoumis — Wed, 28 Jul 2021 21:47:45 GMT

So, if I want to have an icon that it produces a modal window like a basemap gallery? Tried to use, but it's not working.

const homeBtn1 =new Expand({ view: view, container: cDiv1, content:basemapGallery }); var basemapGallery = new BasemapGallery({ view: view });