This is the code i am using for creating dropdown list of layers to be displayedon a map...but the dropdown is not activated ie., when an option is selected that is not shown on the map.i don’t know what is the problem?

3655
4
05-22-2015 11:20 PM
aneeshasatya
New Contributor

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

    <title>Simple Map</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">

    <style>

      html, body, {

        height: 100%;

        width: 100%;

        margin: 0;

        padding: 0;

      }

      body {

        background-color: #FFF;

        overflow: hidden;

        font-family: "Trebuchet MS";

      }

    </style>

    <script src="http://js.arcgis.com/3.13/"></script>

    <script>

        var map;

require(["esri/map", "esri/layers/FeatureLayer", "dojo/domReady!"],

       function (Map, FeatureLayer) {

map = new Map("map", {

basemap: "topo"

center: [79.267180899999970000, 17.052389000000000000], // longitude, latitude

                           });

});  // require ends

        function myFunction() {

            var layerUrl = document.getElementById("mySelect").value;

            var demographicsLayer = new FeatureLayer(layerUrl);

map.addLayer(demographicsLayer);

alert('hello');

        }

    </script>

  </head>

  <body>

  <div>

    <div id="map"></div>

    <select id="mySelect" onchange="myFunction()">

   <option value="http://localhost:6080/arcgis/rest/services/new/FeatureServer/7">Boundary</option>

  <option value="http://localhost:6080/arcgis/rest/services/rasterD/sde_sde_f_distr/ImageServer">Fluorine</option>

  <option value="http://localhost:6080/arcgis/rest/services/rasterD/sde_sde_p_distr/ImageServer">Population</option>

  <option value="http://localhost:6080/arcgis/rest/services/rasterL/sde_sde_streams/ImageServer">Streams</option>

</select>

</div>

  </body>

</html>

0 Kudos
4 Replies
JaiSiva1
New Contributor III

Try this code:

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

    <title>Simple Map</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">

    <style>

      html, body, {

        height: 100%;

        width: 100%;

        margin: 0;

        padding: 0;

      }

      body {

        background-color: #FFF;

        overflow: hidden;

        font-family: "Trebuchet MS";

      }

    </style>

    <script src="http://js.arcgis.com/3.13/"></script>

    <script>

        var map;

  var Fl;

         require([

         "esri/map",

         "esri/layers/FeatureLayer",

         "dojo/domReady!"],

        function (Map, FeatureLayer) {

           Fl = FeatureLayer;

 

           map = new Map("map", {

              basemap: "topo",

              center: [79.267180899999970000, 17.052389000000000000]}); // longitude, latitude

  

            }); 

           function myFunction() {

            var layerUrl = document.getElementById("mySelect").value;

            var demographicsLayer = new Fl(layerUrl);

            map.addLayer(demographicsLayer);

            alert('hello');

          }   

  </script>

  </head>

  <body>

  <div>

    <div id="map"></div>

    <select id="mySelect" onchange="myFunction()">

       <option value="http://localhost:6080/arcgis/rest/services/new/FeatureServer/7">Boundary</option>

       <option value="http://localhost:6080/arcgis/rest/services/rasterD/sde_sde_f_distr/ImageServer">Fluorine</option>

       <option value="http://localhost:6080/arcgis/rest/services/rasterD/sde_sde_p_distr/ImageServer">Population</option>

       <option value="http://localhost:6080/arcgis/rest/services/rasterL/sde_sde_streams/ImageServer">Streams</option>

    </select>

   </div>

  </body>

</html>

0 Kudos
aneeshasatya
New Contributor

Thanks for the reply..

even now i am not able to see my layers....when i selected a layer it is

showing the alert message 'hello'

0 Kudos
aneeshasatya
New Contributor

Thanks for the reply..

even now i am not able to see my layers....when i selected a layer it is showing the alert message 'hello'

0 Kudos
JaiSiva1
New Contributor III

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

    <title>Simple Map</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">

    <style>

      html, body, {

        height: 100%;

        width: 100%;

        margin: 0;

        padding: 0;

      }

      body {

        background-color: #FFF;

        overflow: hidden;

        font-family: "Trebuchet MS";

      }

    </style>

    <script src="http://js.arcgis.com/3.13/"></script>

    <script>

        var map;

  var ImgService;

  var ImgParams;

        var GPoint;

  

  var config = {

  "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Toronto/ImageServer":[-79.40, 43.64]

  };

         require([

         "esri/map",

         "esri/layers/ArcGISImageServiceLayer",

  "esri/layers/ImageServiceParameters",

  "esri/geometry/Point",

  "dojo/domReady!"],

            function (Map, ArcGISImageServiceLayer,ImageServiceParameters,Point) {

           ImgService = ArcGISImageServiceLayer;

   ImgParams = ImageServiceParameters;

   GPoint = Point;

  

           map = new Map("map", {

              basemap: "topo",

              center: [79.267180899999970000, 17.052389000000000000]}); // longitude, latitude

   

            });  

  var demographicsLayer =  false;

           function myFunction() {

   

   

            var layerUrl = document.getElementById("mySelect").value;

           

            if(layerUrl != "000"){

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

    var params = ImgParams();

        var demographicsLayer = new ImgService(layerUrl,{ imageServiceParameters: params });

                   map.addLayer(demographicsLayer);  

                   var mapPoint = new GPoint(config[layerUrl]);            

                   map.centerAndZoom(mapPoint, 12);  

     }

          }    

  </script>

 

  </head>

  <body>

  <div>

    <div id="map"></div>

    <select id="mySelect" onchange="myFunction()">

    <option value="000">Choose option</option>

       <option value="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Toronto/ImageServer">test</option>

      

    </select>

   </div>

  </body>

</html>

0 Kudos