Community

Best way of bringing layerlist widgets content to a Dialolg?

1005
2
Jump to solution
01-29-2018 03:57 AM
AnnCrystal
by
New Contributor II
‎01-29-2018 03:57 AM

In this ESRI sample:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">

<style>
html, body, .container, #map {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    margin:0;
    font-family: "Open Sans";
}
#map {
    padding:0;
}
#layerListPane{
    width:25%;
}
.esriLayer{
  background-color: #fff;
}
.esriLayerList .esriList{
    border-top:none;
}
.esriLayerList .esriTitle {
  background-color: #fff;
  border-bottom:none;
}
.esriLayerList .esriList ul{
  background-color: #fff;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.23/"></script>
<script>
require([
    "esri/arcgis/utils",
    "esri/dijit/LayerList",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
], function(
    arcgisUtils,
    LayerList
) {
    //Create a map based on an ArcGIS Online web map id
    arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response){
        var myWidget = new LayerList({
           map: response.map,
           layers: arcgisUtils.getLayerList(response)
        },"layerList");
        myWidget.startup();
    });

});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
    <div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>

How can I pull the result from "layerList" DOM element to a dijit Dialog (in js 3.23) instead of using a ContentPane?

Thanks

-Ann

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎01-29-2018 09:09 AM

Ann,

   Here is a way to have a movable and resizable floating pane:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Layer List Dijit</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.23/dojox/layout/resources/FloatingPane.css" />
  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.23/dojox/layout/resources/ResizeHandle.css" />

  <style>
    html,
    body,
    .container,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      margin: 0;
      font-family: "Open Sans";
    }
    #layerList {
      padding: 0;
      margin:0;
      height: 100%;
      width: 100%;
    }

    #map {
      padding: 0;
    }

    .esriLayer {
      background-color: #fff;
    }

    .dojoxFloatingPaneTitle {
      background-color: #217bba;
      background: -webkit-linear-gradient(#fff, #217bba, #217bba, #217bba, #217bba, #217bba, #217bba, #1f6291);
      background: -moz-linear-gradient(#fff, #217bba, #217bba, #217bba, #217bba, #217bba, #217bba, #1f6291);
      background: linear-gradient(#fff, #217bba, #217bba, #217bba, #217bba, #217bba, #217bba, #1f6291);
      color: #fff;
      font-weight: bolder;
    }

    /* .dojoxDock {
      display: none;
    } */

    .dojoxFloatingPaneTitle,
    .dojoxFloatingPane {
      border: none;
    }

    .dojoxFloatingPaneContent {
      padding: 0;
    }

    #wfp {
      padding: 8px;
    }
  </style>
  <script>
    var dojoConfig = {
      parseOnLoad: true
    };
  </script>
  <script src="https://js.arcgis.com/3.23/"></script>
  <script>
    var fp;
    require([
      "esri/arcgis/utils",
      "esri/dijit/LayerList",
      "dojox/layout/FloatingPane",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      arcgisUtils,
      LayerList,
      FloatingPane
    ) {
      //Create a map based on an ArcGIS Online web map id
      arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response) {
        fp = new FloatingPane({
          title: "Layer List",
          closable: false,
          resizable: true,
          dockable: true,
          style: "position:absolute;top:250px;left:350px;width:300px;height:300px;",
          id: "wfp"
        }, "divFloatingPane");
        fp.startup();
        var myWidget = new LayerList({
          map: response.map,
          layers: arcgisUtils.getLayerList(response)
        }, "layerList");
        myWidget.startup();
      });

    });
  </script>
</head>

<body class="claro">
  <div class="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
  <div id="divFloatingPane">
    <div id="layerList"></div>
  </div>
</body>

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

View solution in original post

2 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎01-29-2018 09:09 AM

Ann,

   Here is a way to have a movable and resizable floating pane:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Layer List Dijit</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.23/dojox/layout/resources/FloatingPane.css" />
  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.23/dojox/layout/resources/ResizeHandle.css" />

  <style>
    html,
    body,
    .container,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      margin: 0;
      font-family: "Open Sans";
    }
    #layerList {
      padding: 0;
      margin:0;
      height: 100%;
      width: 100%;
    }

    #map {
      padding: 0;
    }

    .esriLayer {
      background-color: #fff;
    }

    .dojoxFloatingPaneTitle {
      background-color: #217bba;
      background: -webkit-linear-gradient(#fff, #217bba, #217bba, #217bba, #217bba, #217bba, #217bba, #1f6291);
      background: -moz-linear-gradient(#fff, #217bba, #217bba, #217bba, #217bba, #217bba, #217bba, #1f6291);
      background: linear-gradient(#fff, #217bba, #217bba, #217bba, #217bba, #217bba, #217bba, #1f6291);
      color: #fff;
      font-weight: bolder;
    }

    /* .dojoxDock {
      display: none;
    } */

    .dojoxFloatingPaneTitle,
    .dojoxFloatingPane {
      border: none;
    }

    .dojoxFloatingPaneContent {
      padding: 0;
    }

    #wfp {
      padding: 8px;
    }
  </style>
  <script>
    var dojoConfig = {
      parseOnLoad: true
    };
  </script>
  <script src="https://js.arcgis.com/3.23/"></script>
  <script>
    var fp;
    require([
      "esri/arcgis/utils",
      "esri/dijit/LayerList",
      "dojox/layout/FloatingPane",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function(
      arcgisUtils,
      LayerList,
      FloatingPane
    ) {
      //Create a map based on an ArcGIS Online web map id
      arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response) {
        fp = new FloatingPane({
          title: "Layer List",
          closable: false,
          resizable: true,
          dockable: true,
          style: "position:absolute;top:250px;left:350px;width:300px;height:300px;",
          id: "wfp"
        }, "divFloatingPane");
        fp.startup();
        var myWidget = new LayerList({
          map: response.map,
          layers: arcgisUtils.getLayerList(response)
        }, "layerList");
        myWidget.startup();
      });

    });
  </script>
</head>

<body class="claro">
  <div class="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
  <div id="divFloatingPane">
    <div id="layerList"></div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
AnnCrystal
by
New Contributor II
‎01-29-2018 10:02 AM

Awesome-Thanks Robert. I was banging my head on Dijit Dialog which didn't work. I was confused about whether to use floating pane as it was marked as an experimental floating window. and Dojo has a suggestion for Dijit/Dialog.

0 Kudos