AnsweredAssumed Answered

Creating a layer "widget" using dojo declare

Question asked by jay.gregory on Jul 21, 2014

I'm trying to create a layer "widget" that essentially specifies a feature layer, renderer, and infoWindow and can be reused across multiple applications.  This would provide consistency across our maps, and dictate one location if we wanted to change icons, rendering, or info window contents (which could also also be overwritten for specific applications).

 

Anyway, I'm having trouble with some JS heavy stuff that I don't understand.

 

I want to create some scale dependent rendering based on an attribute field that shows more feature types (greater detailed feature types) as you zoom in.  In a standard application, I achieved this by:

 

map.on('zoom-end', function(result){
var query = "ZoomLevel <= " + result.level.toString();
layer.setDefinitionExpression(query)});

 

However, when I did this in my reusable widget, it didn't work, because my layer object wasn't accessible within the scope of the 'zoom-end' callback.

I know through research that I need to use Dojo's lang.hitch function, but am unclear how to implement it.  The below code works when I instantiate the object in my app, but when I zoom in, it throws and error saying this.airportsLayer is undefined (the zoom-end callback doesn't have access to the scope).  Can anyone advise me how to use lang.hitch appropriately to create the desired effect (which is once instantiated, it automatically sets the zoom-end handler on the map).

 

Thanks!

define([
        "dojo/_base/declare",
        "esri/layers/FeatureLayer",
        "esri/InfoTemplate",
        "esri/symbols/PictureMarkerSymbol",
        "esri/renderers/UniqueValueRenderer",
        "esri/symbols/SimpleFillSymbol",
        "esri/Color",
        "dojo/_base/lang",
        "dojo/domReady!"
    ],
    function(
        declare,
        FeatureLayer,
        InfoTemplate,
        PictureMarkerSymbol,
        UniqueValueRenderer,
        SimpleFillSymbol,
        Color,
        lang
    ) {
        return declare(null, {
            constructor: function(map) { //constructor requires your desired name
                this.map = map;
                this.infoTemplate = new InfoTemplate("Airport Code: ${LocationID}", "<ul><li><b>Name: </b>${FacilityName}</li><li><b>Address: </b>${OwnerAddress},&nbsp${OwnerCSZ}</li><li><b>Flights Daily: </b>${FlDaily}</li><li>${UseType} ${Type}</li></ul>");
                this.airportsLayer = new FeatureLayer("http://myserver:6080/arcgis/rest/services/EON/FAA/MapServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: ["ZoomLevel", "Type", "OEP35", "Image", "LocationID", "FacilityName", "OwnerAddress", "OwnerCSZ", "Part139", "OEP35", "UseType", "Type", "FlDaily", "Image", "URL", "URL2"],
                    infoTemplate: this.infoTemplate,
                    visible: true
                });
                this.defaultSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.75]));
                this.renderer = new UniqueValueRenderer(this.defaultSymbol, "Image");
                this.renderer.addValue("military-airport-part139.png", new PictureMarkerSymbol("../../icons/airports/military-airport-part139.png", 24, 24));
                this.renderer.addValue("military-airport.png", new PictureMarkerSymbol("../../icons/airports/military-airport.png", 16, 16));
                this.renderer.addValue("military-heliport.png", new PictureMarkerSymbol("../../icons/airports/military-heliport.png", 16, 16));
                this.renderer.addValue("private-airport.png", new PictureMarkerSymbol("../../icons/airports/private-airport.png", 16, 16));
                this.renderer.addValue("private-airport-part139.png", new PictureMarkerSymbol("../../icons/airports/private-airport-part139.png", 24, 24));
                this.renderer.addValue("private-balloonport.png", new PictureMarkerSymbol("../../icons/airports/private-balloonport.png", 16, 16));
                this.renderer.addValue("private-gliderport.png", new PictureMarkerSymbol("../../icons/airports/private-gliderport.png", 16, 16));
                this.renderer.addValue("private-heliport.png", new PictureMarkerSymbol("../../icons/airports/private-heliport.png", 16, 16));
                this.renderer.addValue("private-seaplane base.png", new PictureMarkerSymbol("../../icons/airports/private-seaplane.png", 16, 16));
                this.renderer.addValue("private-ultralight.png", new PictureMarkerSymbol("../../icons/airports/private-ultralight.png", 16, 16));
                this.renderer.addValue("public-airport.png", new PictureMarkerSymbol("../../icons/airports/public-airport.png", 16, 16));
                this.renderer.addValue("public-airport-oep35.png", new PictureMarkerSymbol("../../icons/airports/public-airport-oep35.png", 32, 32));
                this.renderer.addValue("public-airport-part139.png", new PictureMarkerSymbol("../../icons/airports/public-airport-part139.png", 24, 24));
                this.renderer.addValue("public-balloonport.png", new PictureMarkerSymbol("../../icons/airports/public-balloonport.png", 16, 16));
                this.renderer.addValue("public-gliderport.png", new PictureMarkerSymbol("../../icons/airports/public-gliderport.png", 16, 16));
                this.renderer.addValue("public-heliport.png", new PictureMarkerSymbol("../../icons/airports/public-heliport.png", 16, 16));
                this.renderer.addValue("public-seaplane base.png", new PictureMarkerSymbol("../../icons/airports/public-seaplane.png", 16, 16));
                this.renderer.addValue("public-ultralight.png", new PictureMarkerSymbol("../../icons/airports/public-ultralight.png", 16, 16));
                this.airportsLayer.setRenderer(this.renderer);
                this.airportsLayer.setDefinitionExpression("OEP35 = 1");
                this.setZoomDependentRendering = lang.hitch(this, this.setZoomDependentRendering)
                this.setZoomDependentRendering();


            },
            setZoomDependentRendering: function() {
                this, this.map.on('zoom-end', function(a) {
                    var query = "ZoomLevel <= " + a.level.toString();
                    console.log(a);
                    console.log(this.airportsLayer);
                    this.airportsLayer.setDefinitionExpression(query);
                });


            }
        });
    });

Outcomes