Problem moving application between templates

ChrisHolmes — Wed, 12 Nov 2014 17:17:14 GMT

Hello everyone,

I have a javascript application which looks like this:

I am trying to change it to use a modified version of the "Map container split in three" template:

https://developers.arcgis.com/javascript/jssamples/layout_mapcontainersplitinthree.html

My goal is to have something that looks like this:

But what I've got (after moving my code over) is this:

I've attached the files I modified in an attempt to get my code working in the new template. Thanks for the help, it's very appreciated!

Chris

Re: Problem moving application between templates

TimWitt2 — Wed, 12 Nov 2014 17:47:34 GMT

This should do it!

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>


    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
    <link rel="stylesheet" href="css/layout.css">


    //<script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
  require([
  "esri/map",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dijit/layout/AccordionContainer",
  "esri/layers/FeatureLayer",
  "esri/dijit/AttributeInspector",
  "esri/graphic",
  "esri/config",
  "dojo/dom",
  "dojo/on",
  "dojo/_base/array",
  "esri/toolbars/draw",
  "dojo/dom-construct",
  "dojo/parser",
  "esri/toolbars/draw",
  "esri/dijit/editing/TemplatePicker",


  "dijit/form/Button",
  "dojo/domReady!"
  ], function(
  Map,
  BorderContainer,
  ContentPane,
  AccordionContainer,
  FeatureLayer,
  AttributeInspector,
  Graphic,
  esriConfig,
  dom,
  on,
  array,
  Draw,
  domConstruct,
  parser,
  draw,
  TemplatePicker,


  Button
  ) {
  parser.parse();
  esriConfig.defaults.io.proxyUrl = "/proxy";

  var map, updateFeature;

  map = new Map("map", {
  basemap: "streets",
  center: [-114.2, 51.06],
  zoom: 12
  });

  on(map, "layers-add-result", initEditing);


  var home = new HomeButton({
  map: map
  }, "HomeButton");
  home.startup();  


  var geoLocate = new LocateButton({
  map: map
  }, "LocateButton");
  geoLocate.startup();

  on(map, "layers-add-result", initEditing);  

  var pointLayer = new FeatureLayer("http://gismap2.calgary.ca/arcgis/rest/services/LUPP_Testing/CitizenComments/FeatureServer/0", {  
  mode: FeatureLayer.MODE_SNAPSHOT,  
  outFields: ["*"]  
  });  


  map.addLayers([pointLayer]);  



  function initEditing(results) {            
  var layers = [results.layers[0].layer];  

  var templatePicker = new TemplatePicker({  
  featureLayers: layers,  
  rows: 'auto',  
  columns: 'auto',  
  grouping: true  
  }, "templatePickerDiv");  


  templatePicker.startup();  


  var drawToolbar = new Draw(map);  


  var selectedTemplate;  


  on(templatePicker, "selection-change", function() {  
  selectedTemplate = templatePicker.getSelected();  


  if (selectedTemplate) {  
  switch (selectedTemplate.featureLayer.geometryType) {  
  case "esriGeometryPoint":  
  drawToolbar.activate(esri.toolbars.Draw.POINT);  
  break;  
  }  
  }  
  });  


  on(drawToolbar, "draw-end", function(geometry) {  
  updateFeature = geometry;  
  console.log(updateFeature);  
   
  if (map.infoWindow.isShowing) {  
  map.infoWindow.hide();  
  }  


  drawToolbar.deactivate();  


  var fieldAttributes = layerFieldToAttributes(selectedTemplate.featureLayer.fields);  
  var newAttributes = dojo.mixin(fieldAttributes, selectedTemplate.template.prototype.attributes);  
  var newGraphic = new Graphic(geometry, null, newAttributes);               


  var layerInfos = [{  
  'featureLayer': selectedTemplate.featureLayer,  
  'isEditable': true,  
  'showAttachments': true,    
  fieldInfos: [    
  { fieldName: "NAME", label: "NAME:", isEditable: true },    
  { fieldName: "EMAIL", label: "EMAIL:", isEditable: true },    
  { fieldName: "PHONE", label: "PHONE:", isEditable: true },    
  { fieldName: "CITIZEN_COMMENT", label: "COMMENT:", isEditable: true, 'stringFieldOption': 'textarea' }                      
  ]    
  }];  


  var attInspector = new AttributeInspector({  
  layerInfos: layerInfos  
  }, domConstruct.create("div"));  

  var saveButton = new Button({ label: "Save", "class": "saveButton"});  
  domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");  

  saveButton.on("click", function(){  
  map.infoWindow.hide();           
  });  


  selectedTemplate.featureLayer.applyEdits([newGraphic], null, null, function() {  
  var screenPoint = map.toScreen(getInfoWindowPositionPoint(newGraphic));  
   
  map.infoWindow.setContent(attInspector.domNode);  
  map.infoWindow.resize(400,400); //(325, 185);  
  map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(screenPoint));  


  templatePicker.clearSelection();  
  });  


  on(attInspector, "attribute-change", function(evt) {  
  evt.feature.attributes[evt.fieldName] = evt.fieldValue;  
  evt.feature.getLayer().applyEdits(null, [evt.feature], null);  
  });  
   
  //delete a point  
  on(attInspector, "delete", function(evt) {  
  evt.feature.getLayer().applyEdits(null, null, [evt.feature]);  
  map.infoWindow.hide();  
  });  
  });  
  }  
  //removing this code makes it so that the info window does not open  
  function getInfoWindowPositionPoint(feature) {  
  var point;  
  switch (feature.getLayer().geometryType) {  
  case "esriGeometryPoint":  
  point = feature.geometry;  
  break;  
  }  
  return point;  
  }  
   
  //required for info window  
  function layerFieldToAttributes(fields) {  
  var attributes = {};  
  dojo.forEach(fields, function(field) {  
  attributes[field.name] = null;  
  });  
  return attributes;  
  }  


});
      //dojo.require("dijit.layout.BorderContainer");
      //dojo.require("dijit.layout.ContentPane");
      //dojo.require("dijit.layout.AccordionContainer");
      //dojo.require("esri.map");
  //dojo.require("esri.dijit.HomeButton");
  //dojo.require("esri.dijit.LocateButton");
      
      //var map;


      //function init() {
      //  map = new esri.Map("map", {
      //    basemap: "topo",
      //    center: [-118.404, 34.054],
      //    zoom: 11
      //  });
      //}

  //var home = new HomeButton({
      //  map: map
      //}, "HomeButton");
      //home.startup();  
    
      //var geoLocate = new LocateButton({
      //  map: map
      //}, "LocateButton");
      //geoLocate.startup();

      //dojo.ready(init);
    </script>
  </head>
  <body class="nihilo">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
      <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
        This is the HEADER section
        <div id="subheader">with a subheader</div>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" id="leftPane">
      <div data-dojo-type="dijit.layout.AccordionContainer">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend'">
          Content for pane 1
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Add Comment'">
          <p>Content for pane 2</p>
  <div id="templatePickerDiv"></div>
        </div>
        <!--<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 3'">
          <p>Content for pane 3</p>
        </div>-->
      </div>
      </div>
      <div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
  <div id="HomeButton"></div>
       <div id="LocateButton"></div>
  </div>
      <!--<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" id="rightPane">
        This is the right section
      </div>-->
      <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
        this is the footer section
      </div>
    </div>
  </body>
</html>

Re: Problem moving application between templates

TimWitt2 — Wed, 12 Nov 2014 17:48:36 GMT

You had attribute inspector in there twice (once misspelled) and it is "dijit/form/Button" not "esri/form/Button"

I also changed it from Legacy style new esri.map to AMD style new map

topic Re: Problem moving application between templates in ArcGIS JavaScript Maps SDK Questions

Problem moving application between templates

Re: Problem moving application between templates

Re: Problem moving application between templates

Re: Problem moving application between templates