Use buttons to add/remove layers

[MatthewBorr]

I'm using Javascript API legacy code to load feature layers when clicking a "create map" button.

Depending on which radio button (Male or Female) is selected, a different renderer is applied to the layer to create a choropleth map.

The "Create Map" button is working, the renderer is applied, and the proper choropleth appears like it should.

However, the problem is in the "Delete Map" button. I call a function that uses removelayer(ct). It works when I have clicked "Create Map" only once.

If I click "Create Map" twice, it creates two layers, and the "Delete Map" button will only remove the top layer; I want both layers removed that were created earlier. Here is the site (Javascript and HTML). Not sure how to insert code into the new forum.

http://homepages.wmich.edu/~m4borr/radio-generalize-test-render3.html

Thanks!

[TimWitt2]

Matt,

could you add an if statement to your "Create Map" that checks if the layer already exists and if it does, run the function that you have in your "delete map" button, before creating the layer?

With this you should only have one layer at a time created.

Hope this helps!

Tim

[MatthewBorr]

Thanks for replying.

I've thought of that, and would certainly be the simplest method, but I can't seem to implement it. I am stuck. I've tried putting this in beginning of the Create map function:

if (ct.loaded = 'true') {map.removeLayer(ct)}

But it delivers an error.

[MatthewBorr]

So here's what I have: Any suggestions?

------------------------------------------------------

function funcall(radioOne,radioTwo){

          ct = new esri.layers.FeatureLayer("http://gis-server.cc.wmich.edu/harcgis/rest/services/hdream/testrend/MapServer/0",{

            mode: esri.layers.FeatureLayer.MODE_ONDEMAND,

});    

var button1 = document.getElementById("radioOne");

var button2 = document.getElementById("radioTwo");

if (button1.checked){

    var renderer = new esri.renderer.SimpleRenderer(new esri.symbol.SimpleFillSymbol().setOutline(new esri.symbol.SimpleLineSymbol().setWidth(0.5)));

          renderer.setColorInfo({

            field: "Sum_state_",

            minDataValue: 0,

            maxDataValue: 184,

            colors: [

              new esri.Color([255, 255, 255]),

              new esri.Color([127, 127, 0])

            ]

          }); ct.setRenderer(renderer);

          if (ct.loaded = 'true')

          map.addLayer(ct);

         }

else if (button2.checked) {

     var renderer2 = new esri.renderer.SimpleRenderer(new esri.symbol.SimpleFillSymbol().setOutline(new esri.symbol.SimpleLineSymbol().setWidth(0.5)));

          renderer2.setColorInfo({

            field: "Sum_mnthre",

            minDataValue: 0,

            maxDataValue: 184,

            colors: [

              new esri.Color([255, 255, 255]),

              new esri.Color([200, 40, 150])

            ]

          });    ct.setRenderer(renderer2);

          if (ct.loaded = 'true')

          map.addLayer(ct);

           }

};

function funcalldel(val){

     if (ct.loaded = 'true') {map.removeLayer(ct)}

};

Radio buttons:

<form action="">

<input type="radio" data-dojo-type="dijit.form.RadioButton" name="drink" id="radioOne" checked value="male"/> <label for="radioOne">Male</label> <br />

    <input type="radio" data-dojo-type="dijit.form.RadioButton" name="drink" id="radioTwo" value="female"/> <label for="radioTwo">Female</label> <br />

</form>

    <button data-dojo-type="dijit.form.Button" type="button" onclick="funcall();">

        <b>Create Map</b><br></button>

        <br><br>

        <button data-dojo-type="dijit.form.Button" type="button" onclick="funcalldel();">

        <b>Delete Map</b></button>

[YungKaiChin]

Instead of creating another map, can you just first create and then toggle the map on and off?

[OwenEarley]

Instead of removing a single layer you could use the map.removeAllLayers() method to reset the map.

This line:

if (ct.loaded = 'true') {map.removeLayer(ct)}

Becomes:

if (ct.loaded = 'true') {map.removeAllLayers()}

Owen

[MatthewBorr]

Thanks! Unfortunately, removeAllLayers removes every layer on the map, including the base layer. I need to keep the other layers in the map.

[AkshayHarshe]

Hi Matthew,

I am wondering if you want to create both layers on the map once by clicking Male radio button and Female radio button?

Depending on the functionality you want you can use one of the following.

Option 1: If adding only one layer on button click works for you then:

You can just disable the Create Map button using

document.getElementById("myBtn").disabled=true;

after you complete writing your IF statements inside funcall();

This way you don't need to worry about another layer getting added and you can keep your setup as is.

Option 2: If you need functionality of deleting multiple layers using delete button.

You may want to check following property of Map:

map.layerIds‌ (please click)

Inside your funcalldel() you can try writing this logic:

Since the create map will add will be on the top position you can get map.layerIds.length and store that in a variable (which will be layer you just added).

Then you can use map.removeLayer(layer[id])

Or you can even do this :

var layer = map.getLayer(map.layerIds[id]);

map.removeLayer(layer);

See if this works!

Thanks

Akshay H

[NicholasHaney]

The way I would handle this would be to create an array to hold the layer names of the layers that are added to the map. Each time a layer is added to the map call the .push() method to add it's name to your array. Then when the delete map button is clicked call the .removeLayers() method of the map and pass in your layer names array as the argument. This will remove all the layers that were added to the map. Finally, clear the layer name array.

[MatthewBorr · Accepted solution]

Thanks for great answers. I decided to go the route of disabling the create Map button in funcall with

dijit.byId("create").setAttribute('disabled', true);

Then in the delete function:

dijit.byId("create").setAttribute('disabled', false);

So the user always creates one map at a time.

Thanks again!