topic Re: adding multiple feature layer in ArcGIS JavaScript Maps SDK Questions

adding multiple feature layer

EricLussier — Wed, 21 Nov 2012 12:38:52 GMT

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.

Re: adding multiple feature layer

__Rich_ — Wed, 21 Nov 2012 13:27:59 GMT

Yes, it is.

Have you got an example of your code?

Re: adding multiple feature layer

EricLussier — Wed, 21 Nov 2012 14:24:25 GMT

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

        });

    });

Re: adding multiple feature layer

EricLussier — Wed, 21 Nov 2012 14:47:04 GMT

see attachment Rich.

Re: adding multiple feature layer

EricLussier — Wed, 21 Nov 2012 14:56:21 GMT

Thanks Rich.

Re: adding multiple feature layer

__Rich_ — Thu, 22 Nov 2012 08:38:35 GMT

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!

Re: adding multiple feature layer

EricLussier — Thu, 22 Nov 2012 11:48:38 GMT

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.

Re: adding multiple feature layer

__Rich_ — Thu, 22 Nov 2012 12:04:08 GMT

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)

Re: adding multiple feature layer

EricLussier — Thu, 22 Nov 2012 17:46:58 GMT

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]

Re: adding multiple feature layer

__Rich_ — Thu, 22 Nov 2012 18:03:58 GMT

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]

Yep, whoever wrote that code is connecting to the map's onZoomEnd event then re-publishing it as a topic i.e. it's not in the out-the-box API class. (FWIW that code's not MVC-dependent/specific it's just some JS)

Glad you're up and running 🙂

Re: adding multiple feature layer

__Rich_ — Sun, 12 Dec 2021 05:03:44 GMT

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...