nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Load Layers from Config file

LuciHawkins

Is anyone familiar with loading layers from a config file? I am trying to do it and I get various results depending upon the method I try. The method quoted gives me duplicate entries of each layer added. I have created the array called layrnames, but cannot determine proper function to use to load all the layers names I have pushed into the array. Any help would be greatly appreciated ð

Thanks, Luci

function init(){
                esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://fwb-gissrv/ArcGIS/rest/services/Geometry/GeometryServer");

                //create popup for multiple popups
                var popup = new esri.dijit.Popup({
                    fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([240, 128, 128, 0.25]))
                }, dojo.create("div"));

                //map.spatialReference = new esri.SpatialReference({wkid:102100});

                //set initial extent
                var initExtent = new esri.geometry.Extent(-9651200, 3555500, -9636400, 3562470, new esri.SpatialReference({
                    "wkid": 102100
                }));

                locator = new esri.tasks.Locator("http://fwb-gissrv/ArcGIS/rest/services/GeoCodes/AddressessFWB/GeocodeServer");
                dojo.connect(locator, "onAddressToLocationsComplete", showResultsl);

                //load map
                map = new esri.Map("map", {
                    extent: initExtent,
                    slider: true,
                    lods: lods,
                    infoWindow: popup
                });

                //add basemap gallery tiles
                createBasemapGallery();

                dojo.connect(basemapGallery, "onError", function(msg){
                    console.log(msg)
                });

                dojo.xhrGet({
                    url: "Config.json",
                    handleAs: "json",
                    preventCache: true,
                    load: function(responseObject, ioArgs){
                        layrname = responseObject.Lyrname;

                        //add layers from config file
                        if (layrname.length != 0) {
                            for (var i = 0; i < layrname.length; i++) {
                                layname = (layrname.lname);
                                laytitle = (layrname.ltitle);
                                layurl = (layrname.lUrl);
                                layrvis = (layrname.lVisb);
                                layid = (layrname.lyid);
                                layname = new esri.layers.ArcGISDynamicMapServiceLayer(layurl, {
                                    id: layid,
                                    visible: layrvis
                                });
                                legendLayers.push({
                                    layer: layname,
                                    title: laytitle
                                });
        layrnames.push({
         layern: layname
        });
        map.addLayer(layname);
                            }
                        };

                        dojo.connect(map, 'onLayeraddResult', function(results){
                            var legend = new esri.dijit.Legend({
                                map: map,
                                layerInfos: legendLayers
                            }, "legendDiv");
                            legend.startup();
                        });

      //map.addLayers([layname]);

                        dojo.connect(map, 'onLayerAddResult', function(results){

                            //add check boxes
                            dojo.forEach(legendLayers, function(layer){
                                var layerName = layer.title;
                                var checkBox = new dijit.form.CheckBox({
                                    name: "checkBox" + layer.layer.id,
                                    value: layer.layer.id,
                                    checked: layer.layer.visible,
                                    onChange: function(evt){
                                        var clayer = map.getLayer(this.value);
                                        clayer.setVisibility(!clayer.visible);
                                        this.checked = clayer.visible;
          legend.refresh();
                                    }
                                });

                                //add the check box and label to the toc
                                dojo.place(checkBox.domNode, dojo.byId("toggle"), "after");
                                var checkLabel = dojo.create('label', {
                                    'for': checkBox.name,
                                    innerHTML: layerName
                                }, checkBox.domNode, "after");
                                dojo.place("<br />", checkLabel, "after");
                            });

                        });

                    }
                });

Vind meer berichten getagd met

Accepted answers

BenFousek

Luci -
I left too much proprietary junk in there. Start simple and build from there.
js object

var layersDynamic = [{     url: 'http://server/ArcGIS/rest/services/Flood/MapServer',     token: true,     name: 'Flood',     id: 'flood',     visible: false,     opacity: 1,     imageFormat: 'png24',     dpi: 96, }, {     url: 'http://server/ArcGIS/rest/services/MunicipalBoundaries/MapServer',     token: true,     name: 'Municipal Boundaries',     id: 'mboundaries',     visible: true,     opacity: 1,     imageFormat: 'png24',     dpi: 96, }];

iteration

dojo.forEach(layersDynamic, function(l) { addDynamic(l) });

function

function addDynamic(l) {     var url;     if (l.token == true) {         url = l.url + '?token=' + //TOKEN OR TOKEN VARIABLE HERE//     } else {         url = l.url     }     var layer = new esri.layers.ArcGISDynamicMapServiceLayer(url, {         id: l.id,         visible: l.visible,         opacity: l.opacity     });     layer.setImageFormat(l.imageFormat); //implicitly set - doesn't always work if added to layer object params     layer.setDPI(l.dpi); //implicitly set - doesn't always work if added to layer object params      var control = '<div id="' + l.id + '_layer_control"><input id="' + l.id + '_control_cb" />  ' + l.name + '<div>';     dojo.place(control, 'toc', 'first');     var checkbox = new dijit.form.CheckBox({         checked: l.visible,         onChange: function () {             if (layer.visible == true) {                 layer.hide()             } else {                 layer.show()             }         }     }, l.id + '_control_cb');     map.addLayer(layer); //last }

One thing to remember: if the service isn't secured "token" should be set to false; if it is you'll have to provide one.

All comments

LuciHawkins

Here is what I have, we are behind a firewall so you wont be able to get to our mapservices.

Thanks,

Luci

BenFousek

It's hard for me to debug via the forum. Zip your code and post, or private message me with it, so I can run it.

LuciHawkins

You have been such a great help. I apologize for being so ignorant on the subject. But, hopefully in time I will get it.

I have tried a couple of different ways to use your code above and I am running into errors. Currently, I have the var app statement in my default.html with my other variables. I added the app.legend=new code you have in the same default.html file in the function init() area of my code and it is before the addDynamic(l). I added the if statement to the end of my addTOC.js file right before the map.addlayer(layer); statement. The error I recieve is:

legend.js
Line: 19
Error: Unable to set value of the property 'innerHTML': object is null or undefined

Thanks,

Luci

BenFousek

Create an array for those layers you want in the legend:

var app = {
    mapParams: {
        legendLayers: []
    }
}

Create the legend as part of the onLoad function:

app.legend = new esri.dijit.Legend({ map: app.map, layerInfos: app.mapParams.legendLayers }, 'legend_container'); app.legend.startup();

When you are iterating through the layers, push the layer to the legend array:

if (l.legend == true) {
    app.mapParams.legendLayers.push({
        layer: layer,
        title: l.name
    })
}

The legend will update automatically.

It's not necessary to connect to the onLayerAddResult if you use the layer object in the addDynamic function. My addDyanamic and addFeature functions are by far my largest and most complex functions because of the layer object:

var layer = new esri.layers.ArcGISDynamicMapServiceLayer(url, { id: l.id, visible: l.visible, opacity: l.opacity });

It allows you to easily build controls, add layer functionality, etc in one shot with overall less code. For example: add the layer to a TOC widget, or set the layer up for use with an identify widget. This approach is also very useful with feature layers, when setting up infoTemplates, widgets in the popup, setting up editing, and such.

LuciHawkins

Now I cannot get it to work with the legend dijit. I changed it from onLayersAddResult to onLayerAddResult and the legendDIV pane is still not showing any layers. Any suggestions? This is what I have in my Default.html right before it runs function(l)

//add the legend
    dojo.connect(map, 'onLayerAddResult', function(results) {
     var layerInfo = dojo.map(results, function(layer, index) {
      return {
       layer : layer.layer,
       title : layer.layer.name
      };
     });
     if (layerInfo.length > 0) {
      var legendDijit = new esri.dijit.Legend({
       map : map,
       layerInfos : layerInfo
      }, "legendDiv");
      legendDijit.startup();
     }
    });

I have even tried adding legendDijit.refresh(): after map.addLayer(layer); in your function... puzzled

I am also wondering if I can change the draw order of the layers. As it is now, the last layer in my layer list is the layer on TOP. I would like it to be the layer on the BOTTOM.

Thanks,

Luci

BenFousek

Here's the order I load js.

<script type="text/javascript" src="token.php"></script>
<script type="text/javascript">var djConfig = { parseOnLoad: true }</script>
<script type="text/javascript" src="http://serverapi or local install"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/application/?id=someAppId"></script>

LuciHawkins

That was it! Thank you! Thank you! Thank you!

BenFousek

It might be the comma after dpi name/value pair.

There should be no comma after the last name/value pair. Firefox won't object if you add it, but Internet Explorer will trigger an error: 'Expected identifier, string or number'.

LuciHawkins

Thank you so much. I believe it is working for the most part. When I tested it in IE 9 I get a debug message about 'layersDynamic" being undefined and my layers do not load. Is the proper method of loading the config.js (js object) the use of <script type="text/javascript" src="js/config.js"/> or do I need to load it in a different manner so that IE9 knows that is it a variable?

Thank you!

Luci

BenFousek

Luci -
I left too much proprietary junk in there. Start simple and build from there.
js object

var layersDynamic = [{     url: 'http://server/ArcGIS/rest/services/Flood/MapServer',     token: true,     name: 'Flood',     id: 'flood',     visible: false,     opacity: 1,     imageFormat: 'png24',     dpi: 96, }, {     url: 'http://server/ArcGIS/rest/services/MunicipalBoundaries/MapServer',     token: true,     name: 'Municipal Boundaries',     id: 'mboundaries',     visible: true,     opacity: 1,     imageFormat: 'png24',     dpi: 96, }];

iteration

dojo.forEach(layersDynamic, function(l) { addDynamic(l) });

function

function addDynamic(l) {     var url;     if (l.token == true) {         url = l.url + '?token=' + //TOKEN OR TOKEN VARIABLE HERE//     } else {         url = l.url     }     var layer = new esri.layers.ArcGISDynamicMapServiceLayer(url, {         id: l.id,         visible: l.visible,         opacity: l.opacity     });     layer.setImageFormat(l.imageFormat); //implicitly set - doesn't always work if added to layer object params     layer.setDPI(l.dpi); //implicitly set - doesn't always work if added to layer object params      var control = '<div id="' + l.id + '_layer_control"><input id="' + l.id + '_control_cb" />  ' + l.name + '<div>';     dojo.place(control, 'toc', 'first');     var checkbox = new dijit.form.CheckBox({         checked: l.visible,         onChange: function () {             if (layer.visible == true) {                 layer.hide()             } else {                 layer.show()             }         }     }, l.id + '_control_cb');     map.addLayer(layer); //last }

One thing to remember: if the service isn't secured "token" should be set to false; if it is you'll have to provide one.

LuciHawkins

I am still in the early learning stage of HTML5 and javascript. So, what I tried was this:

I copied your config object code and made a config.js file and modified it with my map services. I then added <script type="text/javascript" src="js/config.js"></script> so that it is the first item loaded in my default.html file.

Then, I removed all of the code from my default.html file that had anything to do with reading in my old config.json file.

I then copied your code for adding layers in my default.html where I would want the layers added after the lengendDijit was started.

Then, I copied the last code you have and made it into a utils.js file which I am loading at the top of my default.html file.

I tested it and the layers are not loading.

Any advice?

Thanks, Luci

BenFousek

In my opinion, you are making an unnecessary request and limiting easy enhancement of your application. I've stripped this down so it's simpler.

The first file I load in the head is config.js. Here's a config object:

var config = {
    token: 'some_token',
    tools: [
        {
            name: 'Measure',
            widget: 'bowc.widget.Measure',
            placeAt: 'new floating pane',
            placeControls: ['toolbar','mapContext']
        }
    ],
    layersDynamic: [
        {
            url: 'http://server/ArcGIS/rest/services/Flood/MapServer',
            token: true,
            name: 'Flood',
            id: 'flood',
            visible: false,
            opacity: 1,
            imageFormat: 'png24',
            dpi: 96,
            legend: true,
            parcelLabelControl: false,
            subLayerControl: true,
            identify: true,
            identifyLayers: ['*'],
            info: true,
            infoHtml: 'This layer displays the FEMA flood zones.'
        },
        {
            url: 'http://server/ArcGIS/rest/services/MunicipalBoundaries/MapServer',
            token: true,
            name: 'Municipal Boundaries',
            id: 'mboundaries',
            visible: true,
            opacity: 1,
            imageFormat: 'png24',
            dpi: 96,
            legend: true,
            parcelLabelControl: false,
            subLayerControl: true,
            identify: false,
            identifyLayers: undefined,
            info: true,
            infoHtml: 'This layer displays city limits and the urban growth boundary (UGB).'
        }
    ],
    layersFeature: [

    ]
}

You'll notice that beyond layers, there is also global objects (the token), and objects used to determine layout and functionality. In fact all my apps are built and controlled by a single base class, which uses the config object for all it's params.

Somewhere in my buildUI function it's time to add layers:

dojo.forEach(config.layersDynamic, function(l) { app.layers.addDynamic(l) });

Simple iteration of the object.

Here's app.layers.addDynamic()

var app = {
    layers: {
        addDynamic: function (l) {
            var url;
            if (l.token == true) {
                url = l.url + '?token=' + token
            } else {
                url = l.url
            }
            var layer = new esri.layers.ArcGISDynamicMapServiceLayer(url, {
                id: l.id,
                visible: l.visible,
                opacity: l.opacity
            });
            layer.setImageFormat(l.imageFormat); //implicitly set - doesn't always work if added to layer object params
            layer.setDPI(l.dpi); //implicitly set - doesn't always work if added to layer object params

            var control = '<div id="' + l.id + '_layer_control"><input id="' + l.id + '_control_cb" />  ' + l.name + ' &nbsp<img id="' + l.id + '_update" src="images/updating.gif" style="display:none; width:14px; height:14px;" /><div>'
            dojo.place(control, 'toc', 'first');
            var checkbox = new dijit.form.CheckBox({
                checked: l.visible,
                onChange: function () {
                    if (layer.visible == true) {
                        layer.hide()
                    } else {
                        layer.show()
                    }
                }
            }, l.id + '_control_cb');
            dojo.connect(layer, 'onUpdateStart', function (evt) {
                dojo.style(l.id + '_update', 'display', 'inline')
            });
            dojo.connect(layer, 'onUpdateEnd', function (evt) {
                dojo.style(l.id + '_update', 'display', 'none')
            });
            if (l.legend == true) {
             //add to legend
            }
            app.map.addLayer(layer); //last
        }
    }
}

Layer added with some extras. Just like yours.

So there's one approach which may help.

LuciHawkins

The Json formatter says the config.json file is "Valid". I tried to install firefox and firebug but there is a bug in the new version of firefox that is not allowing our proxy and non-proxy websites to work together.

ReneRubalcava

Can you use Firebug or Chrome dev tools to see what the responseObject looks like?

Also, you should wrap 'LyrName' with double quotes, so it's "LyrName" to be valid JSON. JSON doesn't use single quotes.

You can usually check your JSON validity wth this site.
http://jsonformatter.curiousconcept.com/

LuciHawkins

The file, config.json, is where I am pulling the information from. I have tried to just create an array of the layernames and cannot get it to work either.

Text I tried in Config.json file:

{
'AaLyrname' : "parcelsLayer, parcelsarLayer, firmLayer, hurricaneLayer"
}

Text I tried in Default.html file:

dojo.xhrGet({
url: "Config.json",
handleAs: "json",
preventCache: true,
load: function(responseObject, ioArgs){
layrname = responseObject.Lyrname;
aalyrname = responseObject.AaLyrname;
var aaalyrname=aalyrname.join();
map.addLayers([aaalyrname]);

It resides in a file:

{
'Lyrname' :
[
{"lname": "parcelsLayer", "ltitle": "Parcels", "lUrl": "http://fwb-gissrv/ArcGIS/rest/services/Maps/Parcels/MapServer", "lVisb": "false", "lyid": "parcelsaa"},
{"lname": "parcelsarLayer", "ltitle": "Parcels Aerial", "lUrl": "http://fwb-gissrv/ArcGIS/rest/services/Maps/ParcelsAerial/MapServer", "lVisb": "true", "lyid": "parcelsab"},
{"lname": "hydroLayer", "ltitle": "Hydrography", "lUrl": "http://fwb-gissrv/ArcGIS/rest/services/Maps/Hydrography/MapServer", "lVisb": "true", "lyid": "hydro"},
{"lname": "bfpLayer", "ltitle": "Building Footprints", "lUrl": "http://fwb-gissrv/ArcGIS/rest/services/Maps/BFP/MapServer", "lVisb": "true", "lyid": "bfpa"}
]
}

BenFousek

Is the json generated, e.g. asp, php, etc; or is it a file?

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.