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;
}
