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

turn map/feature services on and off

jaykapalczynski

Looking through the online Samples for ArcGIS JavaScript API for examples and documentation for turning on and off Map/Feature services I have in my application

Anyone help point me in the right direction.

Thanks

Trouver plus de publications taguées avec

Accepted answers

All comments

jaykapalczynski

think I found it here.

https://developers.arcgis.com/javascript/jssamples/map_explicitlayerlist.html

kenbuja

The simplest are these two samples. A slightly more complex example that has checkboxes for different services is here. From there you could look at a Table of Contents control like this.

jaykapalczynski

I am looking at the example above...I removed the examples REST Endpoint and replaced with mine and it no longer works....
Confused...
Anyone have any thoughts....replaced with this.

          layer = new ArcGISDynamicMapServiceLayer("https://fwisweb1.dgif.virginia.gov/arcgis/rest/services/Public/BirdingWildlifeTrail/MapServer",
            {"imageParameters": imageParameters});
          map.addLayer(layer);

jaykapalczynski

I was able to look at your check box example and get working with my Map Service....thanks

I have one more question....Because I am referencing multiple Features in the Map Service at ONE time how do I define the multiple infoTemplates to be used in an identify?

I was using this on single Map Services

var templateBirdingTrailHeads = new InfoTemplate();
templateBirdingTrailHeads.setTitle("Birding Trail Heads");
templateBirdingTrailHeads.setContent("<table><tr><td><b>Loop Name</b></td><td>${LOOP_NAME}</td></tr></table>" +
     "<table><tr><td><b>Site Name</b></td><td>${SITE_NAME}</td></tr></table> " +
     "<table><tr><td><b>Pahse</b></td><td>${Phase}</td></tr></table> " 
);

 var flBirdingTrailHeads = new FeatureLayer("https://fwisweb1.gov/arcgis/rest/services/Public/BirdingWildlifeTrail/MapServer/0", {
         mode: FeatureLayer.MODE_ONDEMAND,
         infoTemplate: templateBirdingTrailHeads,
         outFields: ['*']
    });
 app.map.addLayer(flBirdingTrailHeads);

But now I have all the Features in the one Map Service

var layer1 = new ArcGISDynamicMapServiceLayer("https://fwisweb1.gov/arcgis/rest/services/Public/BirdingWildlifeTrail/MapServer", { id: "layer1" });

    app.map.addLayers([layer1]);

kenbuja

Here's an example that uses different templates on the same layer. You should be able to use the same logic to determine which layer is being shown in the infoWindow and use the correct template.

jaykapalczynski

I see where you are going with that...but all three layers could be being displayed at the same time. not one or the other as I think you are proposing...

right now the app opens and the three layers a displayed.
I can turn them on and off individually with the check box.
But as stated above they might all be on...

That make sense?....I can create a JSFiddle is necessary

jaykapalczynski

Here is a JSFiddle of my issue.
http://jsfiddle.net/vCW8W/5/

The layer list is being created from the Map Service that I am referencing.

I want to add an Identify. Normally I create an infoTemplate for each Service to feed a container to display the results.
But in this case I am only referencing the Map Service as a whole.
There was a comment to figure out which item was checked and then apply a specific infoTemplate. BUT in my case 1, 2, or all three could be displayed at any given moment.

How do I define the template for each layer in the Service in this case? Maybe something in the identify function that determines which Layer in the Service was selected?

Thanks

jaykapalczynski

Just not sure how to set up an infoTemplate for each of the Map services when done this way....

Unless there is another way to build a list of Layers and put them in a container to turn on and off? Noting that all or and variation may be displayed at any given moment. I love the ability to build the list automatically but need to identify on these layers as well.

Any thoughts?

jaykapalczynski

Looking at your example again I think I know what you were getting at....going to try a few things....brb

jaykapalczynski

Nope I am really confused...
As the check boxes are being created on the fly I am not understanding where I can apply the infoTemplate if the check box is checked...bit different than your example above....
I assume that it does not matter how many check boxes are checked rather that I am assigning the correct infoTemplate to the specific MapService index???
Really confused on this one.
Just need a little guidance to get me on the right path here.

http://jsfiddle.net/vCW8W/7/

kenbuja

This sample shows how to apply different InfoTemplates to features from different layers returned from an IdentifyTask.

jaykapalczynski

THanks Ken....I am seeing where you are going with this and think that its a good start....

First: In my app I have a Secured Service that requires Credentials, I have this set up to allow the user to select features that render after positive credential check. These results from the identify (only selects one feature at a time) are passed and displayed in a pane (not a popup) WORKING great

Second: In this same app I have a Map service that is not secured. If the user does not have credentials they can still enter the site and identify on other public features... It is here that I am trying to leverage the additional identify. I am bring in one map service and must distinguish between layers in order to identify and return results. But as in the First above I do not want a popup....I want the features to be displayed in a Pane off to the side.

Actually I think the First above is using a SELECT and the Second is using IDENTIFY

I tried to utilize that example you gave and send the results to the "LeftPane" defined in HTML

In the example Below I am simply trying to get the Map Service to Identify and send results to a pane not a popup

<!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>Identify with Popup</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }

  /*---------------------------------------------------------------------------------------------------------*/
  /* NewLayer window in the top right corner*/

  .divLayerContainerNewLayer
  {
   position: absolute;
   top: 45px;
   right: 0px;
   width: 200px;
   z-index: 1000;
  }
  .divLayerHolderNewLayer
  {
   width: 190px;
   height: 400px;
   background: rgba(0,0,0,0.9);
   -pie-background: rgba(0,0,0,0.9);
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   behavior: url("styles/PIE.htc");
   opacity:.8;
  }
  .divLayerContentHolderNewLayer
  {
   overflow: auto;
   padding: 5px;
   height: 390px;
   width: 185px;
  }
  #leftPane{
   background-color:transparent;
   border:1px solid red;
   font-family:tahoma;
   font-size:10px;
   height: 350px;
  }

    </style>

    <script src="https://js.arcgis.com/3.9/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "esri/dijit/Popup",
        "dojo/_base/array",
        "esri/Color",
        "dojo/dom-construct",
        "dojo/domReady!"
      ], function (
        Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
        SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
        arrayUtils, Color, domConstruct
      ) {

        var identifyTask, identifyParams;
/*
        var popup = new Popup({
          fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
        }, domConstruct.create("div"));
*/
        map = new Map("map", {
          basemap: "gray",
          center: [-77.4329, 37.5410],
          zoom: 7
         // infoWindow: popup
        });

        map.on("load", mapReady);

        var parcelsURL = "https://fwisweb1.dgif.virginia.gov/arcgis/rest/services/Public/DGIF_Public/MapServer";
        map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL,
          { opacity: .55 }));

        function mapReady () {
          map.on("click", executeIdentifyTask);
          //create identify tasks and setup parameters
          identifyTask = new IdentifyTask(parcelsURL);

          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 3;
          identifyParams.returnGeometry = true;
          identifyParams.layerIds = [0, 4];
          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
          identifyParams.width = map.width;
          identifyParams.height = map.height;
        }

        function executeIdentifyTask (event) {
          identifyParams.geometry = event.mapPoint;
          identifyParams.mapExtent = map.extent;

          var deferred = identifyTask
            .execute(identifyParams)
            .addCallback(function (response) {
              // response is an array of identify result objects
              // Let's return an array of features.
              return arrayUtils.map(response, function (result) {
                var feature = result.feature;
                var layerName = result.layerName;

                feature.attributes.layerName = layerName;
                if (layerName === 'Birding Trail Sites') {
                  var taxParcelTemplate = new InfoTemplate("",
                    "${LOOP_NAME} <br/> Owner of record: ${SITE_NAME}");
                  feature.setInfoTemplate(taxParcelTemplate);
                }
                else if (layerName === 'Birding Trail Loops') {
                  console.log(feature.attributes.PARCELID);
                  var buildingFootprintTemplate = new InfoTemplate("",
                    "Parcel ID: ${Loop_Name}");
                  feature.setInfoTemplate(buildingFootprintTemplate);
                }
                return feature;
              });
            });

          // InfoWindow expects an array of features from each deferred
          // object that you pass. If the response from the task execution
          // above is not an array of features, then you need to add a callback
          // like the one above to post-process the response and return an
          // array of features.

          //map.infoWindow.setFeatures([deferred]);
   //map.infoWindow.show(event.mapPoint);


 
        var popup = map.infoWindow;

 connect.connect(popup, "onSelectionChange", function(){
  displayPopupContent(popup.getSelectedFeature());
 });

 //When features are associated with the map's info window update the sidebar with the new content.
 connect.connect(popup, "onSetFeatures", function(){
   displayPopupContent(popup.getSelectedFeature());
  });
         

        }  // END OF executeIdentifyTask


    function displayPopupContent(feature){
       if(feature){
           var content = feature.getContent();
           registry.byId("leftPane").set("content", content);
       }
    }



      });
    </script>
  </head>

  <body>
    <div id="map">

     <div id="divLayerContainerNewLayer" class="divLayerContainerNewLayer hideContainerHeightNewLayer" >
  <div id="divLayerHolderNewLayer" class="divLayerHolderNewLayer">
   <div id="divLayerContainerHolderNewLayer" style="position: relative">
    <div id="divLayerContentHolderNewLayer" class="divLayerContentHolderNewLayer" style="position: absolute;
       overflow: hidden">

   <div id="leftPane" data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'">
      </div>

    </div>
   </div>
  </div>
 </div>

    </div>
  </body>

</html>

jaykapalczynski

Please see Previous post first...

This is how I am passing the selected feature to the "LeftPane" currently.....So looking to morph this code and the one in your example to allow the user to select on the Secured Service and Unsecured Service. I assume keeping the code separate and passing to different Content Panes

Need to get this to a side container of some sort because in the first instance above I have the popupWindow set to false

app.map.infoWindow.set("popupWindow", false);

Thoughts? Appreciated.

Can I combine and select any of the features in my map below with the code below?

    function initializeSidebar(map){

        var popup = map.infoWindow;

        //when the selection changes update the side panel to display the popup info for the
        //currently selected feature.
        connect.connect(popup, "onSelectionChange", function(){
            displayPopupContent(popup.getSelectedFeature());
        });

        //when the selection is cleared remove the popup content from the side panel.
        connect.connect(popup, "onClearFeatures", function(){
           dom.byId("featureCount").innerHTML = "Click Identify Tool to select feature(s)";
           registry.byId("leftPane").set("content", "");
           domUtils.hide(dom.byId("pager"));
        });

        //When features are associated with the map's info window update the sidebar with the new content.
        connect.connect(popup, "onSetFeatures", function(){
           displayPopupContent(popup.getSelectedFeature());
           dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";

           //enable navigation if more than one feature is selected
           popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
         });
    }

    function displayPopupContent(feature){
       if(feature){
           var content = feature.getContent();
           registry.byId("leftPane").set("content", content);
       }
    }

    function selectPrevious(){
       app.map.infoWindow.selectPrevious();
    }

    function selectNext(){
       app.map.infoWindow.selectNext();
    }

    function clearContent() {
       registry.byId("leftPane").set("content", "");
       domUtils.hide(dom.byId("pager"));
    }

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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