topic Re: custom template-based widget does not work correctly in ArcGIS JavaScript Maps SDK Questions

custom template-based widget does not work correctly

Mariagomez1 — Thu, 07 Apr 2016 17:31:59 GMT

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>

var dojoConfig = {

async: true,

packages: [{

name: "y2k",

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

};

</script>

</head>

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

</div>

</div>

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

</div>

</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 :

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

}

Re: custom template-based widget does not work correctly

KenBuja — Thu, 07 Apr 2016 17:36:18 GMT

One issue is the function in your app.js contains the argument "dojoOn", but you don't have that module in your require list. However, if you're getting the console message "map is clicked", that must not be a problem in your original code.

Re: custom template-based widget does not work correctly

Mariagomez1 — Fri, 08 Apr 2016 03:14:31 GMT

Hi Ken , really thanks for your advice. the first problem ( that the template does not show ) is solved by adding the "dojo/on" to app.js file but still i can not see the message in console line. i would appreciate if anyone can give a advice to solve the second problem ( a message should appear in console line that " map is clicked" when i click on map).

Re: custom template-based widget does not work correctly

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:10:23 GMT

Maria,

The only problems I see are in the app.js. (as you already stated you need the "dojo/on" require, you are using legacy coding style and AMD style, and your parameter for map is "map" and it needs to be "Map"):

require([
    "dojo/parser",
    "dojo/on",
    "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,
    on,
    lang,
    Map,
    Census,
    ContentPane,
    BorderContainer,
    Button,
    Extent,
    registry,
    dom
) {
    parser.parse();
    var bounds = new Extent({
        "xmin": 817962,
        "ymin": -187036,
        "xmax": 1566109,
        "ymax": 785554,
        "spatialReference": {
            "wkid": 32640
        }
    });
    var map = new 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));
});

Re: custom template-based widget does not work correctly

KenBuja — Fri, 08 Apr 2016 14:55:08 GMT

And since you aren't using DojoOn in your code, why are you including it (and "dojo/on") in both app.js and Census.js? The "on" functionality is built into the ArcGIS API modules. You should add "dojo/on" if you are using some of its added functionality, such as pausing an event or having it only fire once.

Re: custom template-based widget does not work correctly

Mariagomez1 — Sat, 09 Apr 2016 02:32:35 GMT

Thanks Robert, I changed the app.js according to your codes and all codes moved from legacy to AMD. however, still when i click on map, the "map is clicked" message does not appear in console line.. any idea??

the changed app.js file :

require([

"dojo/parser",

"dojo/on",

"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 Extent({

"xmin":817962,

"ymin":-187036,

"xmax":1566109,

"ymax":785554,

"spatialReference":{"wkid":32640}

});

var map = new 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));

});

Re: custom template-based widget does not work correctly

Mariagomez1 — Sat, 09 Apr 2016 10:36:20 GMT

Thank you guys . the problem solved. thank you Ken and Robert.

Re: custom template-based widget does not work correctly

RobertScheitlin__GISP — Sat, 09 Apr 2016 12:28:42 GMT

Maria,

Don't forget to mark this thread as answered.