AnsweredAssumed Answered

custom template-based widget does not work correctly

Question asked by maiagomez on Apr 7, 2016
Latest reply on Apr 9, 2016 by rscheitlin

Hello everybody,

I tried to make simple my codes in order to make easy solving the problem.. It is a widget with a template that shows when i click a button and when i click on map, in console line, a message tell " map is clicked". the problem is that the template does not show when i click the button and message does not appear in console line.

please help me, I have spend long time to solve this problem but i could not find any solution. Thanks in advance.

 

index.html  :

 

<!DOCTYPE HTML>

<html>

<head>

 

  <meta charset="utf-8">

  <link rel="stylesheet" href="arcgis_js_api/library/3.14/3.14/esri/css/esri.css">

  <link rel="stylesheet" href="arcgis_js_api/library/3.14/3.14/dijit/themes/nihilo/nihilo.css">

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

  <title>Y2K Map</title>

 

  <link rel="stylesheet" href="css/y2k.css" />

 

  <script>

   var dojoConfig = {

   async: true,

   packages: [{

   name: "y2k",

   location: location.pathname.replace(/\/[^\/]*$/, '') + '/js'
   }]

  };

  </script>

 

  <script src="arcgis_js_api/library/3.14/3.14/init.js" data-dojo-config="async: true"></script>

 

  </head>

  <body class="nihilo">

  <div id="mainwindow"
   data-dojo-type="dijit/layout/BorderContainer"
   data-dojo-props="design:'headline',gutter:false,
  liveSplitters: true"
   style="width: 100%; height: 100%; margin: 0;">

  <div id="header"
   data-dojo-type="dijit/layout/ContentPane"
   data-dojo-props="region:'top',splitter:true">

  <h1>Year 2000 Map</h1>

  <div id="buttonbar">

  <button id="census-btn" data-dojo-type="dijit/form/Button">Census</button>

  </div>

  </div>

  <div id="map" data-dojo-type="dijit/layout/ContentPane"
   data-dojo-props="region:'center',splitter:true">

  <div id="census-widget"></div>

  </div>

  <div id="footer"
   data-dojo-type="dijit/layout/ContentPane"
   data-dojo-props="region:'bottom',splitter:true"
   style="height:21px;">

  <span>Courtesy of the Y2K Society</span>

  </div>

  </div>

  <script type="text/javascript" src="js/app.js"></script>

  </body>

  </html>

 

app.js :

 

require([

"dojo/parser",

"dojo/_base/lang",

"esri/map",

"y2k/Census",

"dijit/layout/ContentPane",

"dijit/layout/BorderContainer",

"dijit/form/Button",

"esri/geometry/Extent",

"dijit/registry",

"dojo/dom",

"dojo/domReady!"
], function(

  parser,

  dojoOn,

  lang,

  map,

  Census,

  ContentPane,

  BorderContainer,

  Button,

  Extent,

  registry,

  dom

  ) {

  parser.parse();

 

   var bounds = new esri.geometry.Extent({

   "xmin":817962,

   "ymin":-187036,

   "xmax":1566109,

   "ymax":785554,

   "spatialReference":{"wkid":32640}

  });

 

   var map = new esri.Map("map", {

 

  extent: bounds

  });

 

   var census = new Census({

  map: map,

  mapService: "http://localhost:6080/arcgis/rest/services/sdeMXD/MapServer/"
   }, "census-widget");

 

   var censusBtn = registry.byId("census-btn");

 

  censusBtn.on("click", lang.hitch(census, census.show));

 

});

 

 

Census.js :

 

define([

 

   "dojo/_base/declare",

   "dijit/_WidgetBase", "dijit/_TemplatedMixin",

   "dijit/_OnDijitClickMixin",

   "dojo/dom-style",

   "dojo/text!./templates/Census.html",

 

   "esri/tasks/IdentifyParameters",

   "esri/tasks/IdentifyTask",

   "esri/InfoTemplate",

   "dojo/on",

   "dojo/_base/lang",

   "dojo/dom"
   ],

   function (declare, _WidgetBase, _TemplatedMixin,

  _OnDijitClickMixin, domStyle, dijitTemplate, IdentifyParameters, IdentifyTask,

  InfoTemplate,dojoOn, lang, dom ) {

   return declare([_WidgetBase, _TemplatedMixin, _OnDijitClickMixin], {

 

  baseClass: "y2k-census",

  templateString: dijitTemplate,

 

  constructor: function (options, srcRefNode) {

  console.log("we are in constructor ");

   if (typeof srcRefNode === "string") {

  srcRefNode = dom.byId(srcRefNode)

  }

 

  

   this.map = options.map || null;

   this.domNode = srcRefNode;

  },

 

  show: function () {

  domStyle.set(this.domNode, "display", "block");

   this._mapClickHandler = this.map.on("click", lang.hitch(this, this._onMapClick));

  },

  hide: function () {

  domStyle.set(this.domNode, "display", "none");

   if (this._mapClickHandler && this._mapClickHandler.remove) {

   this._mapClickHandler.remove();

  }

  },

 

  _onMapClick: function (event) {

  console.log("map is clicked");

  },

  

  });

});

 

 

census.html :

 

<div class="${baseClass}" style="display: none;">

  <span class="${baseClass}-close"
   data-dojo-attach-event="ondijitclick:hide">X</span>

 

  <b>Census Data</b><br />

 

  <p>

  Click on a location in the United States to view the census data for that region.

  </p>

 

</div>

 

 

y2k.css:

 

html, body {

border: 0;

margin: 0;

padding: 0;

height: 100%;

width: 100%;

font-size: 14px;

}

h1 {

margin: 2px 8px;

display: inline-block;

*display: inline; /* IE 7 compatible */
zoom: 1; /* IE 7 compatible */
}

#buttonbar {

position: absolute;

top: 10px;

right: 15px;

width: auto;

height: auto;

}

#mainwindow,

#mainwindow .dijitSplitter {

  background: #fffaa9; /* paler yellow */
}

#header, #footer {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

  border: 1px solid #6f6222;

}

#header { background: #ffec50; /* bold yellow */ }

#footer { background: #d0a921; /* darker yellow */ }

 

.y2k-census {

  position: absolute;

  width: 150px;

  top: 20px;

  right: 20px;

  z-index: 100;

  height: auto;

  background: white;

  padding: 5px;

  -moz-border-radius: 8px;

  -webkit-border-radius: 8px;

  border-radius: 8px;

}

 

.y2k-census-close {

  font-weight: bold;

  color: #ff2222;

  cursor: pointer;

  padding: 3px;

  float: right;

  font-size: 1.3em;

}

Outcomes