adding multiple feature layer

[EricLussier]

Hi,

I would like to know if it is possible to add mant feature layers in the arcgis javascript api?

When my web apps intitialize, I can add a feature layer, but I have not been able to add a second one.

Thanks.

[__Rich_]

Yes, it is.

Have you got an example of your code?

[EricLussier]

Hi Rick,

This is the code. the feature layer should be added in the zoomEnd based on scale.

The event onZoomEnd is register and fires up setting the scale of the map  in the appropriate place holder in the html page.

Something like should get the new feature layer added:

if (this.map.getScale() === 100000){
        addFeatureLayer2(this.map); // where addfeatureLayer2 is should be pretty much the same as addFeatureLayer function.
}


Thanks.




define(["dojo/_base/declare", "esri/map", "esri/layers/FeatureLayer", "dojo/_base/connect","dojo/topic", "dojo/_base/lang"],
    function (declare, esriLib, featureLib,connect,topic,lang) {
        return declare (null, {
            mapDivName : null,
            constructor: function (mapDiv,args) {
    topic.subscribe('dimension/changed', lang.hitch(this, this.resizeMap));
    topic.subscribe('zoom/end', lang.hitch(this, this.zoomEnd));
                this.mapDivName = mapDiv;
            },
            initialize: function() {
                //var initialExtent = new esri.geometry.Extent({"xmin":-13050590.679808607,"ymin":3848824.1306140213,"xmax":-13033430.566958608,"ymax":3863366.2752452563,"spatialReference":{"wkid":102100}});
                this.map = new esri.Map(this.mapDivName);
                var baseLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://xxx/xxx/rest/services/xxx/MapServer");
    var opLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("http://xxx/xxx/rest/services/xxx/xxx/MapServer", { opacity: 0.8 });
   
    var opLayer2 = new esri.layers.ArcGISDynamicMapServiceLayer("http://xxx/xxx/rest/services/xxx/xxx/MapServer", { opacity: 0.8 });
    var opLayer3 = new esri.layers.ArcGISDynamicMapServiceLayer("http://xxx/xxx/rest/services/xxx/MapServer", { opacity: 0.8 });
    
                this.map.addLayers([baseLayer,opLayer1,opLayer2,opLayer3]);
   
                this.featureLayer = this.addFeatureLayer();
                this.map.resize();
                this.map.addLayer(this.featureLayer);
            },
            resizeMap: function() {
                this.map.resize();
                this.map.reposition();
            },
            zoomEnd: function() {
                var s = dojo.byId("rightDiv");
                s.innerHTML = this.map.getScale();
   
   
            },
            addFeatureLayer: function() {
                var info_content = "<table><tr><td><b>Band Number:</b></td><td style='text-align:right'>${BAND_NUMBER}</td></tr>"
                    + "<tr><td><b>Service Center:</b></td><td style='text-align:right'>${SERVICE_CENTER}</td></tr>"
                    + "<tr><td><b>Registered Population:</b></td><td style='text-align:right'>${REGISTERED_POPULATION}</td></tr></table>";
                var infoTemplate1 = new esri.InfoTemplate("${BAND_NAME}", info_content);
   
    var featureLayer1 = new esri.layers.FeatureLayer("http://xxx/xxx/rest/services/xxx/xxx/MapServer/1",{
                    mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                    infoTemplate: infoTemplate1,
                    id: "OBJECTID",
                    outFields: ["*"]
                });
    return featureLayer1;
            }
  
        });

    });

[__Rich_]

Could you edit your post and wrap the code in code tags, it will help with readability!

define(["dojo/_base/declare", "esri/map", "esri/layers/FeatureLayer", "dojo/_base/connect","dojo/topic", "dojo/_base/lang"],
    function (declare, esriLib, featureLib,connect,topic,lang) {
        return declare (null, {
            mapDivName : null,
            constructor: function (mapDiv,args) {
    topic.subscribe('dimension/changed', lang.hitch(this, this.resizeMap));
    topic.subscribe('zoom/end', lang.hitch(this, this.zoomEnd));
                this.mapDivName = mapDiv;
            },
            initialize: function() {
                //var initialExtent = new esri.geometry.Extent({"xmin":-13050590.679808607,"ymin":3848824.1306140213,"xmax":-13033430.566958608,"ymax":3863366.2752452563,"spatialReference":{"wkid":102100}});
                this.map = new esri.Map(this.mapDivName);
                var baseLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://xxx/xxx/rest/services/VECTOR_BASEMAPS/xxx/MapServer");
    var opLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("http://xxx/xxx/rest/services/VECTOR_BASEMAPS/xxx/MapServer", { opacity: 0.8 });
    
    var opLayer2 = new esri.layers.ArcGISDynamicMapServiceLayer("http://xxx/xxx/rest/services/xxx/xxx/MapServer", { opacity: 0.8 });
    var opLayer3 = new esri.layers.ArcGISDynamicMapServiceLayer("http://xxx/xxx/rest/services/xxx/MapServer", { opacity: 0.8 });
     
                this.map.addLayers([baseLayer,opLayer1,opLayer2,opLayer3]);
    
                this.featureLayer = this.addFeatureLayer();
                this.map.resize();
                this.map.addLayer(this.featureLayer);
            },
            resizeMap: function() {
                this.map.resize();
                this.map.reposition();
            },
            zoomEnd: function() {
                var s = dojo.byId("rightDiv");
                s.innerHTML = this.map.getScale();
    
    
            },
            addFeatureLayer: function() {
                var info_content = "<table><tr><td><b>Band Number:</b></td><td style='text-align:right'>${BAND_NUMBER}</td></tr>"
                    + "<tr><td><b>Service Center:</b></td><td style='text-align:right'>${SERVICE_CENTER}</td></tr>"
                    + "<tr><td><b>Registered Population:</b></td><td style='text-align:right'>${REGISTERED_POPULATION}</td></tr></table>";
                var infoTemplate1 = new esri.InfoTemplate("${BAND_NAME}", info_content);
    
    var featureLayer1 = new esri.layers.FeatureLayer("http://xxx/xxx/rest/services/xxx/xxx/MapServer/1",{
                    mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                    infoTemplate: infoTemplate1,
                    id: "OBJECTID",
                    outFields: ["*"]
                });
    return featureLayer1; 
            }
   
        });

    });

Out of time today, will try to have a look tomorrow...someone else might be able to help you in the meantime.

P.S. there are several samples that use multiple feature layers also I posted some code the other day for another member concerning toggling of multiple feature layers, maybe that's worth finding...

[EricLussier]

see attachment Rich.

[EricLussier]

Thanks Rich.

[__Rich_ · Accepted solution]

I've knocked up a quick page that uses your module - see attached zip, save both files to the same directory on your web server.

Putting coding style/approach aside (it's mostly subjective anyway) your module does function ok, all I've done is add a simple method to your class to add additional feature layers - all you need to pass it the URI.  Obviously you could extend this, or change to a factory pattern etc. etc.

To demonstrate the method I've included 2 things:

1.  A textbox and button to add feature layers - just paste the URI of any feature layer into the box and click the button
2.  I've put some code into your module that adds a hurricane feature layer when the scale is <= 10000000

The coding is all very noddy, it's only purpose is to demonstrate that you can achieve what you want rather than a lesson in elegant code!

[EricLussier]

Hi Rich,

Thanks for you help and the code sample.

Using the code, I able to add all the feature layers I want.

topic.subscribe('zoom/end', lang.hitch(this, this.zoomEnd)); //Does esri.Map publish this?

Yes, zoomEnd exist as a map event.

Thanks once more.

Eric.

[__Rich_]

Hi Rich,

Thanks for you help and the code sample.

Using the code, I able to add all the feature layers I want.

Excellent, glad to have helped.  (do you think you could mark the relevant post as the answer?)

topic.subscribe('zoom/end', lang.hitch(this, this.zoomEnd)); //Does esri.Map publish this?

Yes, zoomEnd exist as a map event.
Eric.

Yes, there's a simple event (onZoomEnd) but as I'm sure you are aware the publish/subscribe topic mechanism is not the same as the simple event mechanism which uses dojo/connect, more detail here:- http://dojotoolkit.org/reference-guide/1.7/quickstart/events.html#quickstart-events

I wasn't aware that esri.Map made use of the pub/sub topic system?  (in fact, I wasn't aware that any of the classes in the API use it)

[EricLussier]

Hi Rich,

It is because the web app is made using MVC.

The topic is use in the bootstrapper to publish the event and then you register to the event in the business logic module.

Not to familiar with all this, but this is how the contoller look like. Thanks


[HTML]require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane","dijit/layout/AccordionContainer",
    "my/map","dojo/aspect","dijit/registry","dojo/_base/connect", "dojo/topic", "dojo/domReady!"],
    function(parser, borderContainer, contentPane, accordion, map, aspect,registry,connect,topic)
    {
        parser.parse();
  var _map = addMapModule();

 
     function addMapModule() {
            var _map = new map('mapDiv');
            _map.initialize();
            return _map;
        };

    connect.connect(_map.map, 'onZoomEnd', function () {         
                topic.publish('zoom/end');
       }); 
    });[/HTML]