Remove a map layer

[ChrisRomsos]

Hi,

Last week the GeoNet community helped me get my fist web map application functioning!  Ive made a bit of progress since and find myself up against the limits of my javascript skill again.

I've got an app that calls a geoprocessing service and returns a map result.  It works as intended, once.  When I fire off a subsequent SubmitJob the new map layer is drawn underneath the existing layer (I presume it's drawn underneath because I don't see it).

So, seems that I could have the new layer draw on top using an index value but I'd rather just remove the layer and replace it with the new layer.

The function to add the layer looks like this:

// On Job Complete Callback add a dynamic map service using ResultMapService 

    function onTaskComplete(jobInfo, n){ 

        //replace mapservice url with your url and append jobid 

        var mapurl = "http://bhc.coas.oregonstate.edu:6080/arcgis/rest/services/geoprocessing/WeightedSum/MapServer/jobs/" + jobInfo.jobId;   

        //create a dynamic map service 

        var gpResultLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapurl, { 

        id: "WeightedSum", 

        opacity: 0.5 

        }); 

        //remove any existing model results and add new model result to the web application. 

        map.addLayer(gpResultLayer, n);

    }

I think I'd like to "remember" or return the gpResultLayer from this function such that the next time it executes I can add a map.removeLayer(gpResultLayerPrevious) before adding the new layer.

I tried adding:

var gpResultLayerPrevious = gpResultLayer

and

map.removeLayer(gpResultLayerPrevious)

to the above function but I think I need to make sure it gets returned from the function then passed in each time.  Any suggestions to how this might work?

Thanks, Chris

[RobertScheitlin__GISP]

Chris,

  Here is the relevant code changes to what Tim and you worked on.

      // On Job Complete Callback add a dynamic map service using ResultMapService
      function onTaskComplete(jobInfo) {
        if(app.gpResultLayer){
          map.removeLayer(app.gpResultLayer);
        }
        //replace mapservice url with your url and append jobid
        var mapurl = "http://bhc.coas.oregonstate.edu:6080/arcgis/rest/services/geoprocessing/RasterPlusModel/MapServer/jo..." + jobInfo.jobId;
        //create a dynamic map service
        app.gpResultLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapurl, {
          id: "WeightedSum",
          opacity: 0.5
        });
        //add to web application.
        map.addLayer(app.gpResultLayer);
      }

      app = {
        myGPSubmitJob: myGPSubmitJob,
        gpResultLayer: null
      };

[ChrisRomsos]

Thanks Robert,

I tried to implement your suggestion above here: PASTA

However the previous map layer remains.  I'll post my javascript below.

var app;

  require([
  "esri/map",
  "esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/dijit/BasemapToggle",
  "dojo/on",
  "dojo/parser",
  "esri/tasks/Geoprocessor",
  "dojo/dom",
  "dijit/layout/BorderContainer",
  "dijit/form/Button",
  "dojo/domReady!",
  "dijit/form/HorizontalSlider",
  "dijit/form/HorizontalRuleLabels",
  "dijit/form/HorizontalRule"


  ], function (Map,ArcGISDynamicMapServiceLayer,BasemapToggle,on,parser,Geoprocessor,dom,HorizontalSlider,HorizontalRuleLabels,HorizontalRule)
  {


  parser.parse();


  map = new Map("map", {
   basemap: "topo",
   center: [-124.5, 44.15],
   zoom: 8
  });


  var toggle = new BasemapToggle({
          map: map,
          basemap: "satellite"
        }, "BasemapToggle");
        toggle.startup();

  // Make 2 Horizontal Sliders Programatically
  // Create the rules
  var rulesNode = dojo.create(
  "div", {}, dojo.byId("horizSlider"), "first");
  var sliderRules = new dijit.form.HorizontalRule({
  container: "bottomDecoration",
  count: 11,
  style: "width: 5px;"
  }, rulesNode);
  var rulesNode2 = dojo.create(
  "div", {}, dojo.byId("horizSlider2"), "first");
  var sliderRules2 = new dijit.form.HorizontalRule({
  container: "bottomDecoration",
  count: 11,
  style: "width: 5px;"
  }, rulesNode);

  // Create the labels
        var labelsNode = dojo.create(
            "div", {}, dojo.byId("horizSlider"), "first");
        var sliderLabels = new dijit.form.HorizontalRuleLabels({
            container: "topDecoration",
            labelStyle: "font-style: italic; font-size: 0.75em"
        }, labelsNode);
  var labelsNode2 = dojo.create(
            "div", {}, dojo.byId("horizSlider2"), "first");
        var sliderLabels2 = new dijit.form.HorizontalRuleLabels({
            container: "topDecoration",
            labelStyle: "font-style: italic; font-size: 0.75em"
        }, labelsNode);

  // Create the sliders
    var horizSlider = new dijit.form.HorizontalSlider({
  minimum: 0,
  maximum: 1,
  pageIncrement: .20,
  value: .20,
  intermediateChanges: true,
  style: "height: 200px;"
  }, "horizSlider");

  var horizSlider2 = new dijit.form.HorizontalSlider({
  minimum: 0,
  maximum: 1,
  pageIncrement: .20,
  value: .20,
  intermediateChanges: true,
  style: "height: 200px;"
  }, "horizSlider2");

  // Start up the widgets
        horizSlider.startup();
  //horizSlider2.startup();
  sliderRules.startup();
  //sliderRules2.startup();
  sliderLabels.startup();
  //sliderLabels2.startup();

  var horizLabel = dojo.byId("horizValue");
  var horizLabel2 = dojo.byId("horizValue2");

  function updateHorizontalLabel() {
  // Update label
  horizLabel.innerHTML = horizSlider.get("value");
  }
  function updateHorizontalLabel2() {
  // Update label
  horizLabel2.innerHTML = horizSlider2.get("value");
  }

  dojo.connect(horizSlider,"onChange",updateHorizontalLabel);
  // Update label right away
  updateHorizontalLabel();

  dojo.connect(horizSlider2,"onChange",updateHorizontalLabel2);
  // Update label right away
  updateHorizontalLabel2();

  var weightedValue1 = dojo.byId("WeightedValueValue1");
  var weightedValue2 = dojo.byId("WeightedValueValue2");
  var Weight1;
  var Weight2;

  function updateWeighting() {
  // Update weighting calculations

  var weightSum = horizSlider.get("value")+horizSlider2.get("value");
  var weightFactor = 1/weightSum;

  weightedValue1.innerHTML = horizSlider.get("value")*weightFactor;
  weightedValue2.innerHTML = horizSlider2.get("value")*weightFactor;

  Weight1 = horizSlider.get("value")*weightFactor;
  Weight2 = horizSlider2.get("value")*weightFactor;

  }

  dojo.connect(horizSlider,"onChange",updateWeighting);
  // Update the weighting right away
  updateWeighting();

  dojo.connect(horizSlider2,"onChange",updateWeighting);
  // Update the weighting right away
  updateWeighting();

  //  Geoprocessing

  /* Step 1: Initialize Geoprocessing Task as a global variable.
  That is, declare the variable outside a function definition
  since we will be using gpTask variable in other methods */
  var gpTaskUrl="http://bhc.coas.oregonstate.edu:6080/arcgis/rest/services/geoprocessing/WeightedSum/GPServer/Weighte...";
  var gpTask = new Geoprocessor(gpTaskUrl);

  // Set output spatial reference property to map's spatial reference.
  // myMap is assumed to be an instance of map container esri.map.
  gpTask.outSpatialReference=map.spatialReference; 

  on(dom.byId("hotspotButton"), "click", myGPSubmitJob);
  //Step 3: Run the task
  function myGPSubmitJob(n){
  // Get the input rasters
  var Raster1 = "Midwater Device\\Initial\\suitability";
  var Raster2 = "Cetaceans\\Initial\\suitability";
  var params= {"Raster1":Raster1, "Weight1":Weight1, "Raster2":Raster2, "Weight2":Weight2};


  // Setup event handlers.
  dojo.connect(gpTask, "onJobComplete",onTaskComplete);
  dojo.connect(gpTask, "onError",onTaskFailure);
  dojo.connect(gpTask, "onStatusUpdate",onTaskStatus);
  gpTask.submitJob(params);
  }

  // On Job Complete Callback add a dynamic map service using ResultMapService
  function onTaskComplete(jobInfo, gpResultLayerPrevious){


  if(gpResultLayer){
  map.removeLayer(gpResultLayer);
  }

  //replace mapservice url with your url and append jobid
  var mapurl = "http://bhc.coas.oregonstate.edu:6080/arcgis/rest/services/geoprocessing/WeightedSum/MapServer/jobs/" + jobInfo.jobId;

  //create a dynamic map service
  var gpResultLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapurl, {
  id: "WeightedSum",
  opacity: 0.5
  });

  //remove any existing model results and add new model result to the web application.
  map.addLayer(gpResultLayer);

  // reset the gpResultlayerPrevious
  gpResultLayerPrevious = gpResultLayer;

  }


  // Event handler for onStatusUpdate event
  function onTaskStatus(jobInfo) {
  //write status to console to help debugging
  console.log(jobInfo.jobStatus);
  }

  // Event handler for onError event
  function onTaskFailure(error) {
  // Report error
  alert("Error:"+ error);
  }

   app = {
        myGPSubmitJob: myGPSubmitJob,
  gpResultLayer: null
      };
      });

[RobertScheitlin__GISP · Accepted solution]

Chris,

   Your issue is that you are creating a local var :

var gpResultLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapurl, { 
  id: "WeightedSum", 
  opacity: 0.5 
  });

In my code I am using the app.gpResultLayer object which is global.

[ChrisRomsos]

Thanks. - Chris

[RobertScheitlin__GISP]

Chris,

Glad to help. Now it is your turn to help the community by marking this question as answered.

1. All you have to do is click the "Correct Answer" link (the one with the little green star) on the post that provided the answer for you.
2. If the answer was not provided by one of the responders then you can mark any of the replies that you received as helpful by clicking on the "Actions" menu and choosing "Mark as Helpful"