topic Re: Changing layer's opacity programmatically using a bootsrap button in ArcGIS JavaScript Maps SDK Questions

Changing layer's opacity programmatically using a bootsrap button

AlexGole — Wed, 08 Oct 2014 23:08:01 GMT

Hi all,

I am looking to have something similar to the TOC widget slider but, I would change the layer's opacity by click a bootstrap button. I am looking for a looping javascript that would allow the users to go from 0% - 100% by clicking. I am not really sure how to do this.

Any help is welcome,

thanks,

Alex

Re: Changing layer's opacity programmatically using a bootsrap button

RiyasDeen — Thu, 09 Oct 2014 04:58:05 GMT

Hi Alex,

Is this what you are after? Bootstrap checkboxes buttons to toggle layers not working.

Re: Changing layer's opacity programmatically using a bootsrap button

AlexGole — Thu, 09 Oct 2014 16:27:12 GMT

I am looking to do something similar to Philip Kral:

LWIS | CC Impact

If you look at his "layers" tab he has a layer list and on the right of each layer he has a button that allows you to change opacity programmatically. I think that looks very neat. I am a bit too new to programming to completely understand how he succeeded in achieving this opacity button.

Thank you,

Alex

Re: Changing layer's opacity programmatically using a bootsrap button

RobertScheitlin__GISP — Thu, 09 Oct 2014 17:51:54 GMT

Alex,

Here is a sample:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples   
      on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Explicitly Create Map Service Layer List</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="http://js.arcgis.com/3.11/"></script>
  <script>
    var map;
    require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/dom",
        "dojo/on",
        "dojo/query",
        "dojo/domReady!"
      ],
      function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, dom, on, query) {
        var layer, visibleLayerIds = [];

        map = new Map("map");

        //Use the ImageParameters to set the visibleLayerIds layers in the map service during ArcGISDynamicMapServiceLayer construction.  
        var imageParameters = new ImageParameters();
        imageParameters.layerIds = [2];
        imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;

        layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer", {
          "imageParameters": imageParameters
        });
        map.addLayer(layer);

        on(dom.byId("opacity"), "click", updateOpacity);


        function updateOpacity() {
          var cOp = layer.opacity;
          console.info(cOp);
          if (cOp < 0.9999999999999999) {
            layer.setOpacity(cOp + 0.1);
          } else {
            layer.setOpacity(0.1);
          }
        }
      });
  </script>
</head>

<body>
  This sample loads an ArcGISDynamicMapServiceLayer and presents a button to adjust the map services opacity.
  <br />
  <br />Layer List :
  <button type="button" class="btn btn-default btn-xs" title="Adjust opacity" id="opacity"><span class="glyphicon glyphicon-adjust"></span>
  </button>
  <br />
  <br />
  <div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>

</html>

Re: Changing layer's opacity programmatically using a bootsrap button

AlexGole — Thu, 09 Oct 2014 19:13:58 GMT

Robert that is exactly what I was looking for! Thank you!

Re: Changing layer's opacity programmatically using a bootsrap button

AlexGole — Thu, 09 Oct 2014 21:28:44 GMT

IS it possible to use "imageParameter Ids" above to change opacity for each of the layers now?

Thank you,

Alex

Re: Changing layer's opacity programmatically using a bootsrap button

RobertScheitlin__GISP — Thu, 09 Oct 2014 21:55:36 GMT

Alex,

Sure if your ArcGIS Server is 10.1 or greater than you can do that.