Hi Guys
I have a custom basic widget to calculate the lengths of a polygon. The calculations seems to be fine but I cannott get the content to display in the infowindow. The setTitle seems to work fine but as soon as I try to set the content it shows nothing... any ideas?
my code:
define(['dojo/_base/declare', 'jimu/BaseWidget','esri/tasks/IdentifyTask',
'esri/tasks/IdentifyParameters',"esri/tasks/GeometryService", "esri/InfoTemplate"],
function(declare, BaseWidget, IdentifyTask, IdentifyParameters, GeometryService, InfoTemplate) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget], {
// Custom widget code goes here
baseClass: 'Dimension',
// this property is set by the framework when widget is loaded.
// name: 'Dimension',
// add additional properties here
//methods to communication with app container:
postCreate: function() {
this.inherited(arguments);
console.log('Dimension::postCreate');
mainMap = this.map;
var firstGraphic = null;
console.log(mainMap.infoWindow);
//user clicked point
mainMap.on("click", function (evt) {
//get site name clicked with id
//initialize identity task
identifyTask = new IdentifyTask("*/arcgis/rest/services/Merafong/Merafong_base/MapServer");
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 3;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [43];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;
identifyParams.width = mainMap.width;
identifyParams.height = mainMap.height;
identifyParams.geometry = evt.mapPoint;
identifyParams.mapExtent = mainMap.extent;
var results = new Array();
var currentClick = evt.mapPoint;
//run identify task results
identifyTask.execute(identifyParams, function (idResults) {
console.log(mainMap);
len = idResults[0].feature.geometry.rings[0].length;
//calculate lengths between each vertex
for (var i = 0; i < len; i++) {
var p1 = idResults[0].feature.geometry.rings[0]
if (i == len - 1){
var p2 = idResults[0].feature.geometry.rings[0][0]
}
else {
var p2 = idResults[0].feature.geometry.rings[0][i + 1]
}
var polyline = {
"paths": [[p1, p2]],
"spatialReference":{"wkid":idResults[0].feature.geometry.spatialReference.wkid}
};
polyline = new esri.geometry.Polyline(polyline);
polyline = esri.geometry.webMercatorToGeographic(polyline);
results = esri.geometry.geodesicLengths([polyline],esri.Units.METERS);
console.log(results);
}
});
mainMap.infoWindow.setTitle("Dimension Results");
var content = "<table border='1'><th><td>Erf Dimensions (Meter) </td></th>";
for (var i = 0; i < results.length - 1; i++){
content += "<tr><td>" + results + "</td></tr>";
}
content += "</table>";
mainMap.infoWindow.setContent("My infoWindow Content");
mainMap.infoWindow.show(mainMap.toScreen(currentClick), mainMap.getInfoWindowAnchor(mainMap.toScreen(currentClick)));
});
}
});
});
Solved! Go to Solution.
Brett,
I have updated several things in your code (changed your mixture of Legacy and AMD to just AMD coding style), updated your map infowindow stuff to be included in your identify deferred (this was your main issue), changed the way you were using arrays, etc:
define(['dojo/_base/declare', 'jimu/BaseWidget', 'esri/tasks/IdentifyTask',
'esri/tasks/IdentifyParameters', 'esri/tasks/GeometryService', 'esri/geometry/Polyline',
'esri/geometry/webMercatorUtils', 'esri/geometry/geodesicUtils', 'esri/units', 'dojo/_base/lang'
],
function(declare, BaseWidget, IdentifyTask, IdentifyParameters, GeometryService,
Polyline, webMercatorUtils, geodesicUtils, Units, lang) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget], {
// Custom widget code goes here
baseClass: 'Dimension',
// this property is set by the framework when widget is loaded.
// name: 'Dimension',
// add additional properties here
//methods to communication with app container:
postCreate: function() {
this.inherited(arguments);
console.log('Dimension::postCreate');
//user clicked point
this.own(this.map.on("click", lang.hitch(this, function(evt) {
//get site name clicked with id
//initialize identity task
identifyTask = new IdentifyTask("*/arcgis/rest/services/Merafong/Merafong_base/MapServer");
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 3;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [43];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;
identifyParams.width = this.map.width;
identifyParams.height = this.map.height;
identifyParams.geometry = evt.mapPoint;
identifyParams.mapExtent = this.map.extent;
var results = [];
var currentClick = evt.mapPoint;
//run identify task results
identifyTask.execute(identifyParams, lang.hitch(this, function(idResults) {
len = idResults[0].feature.geometry.rings[0].length;
//calculate lengths between each vertex
for (var i = 0; i < len; i++) {
var p1 = idResults[0].feature.geometry.rings[0][i]
if (i == len - 1) {
var p2 = idResults[0].feature.geometry.rings[0][0]
} else {
var p2 = idResults[0].feature.geometry.rings[0][i + 1]
}
var polyline = {
"paths": [
[p1, p2]
],
"spatialReference": {
"wkid": idResults[0].feature.geometry.spatialReference.wkid
}
};
polyline = new Polyline(polyline);
polyline = webMercatorUtils.webMercatorToGeographic(polyline, true);
results.push(geodesicUtils.geodesicLengths([polyline], Units.METERS));
console.log(results[i]);
}
this.map.infoWindow.setTitle("Dimension Results");
var content = "<table border='1'><th><td>Erf Dimensions (Meter) </td></th>";
for (var i = 0; i < results.length - 1; i++) {
content += "<tr><td>" + results[i] + "</td></tr>";
}
content += "</table>";
this.map.infoWindow.setContent(content);
this.map.infoWindow.show(currentClick);
}));
})));
}
});
});
Brett,
I have updated several things in your code (changed your mixture of Legacy and AMD to just AMD coding style), updated your map infowindow stuff to be included in your identify deferred (this was your main issue), changed the way you were using arrays, etc:
define(['dojo/_base/declare', 'jimu/BaseWidget', 'esri/tasks/IdentifyTask',
'esri/tasks/IdentifyParameters', 'esri/tasks/GeometryService', 'esri/geometry/Polyline',
'esri/geometry/webMercatorUtils', 'esri/geometry/geodesicUtils', 'esri/units', 'dojo/_base/lang'
],
function(declare, BaseWidget, IdentifyTask, IdentifyParameters, GeometryService,
Polyline, webMercatorUtils, geodesicUtils, Units, lang) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget], {
// Custom widget code goes here
baseClass: 'Dimension',
// this property is set by the framework when widget is loaded.
// name: 'Dimension',
// add additional properties here
//methods to communication with app container:
postCreate: function() {
this.inherited(arguments);
console.log('Dimension::postCreate');
//user clicked point
this.own(this.map.on("click", lang.hitch(this, function(evt) {
//get site name clicked with id
//initialize identity task
identifyTask = new IdentifyTask("*/arcgis/rest/services/Merafong/Merafong_base/MapServer");
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 3;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [43];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;
identifyParams.width = this.map.width;
identifyParams.height = this.map.height;
identifyParams.geometry = evt.mapPoint;
identifyParams.mapExtent = this.map.extent;
var results = [];
var currentClick = evt.mapPoint;
//run identify task results
identifyTask.execute(identifyParams, lang.hitch(this, function(idResults) {
len = idResults[0].feature.geometry.rings[0].length;
//calculate lengths between each vertex
for (var i = 0; i < len; i++) {
var p1 = idResults[0].feature.geometry.rings[0][i]
if (i == len - 1) {
var p2 = idResults[0].feature.geometry.rings[0][0]
} else {
var p2 = idResults[0].feature.geometry.rings[0][i + 1]
}
var polyline = {
"paths": [
[p1, p2]
],
"spatialReference": {
"wkid": idResults[0].feature.geometry.spatialReference.wkid
}
};
polyline = new Polyline(polyline);
polyline = webMercatorUtils.webMercatorToGeographic(polyline, true);
results.push(geodesicUtils.geodesicLengths([polyline], Units.METERS));
console.log(results[i]);
}
this.map.infoWindow.setTitle("Dimension Results");
var content = "<table border='1'><th><td>Erf Dimensions (Meter) </td></th>";
for (var i = 0; i < results.length - 1; i++) {
content += "<tr><td>" + results[i] + "</td></tr>";
}
content += "</table>";
this.map.infoWindow.setContent(content);
this.map.infoWindow.show(currentClick);
}));
})));
}
});
});
Hi Robert
Thanks a lot for getting back to me and providing me with the correct code. Coming from a .NET background my JS coding style is a bit behind especially when it comes to legacy vs AMD coding style.
I need to get into the AMD style it seems, thanks again.
Just another question Robert, After I have closed the widget the onMap click event still seems to be firing. How could I stop that event when the widget is closed? I know you have the 1 method which runs when the widget is closed but I have no idea how to stop the onclick event?
Brett Kruger
Brett,
For that you need to assign a var to the map click event handler:
this.own(this.mapClickEvent = this.map.on("click", lang.hitch(this, function(evt) {
then in the widget close function call:
this.mapClickEvent.remove();