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

Changing layer's opacity programmatically using a bootsrap button

AlexGole

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

Najděte více příspěvků označených jako

Accepted answers

RobertScheitlin__GISP

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>

All comments

RobertScheitlin__GISP

Alex,

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

AlexGole

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

Thank you,

Alex

AlexGole

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

RobertScheitlin__GISP

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>

AlexGole

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

RiyasDeen

Hi Alex,

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

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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