Webapp builder Infowindow not showing content.

1457
3
Jump to solution
10-03-2016 01:31 AM
BrettKruger
New Contributor II

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

  });

});

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Emeritus

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);
                    }));
                })));
            }
        });
    });
BrettKruger
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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