nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Problem moving application between templates

cwh

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

index.zip

Finde mehr Beiträge mit dem Tag

Accepted answers

TimWitt2

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>

All comments

cwh

Thanks Tim! Your help is very much appreciated.

Chris

TimWitt2

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

TimWitt2

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>

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.