Registering events with class variables in a class definition

JohnCorrea · ‎03-26-2014

I am trying to write a MapLoader class where all of my layers and map properties are defined within the class as calss properites. My main html pages loads my module from my package and then I call var mapLoader = new MapLoader(). Before this I had some regular code where I would hover over a municipal boundary and it would highlight it using its "mouse-over" method. It would also attach the event properties to elements within my page. It worked marvelously and I liked it. However, to make my code more readable and less spaghetti, I decided to make a class definition having my layers and map predefined within the MapLoader class. The constructor instantiates the map, layers and layer properties. Then the user can call a method to add those layers to a map. It works well until I get to the point of registering the event to the township layer. In the first example of my code, everything works fine and whichever township the mouse hovers above, the events trigger the selection of that township as well as display that townships properties. When I try to define that event referring to the class variable version using this.townshiop.on("mouse-over", funciton()etc....), it will only react when I first hover into the map showing the township on the edge between my legend pane and my map. It will ignore events when I cross into other boundaries within the map. I am posting the differences of my code below. Is this a glitch the ESRI developers didn't think about or is there a way I can get the new method to work like the old?

Old code that works

var layers = new Array();

            var secSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0]))
            secSymbol.setOutline(new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new Color([175, 175, 175]), 1));

            var sectionRender = new SimpleRenderer(secSymbol);

            var sections = new FeatureLayer("http://........................../Dakotas_PLSS/FeatureServer/2",
                {mode: FeatureLayer.MODE_ONDEMAND, outFields: ["Township", "Section"]});

            sections.setRenderer(sectionRender);

            layers.push(sections);

            var townSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0]))
            townSymbol.setOutline(new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new Color([105, 105, 105]), 2));

            var renderer = new SimpleRenderer(townSymbol);

            var townships = new FeatureLayer("http://......Dakotas_PLSS/FeatureServer/1",
                {mode: FeatureLayer.MODE_ONDEMAND, outFields: ["NAME", "COUNTY"]});

            townships.setRenderer(renderer);

            var defTownSelectSymbol = new SimpleFillSymbol().setColor(new Color([255, 178, 102, 0.1]))
            defTownSelectSymbol.setOutline(new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new Color([255, 178, 102]), 4));

            townships.setSelectionSymbol(defTownSelectSymbol);

            townships.on("mouse-over", function (event) {

                var name = event.graphic.attributes.NAME;
                var county = event.graphic.attributes.COUNTY;

                dom.byId('townshipAttribute').innerHTML = "Last hovered: <b style='color: orange'> "
                    + name + " </b> of " + county + " County";

                var query = new Query();
                query.where = "NAME = '" + name + "' AND COUNTY = '" + county + "'";
                query.returnGeometry = true;
                query.outFields = ["NAME", "COUNTY"];

                townships.selectFeatures(query,FeatureLayer.SELECTION_NEW);

            });

            layers.push(townships);

            var points = new FeatureLayer("http://services.........../PATracking/FeatureServer/0",
                {outFields: ["MAP_SITE", "REPAIR_TYPE_ID", "DISASTER_NUMBER", "PW_NUMBER"]});

            points.on("click", function (event) {
                dom.byId("siteAttribute").innerHTML = " Last Clicked: <br> Disaster - <b>" + event.graphic.attributes.DISASTER_NUMBER + "</b> <br> Project - <b>" +
                    event.graphic.attributes.PW_NUMBER + "</b> <br> Map Site - <b>" + event.graphic.attributes.MAP_SITE + "</b>";
            });

            layers.push(points);

            map.on("layers-add-result", function (evt) {
                var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {

                    console.log("loading layer " + index);
                    return { layer: layer.layer, title: layer.layer.name.replace(/_/g, " ") };

                });

                layerInfo.sort(function(a, b){

                    var titleA = a.title;
                    var titleB = b.title;

                    if(titleA < titleB) return -1;
                    if(titleA > titleB) return 1;
                    return 0;

                });

                if (layerInfo.length > 0) {

                    var legendDijit = new Legend({
                        map: map,
                        title: "PA Tracking",
                        layerInfos: layerInfo
                    }, "legendDiv");

                    legendDijit.startup();
                }
            });

            map.addLayers(layers);

New code that kind of works

define([

    'esri/map',
    'esri/layers/FeatureLayer',
    'esri/layers/LabelLayer',
    'esri/tasks/query',
    'esri/tasks/QueryTask',
    'esri/dijit/Geocoder',
    'esri/dijit/Legend',
    'esri/symbols/SimpleLineSymbol',
    'esri/symbols/SimpleFillSymbol',
    'esri/renderers/SimpleRenderer',
    'esri/InfoTemplate',
    'dojo/data/ItemFileReadStore',
    'dojo/parser',
    'dojo/dom',
    'dojo/on',
    'dojo/_base/Color',
    'dojo/_base/connect',
    'dojo/_base/array',
    'dojo/_base/declare',
    'dijit/registry',
    'esri/dijit/Measurement',
    'dojo/domReady!'

], function (Map, FeatureLayer, LabelLayer, Query, QueryTask, Geocoder, Legend, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, InfoTemplate, ItemFileReadStore, parser, dom, on, Color, connect, arrayUtils, declare, registry, Measurement) {

    return declare("demo.MapLoader", null, {

        map: null,
        townships: null,
        sections: null,
        points: null,

        constructor: function (node) {

            /* create map with the associated node argument */
            this.map = new Map(node, {
                center: [-98.8962012, 48.1182076],
                zoom: 12,
                basemap: "osm"
            });

            /* create three layers for map and desired symbology */

            var secSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0]))
            secSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([175, 175, 175]), 1));

            var sectionRender = new SimpleRenderer(secSymbol);

            this.sections = new FeatureLayer("http://services...................Dakotas_PLSS/FeatureServer/2",
                {mode: FeatureLayer.MODE_ONDEMAND, outFields: ["Township", "Section"]});

            this.sections.setRenderer(sectionRender);

            /* un selected symbology */
            var townSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0]))
            townSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([105, 105, 105]), 2));

            var townRenderer = new SimpleRenderer(townSymbol);

            /* selection symbology */
            var defTownSelectSymbol = new SimpleFillSymbol().setColor(new Color([255, 178, 102, 0.1]))
            defTownSelectSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 178, 102]), 4));

            this.townships = new FeatureLayer("http://services........................./Dakotas_PLSS/FeatureServer/1",
                {mode: FeatureLayer.MODE_ONDEMAND, outFields: ["NAME", "COUNTY"]});

            this.townships.setRenderer(townRenderer);
            this.townships.setSelectionSymbol(defTownSelectSymbol);

            this.points = new FeatureLayer("http://services................................/PATracking/FeatureServer/0",
                {outFields: ["MAP_SITE", "REPAIR_TYPE_ID", "DISASTER_NUMBER", "PW_NUMBER"]});

        },

        registerMapEvents: function(){

            var legendMap = this.map;

            this.map.on("layers-add-result", function (evt) {
                var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {

                    console.log("loading layer " + index);
                    return { layer: layer.layer, title: layer.layer.name.replace(/_/g, " ") };

                });

               

        },

        addInternalLayers: function(){


            this.map.addLayers([ this.sections,  this.townships, this.points]);

            this.registerLayerEvents();

        },

        registerLayerEvents: function(){

            this.townships.on("mouse-over", function (event) {

                var name = event.graphic.attributes.NAME;
                var county = event.graphic.attributes.COUNTY;

                dom.byId('townshipAttribute').innerHTML = "Last hovered: <b style='color: orange'> "
                    + name + " </b> of " + county + " County";

                var query = new Query();
                query.where = "NAME = '" + name + "' AND COUNTY = '" + county + "'";
                query.returnGeometry = true;
                query.outFields = ["NAME", "COUNTY"];

                this.townships.selectFeatures(query,FeatureLayer.SELECTION_NEW);

            });
        }
    });
});