Placing the template picker and editor widget in dojo dialog

1198
8
Jump to solution
07-31-2019 07:53 AM
Den-GIS
Occasional Contributor

I'm trying to put template picker widget together with editor in the dojo dialog. Editor widget is not a problem. But template picker does not appear. Does anyone know what I'm doing wrong. To test, I use this Edit rivers and waterbodies template. Thanks in advance!

My Code:


<!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>Edit rivers and waterbodies</title>
      <link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
      <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
      <style>
         html,body{height:100%;width:100%;margin:0;overflow:hidden;}
         #map{
         padding:0;
         }
         #header{
         font-size: 1.1em;
         font-family: sans-serif;
         padding-left: 1em;
         padding-top:4px;
         color:#660000;
         }
         .templatePicker {
         border: none;
         }
         .dj_ie .infowindow .window .top .right .user .content { position: relative; }
         .dj_ie .simpleInfoWindow .content { position: relative; }
         
        
         #editorButton{
         position: absolute;
         z-index:99;
         top: 3px;
         left: 170px;
         width: 100px;
         height: 25px;
         }
      </style>
      <script src="https://js.arcgis.com/3.29/"></script>
      <script>
         var map;
         
         require([
           "esri/map",
           "esri/tasks/GeometryService",
           "esri/layers/ArcGISTiledMapServiceLayer",
           "esri/layers/FeatureLayer",
           "esri/Color",
           "esri/symbols/SimpleMarkerSymbol",
           "esri/symbols/SimpleLineSymbol",
           "esri/dijit/editing/Editor",
           "esri/dijit/editing/TemplatePicker",
           "esri/config",
           "dojo/i18n!esri/nls/jsapi",
           "dojo/_base/array", "dojo/parser", "dojo/keys",
           "dijit/layout/BorderContainer", "dijit/layout/ContentPane",  
           "dijit/Dialog",  "dijit/form/Button", "dojo/on", "dojo/dom",
           "dojo/domReady!"
         ], function(
           Map, GeometryService,
           ArcGISTiledMapServiceLayer, FeatureLayer,
           Color, SimpleMarkerSymbol, SimpleLineSymbol,
           Editor, TemplatePicker,
           esriConfig, jsapiBundle,
           arrayUtils, parser, keys, BorderContainer, ContentPane, Dialog, Button, on, dom
         ) {
           parser.parse();
           // snapping is enabled for this sample - change the tooltip to reflect this
           jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start +  "<br>Press <b>ALT</b> to enable snapping";
           // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
           esriConfig.defaults.io.proxyUrl = "/proxy/";
           //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
           esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
         
           map = new Map("map", {
             basemap: "satellite",
             center: [-96.541, 38.351],
             zoom: 14,
             slider: false
           });
         
           map.on("layers-add-result", initEditor);
           //add boundaries and place names
           var responsePoints = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {
             mode: FeatureLayer.MODE_ONDEMAND,
             outFields: ['*']
           });
         
           map.addLayers([responsePoints]);
         
           function initEditor(evt) {
             var templateLayers = arrayUtils.map(evt.layers, function(result){
               return result.layer;
             });
             var templatePicker = new TemplatePicker({
               featureLayers: templateLayers,
               grouping: true,
               rows: "auto",
               columns: 3
             }, "templateDiv");
             templatePicker.startup();
         
             var layers = arrayUtils.map(evt.layers, function(result) {
               return { featureLayer: result.layer };
             });
             var settings = {
               map: map,
               templatePicker: templatePicker,
               layerInfos: layers,
               toolbarVisible: true,
               createOptions: {
                 polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
                 polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
                   Editor.CREATE_TOOL_CIRCLE,
                   Editor.CREATE_TOOL_TRIANGLE,
                   Editor.CREATE_TOOL_RECTANGLE
                 ]
               },
               toolbarOptions: {
                 reshapeVisible: true
               }
             };
         
             var params = { settings: settings };
             var myEditor = new Editor(params, 'editorDiv');
             //define snapping options
             var symbol = new SimpleMarkerSymbol(
               SimpleMarkerSymbol.STYLE_CROSS,
               15,
               new SimpleLineSymbol(
                 SimpleLineSymbol.STYLE_SOLID,
                 new Color([255, 0, 0, 0.5]),
                 5
               ),
               null
             );
             map.enableSnapping({
               snapPointSymbol: symbol,
               tolerance: 20,
               snapKey: keys.ALT
             });
         
             myEditor.startup();
           }    
         var editorDialog = new Dialog({
                   title: "Editor",
                   content: editorDiv,
                   //style: "width: 280px"
               });
               console.log("editorDialog", editorDialog);
         
         on(dom.byId('editorButton'), "click", function() {
                   editorDialog.show();
               });
         });
      </script>
   </head>
   <body class="claro">
      <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">
         <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
            Edit Hydrography
            <button id="editorButton" type="button"> Editor Button</button>
         </div>
         <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">
            <div id="templateDiv"></div>
            <div id="editorDiv"></div>
         </div>
         <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
      </div>
   </body>
</html>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Denis,

  Here is what I was talking about:

<!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>Edit rivers and waterbodies</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/dojox/layout/resources/FloatingPane.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/dojox/layout/resources/ResizeHandle.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      overflow: hidden;
    }

    #map {
      padding: 0;
    }

    #header {
      font-size: 1.1em;
      font-family: sans-serif;
      padding-left: 1em;
      padding-top: 4px;
      color: #660000;
    }

    .templateDiv {
      border: none;
    }

    .dj_ie .infowindow .window .top .right .user .content {
      position: relative;
    }

    .dj_ie .simpleInfoWindow .content {
      position: relative;
    }

    #editorButton {
      position: absolute;
      z-index: 99;
      top: 3px;
      left: 170px;
      width: 100px;
      height: 25px;
    }

    .dojoxDock {
      visibility: hidden;
    }

    #floatingEditor {
      position: absolute;
      top: 100px;
      right: 100px;
      width: 300px;
      height: 100%;
      max-height: 400px;
      visibility: hidden;
      z-index: 9;
    }

    .claro .dojoxFloatingMinimizeIcon {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADWSURBVChTlVIhDoNAENyWalRtFQY0qh8AHKIkoO8DlRXoin4Cj0AgOd9UIflA+xA6Q7jkQhFlkuGWYYZd7tiN4yhEXdcnLBcwBkNqQA92YJPn+YfCFID5jPoGphRX0IIPhF5OEAR8870oitR1XfE8b3IYaK2lLEs/y7LjMAxPB4WCfqW5qiqxQzRTU0pR8yG9D7hwZomiiMtkMDBm8wyIGTAf+BNamIlwPxd/gx24dQlv7JkJ08nq0jPAfU5ssz3GItRxpAZs18ysqc0hnkWz+eA2/hoiXyTHZtKhdrvuAAAAAElFTkSuQmCC);
      padding-right: 10px;
    }
  </style>
  <script src="https://js.arcgis.com/3.29/"></script>
  <script>
    var map;

    require([
      "esri/map",
      "esri/tasks/GeometryService",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/Color",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/dijit/editing/Editor",
      "esri/dijit/editing/TemplatePicker",
      "esri/config",
      "dojo/i18n!esri/nls/jsapi",
      "dojo/_base/array", "dojo/parser", "dojo/keys",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dojox/layout/FloatingPane", "dijit/form/Button", "dojo/on", "dojo/dom",
      "dijit/registry","dojo/domReady!"
    ], function (
      Map, GeometryService,
      ArcGISTiledMapServiceLayer, FeatureLayer,
      Color, SimpleMarkerSymbol, SimpleLineSymbol,
      Editor, TemplatePicker,
      esriConfig, jsapiBundle,
      arrayUtils, parser, keys, BorderContainer, ContentPane, FloatingPane, Button, on, dom,
      registry
    ) {
      parser.parse();
      // snapping is enabled for this sample - change the tooltip to reflect this
      jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
      // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
      esriConfig.defaults.io.proxyUrl = "/proxy/";
      //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
      esriConfig.defaults.geometryService = new GeometryService(
        "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

      map = new Map("map", {
        basemap: "satellite",
        center: [-96.541, 38.351],
        zoom: 14,
        slider: false
      });

      map.on("layers-add-result", initEditor);
      //add boundaries and place names
      var responsePoints = new FeatureLayer(
        "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ['*']
        });

      map.addLayers([responsePoints]);

      function initEditor(evt) {
        var templateLayers = arrayUtils.map(evt.layers, function (result) {
          return result.layer;
        });
        var templatePicker = new TemplatePicker({
          featureLayers: templateLayers,
          grouping: true,
          rows: "auto",
          columns: 3
        }, templateDiv);
        templatePicker.startup();

        var layers = arrayUtils.map(evt.layers, function (result) {
          return {
            featureLayer: result.layer
          };
        });
        var settings = {
          map: map,
          templatePicker: templatePicker,
          layerInfos: layers,
          toolbarVisible: true,
          createOptions: {
            polylineDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYLINE],
            polygonDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYGON,
              Editor.CREATE_TOOL_CIRCLE,
              Editor.CREATE_TOOL_TRIANGLE,
              Editor.CREATE_TOOL_RECTANGLE
            ]
          },
          toolbarOptions: {
            reshapeVisible: true
          }
        };

        var params = {
          settings: settings
        };
        var myEditor = new Editor(params, 'editorDiv');
        //define snapping options
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CROSS,
          15,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0, 0.5]),
            5
          ),
          null
        );
        map.enableSnapping({
          snapPointSymbol: symbol,
          tolerance: 20,
          snapKey: keys.ALT
        });

        myEditor.startup();
      }

      on(dom.byId('editorButton'), "click", function () {
        registry.byId("floatingEditor").show();
      });
    });
  </script>
</head>

<body class="claro">
  <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
    style="height:100%;height:100%;">
    <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
      Edit Hydrography
      <button id="editorButton" type="button"> Editor Button</button>
    </div>
    
    <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
  </div>
  <div id="floatingEditor" dojoType="dojox/layout/FloatingPane" title="Editor" dockTo="dock" 
        style="visibility:hidden;" closable="false" resizable="true" dockable="true">
        <div id="editorDiv"></div>
        <div id="templateDiv"></div>
    </div>
</body>

</html>

View solution in original post

8 Replies
RobertScheitlin__GISP
MVP Emeritus

Denis,

   It does not make any sense to me for you to try and use a dialog widget to hold the editor and template picker, since a Dialog dijit is Modal it will not allow you to interact with the map while it is open, thus defeating the intended purpose of the editor widget and template widget.

Den-GIS
Occasional Contributor

Robert,
many thanks for your response!!!
I do not understand it. See screenshot: dojo dialog in "basic viewer" template (https://github.com/Esri/Viewer). Template picker and edit widget in dojo dialog. Is not it like that. Or I'm wrong?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Denis,

   No that is not a Dojo Dijit Dialog. A dialog is Modal meaning that it is the only thing that can receive user interaction. What you picture there does not place an overlay over the rest of the app (to prevent user interaction) like the dialog dijit does.

Den-GIS
Occasional Contributor

OK . I did not know it. I tried to integrate for 2 days. pointless! .
in any case, thank's !

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

You should consider a FloatingPane dijit.

Den-GIS
Occasional Contributor

I'll try it. give the feedback.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Denis,

  Here is what I was talking about:

<!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>Edit rivers and waterbodies</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/dojox/layout/resources/FloatingPane.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/dojox/layout/resources/ResizeHandle.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      overflow: hidden;
    }

    #map {
      padding: 0;
    }

    #header {
      font-size: 1.1em;
      font-family: sans-serif;
      padding-left: 1em;
      padding-top: 4px;
      color: #660000;
    }

    .templateDiv {
      border: none;
    }

    .dj_ie .infowindow .window .top .right .user .content {
      position: relative;
    }

    .dj_ie .simpleInfoWindow .content {
      position: relative;
    }

    #editorButton {
      position: absolute;
      z-index: 99;
      top: 3px;
      left: 170px;
      width: 100px;
      height: 25px;
    }

    .dojoxDock {
      visibility: hidden;
    }

    #floatingEditor {
      position: absolute;
      top: 100px;
      right: 100px;
      width: 300px;
      height: 100%;
      max-height: 400px;
      visibility: hidden;
      z-index: 9;
    }

    .claro .dojoxFloatingMinimizeIcon {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADWSURBVChTlVIhDoNAENyWalRtFQY0qh8AHKIkoO8DlRXoin4Cj0AgOd9UIflA+xA6Q7jkQhFlkuGWYYZd7tiN4yhEXdcnLBcwBkNqQA92YJPn+YfCFID5jPoGphRX0IIPhF5OEAR8870oitR1XfE8b3IYaK2lLEs/y7LjMAxPB4WCfqW5qiqxQzRTU0pR8yG9D7hwZomiiMtkMDBm8wyIGTAf+BNamIlwPxd/gx24dQlv7JkJ08nq0jPAfU5ssz3GItRxpAZs18ysqc0hnkWz+eA2/hoiXyTHZtKhdrvuAAAAAElFTkSuQmCC);
      padding-right: 10px;
    }
  </style>
  <script src="https://js.arcgis.com/3.29/"></script>
  <script>
    var map;

    require([
      "esri/map",
      "esri/tasks/GeometryService",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/Color",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/dijit/editing/Editor",
      "esri/dijit/editing/TemplatePicker",
      "esri/config",
      "dojo/i18n!esri/nls/jsapi",
      "dojo/_base/array", "dojo/parser", "dojo/keys",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dojox/layout/FloatingPane", "dijit/form/Button", "dojo/on", "dojo/dom",
      "dijit/registry","dojo/domReady!"
    ], function (
      Map, GeometryService,
      ArcGISTiledMapServiceLayer, FeatureLayer,
      Color, SimpleMarkerSymbol, SimpleLineSymbol,
      Editor, TemplatePicker,
      esriConfig, jsapiBundle,
      arrayUtils, parser, keys, BorderContainer, ContentPane, FloatingPane, Button, on, dom,
      registry
    ) {
      parser.parse();
      // snapping is enabled for this sample - change the tooltip to reflect this
      jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
      // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
      esriConfig.defaults.io.proxyUrl = "/proxy/";
      //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
      esriConfig.defaults.geometryService = new GeometryService(
        "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

      map = new Map("map", {
        basemap: "satellite",
        center: [-96.541, 38.351],
        zoom: 14,
        slider: false
      });

      map.on("layers-add-result", initEditor);
      //add boundaries and place names
      var responsePoints = new FeatureLayer(
        "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ['*']
        });

      map.addLayers([responsePoints]);

      function initEditor(evt) {
        var templateLayers = arrayUtils.map(evt.layers, function (result) {
          return result.layer;
        });
        var templatePicker = new TemplatePicker({
          featureLayers: templateLayers,
          grouping: true,
          rows: "auto",
          columns: 3
        }, templateDiv);
        templatePicker.startup();

        var layers = arrayUtils.map(evt.layers, function (result) {
          return {
            featureLayer: result.layer
          };
        });
        var settings = {
          map: map,
          templatePicker: templatePicker,
          layerInfos: layers,
          toolbarVisible: true,
          createOptions: {
            polylineDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYLINE],
            polygonDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYGON,
              Editor.CREATE_TOOL_CIRCLE,
              Editor.CREATE_TOOL_TRIANGLE,
              Editor.CREATE_TOOL_RECTANGLE
            ]
          },
          toolbarOptions: {
            reshapeVisible: true
          }
        };

        var params = {
          settings: settings
        };
        var myEditor = new Editor(params, 'editorDiv');
        //define snapping options
        var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CROSS,
          15,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0, 0.5]),
            5
          ),
          null
        );
        map.enableSnapping({
          snapPointSymbol: symbol,
          tolerance: 20,
          snapKey: keys.ALT
        });

        myEditor.startup();
      }

      on(dom.byId('editorButton'), "click", function () {
        registry.byId("floatingEditor").show();
      });
    });
  </script>
</head>

<body class="claro">
  <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
    style="height:100%;height:100%;">
    <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
      Edit Hydrography
      <button id="editorButton" type="button"> Editor Button</button>
    </div>
    
    <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
  </div>
  <div id="floatingEditor" dojoType="dojox/layout/FloatingPane" title="Editor" dockTo="dock" 
        style="visibility:hidden;" closable="false" resizable="true" dockable="true">
        <div id="editorDiv"></div>
        <div id="templateDiv"></div>
    </div>
</body>

</html>
Den-GIS
Occasional Contributor

great, you are fast!
That's what I was looking for
many many thanks 

0 Kudos