Add a Dynamic Layer

[EvelynHernandez]

Hello, im new programming in javascript (i used to developed flex applications) and im migrating a app that i made in flex to js.

Im having the following issue that will sound very simple:

1.- How can i add a dynamic layer to the map?

2.- is it possible throught the dynamic layer get some info or i need to do it with the feature layers?

I have this code but idk why it doesnt work. I read already the API and try the examples but still doesnt work.

Im new using require so im trying to learn how it works but this time it just load my featurelayer, not the dynamic one.

I hope u can help me guys

Thanks so much!

IdentityManager.js

var map;
var identityManagerOK ="NO";
//Establece todo lo requerido para funcionar. "LIBRERIAS"
  require([
      "dojo/_base/array",
      "dojo/parser",
      "esri/config",
      "esri/dijit/editing/Editor",
      "esri/dijit/editing/TemplatePicker",
      "esri/layers/FeatureLayer",
      "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
      "esri/map",
      "esri/IdentityManager",
      "dojo/domReady!",
      "dijit/layout/ContentPane",
      "dijit/layout/BorderContainer"],
    function (arrayUtils, parser, esriConfig, Editor, TemplatePicker, ArcGISDynamicMapServiceLayer, ImageParameters,FeatureLayer, Map){


      parser.parse();
   esriConfig.defaults.io.proxyUrl = "/proxy/";

  //GENERA UN MAPA BASE
       map = new Map("map", {
          basemap: "topo",
          center: [-71.0659,-32.9252], // longitude, latitude
          zoom: 8
      });
     
      //add editor when secureLayer is added.
      map.on("layers-add-result", initEditing);


      //add the secure service - token is required
      var secureLayer = new FeatureLayer("",
       { mode: FeatureLayer.MODE_ONDEMAND,outFields: ["nombre"] });
     
     
      var imageParameters = new ImageParameters();
        imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", {
          "opacity" : 0.5,
          "imageParameters" : imageParameters});
       
        //Agrega los layers al mapa 
      map.addLayers([secureLayer,dynamicMapServiceLayer]);
     
      //Genera el infowindow para mostrar datos
      map.infoWindow.resize(200, 200);


      function initEditing(event){
      alert("entre");
      var results = event.layers;
        var featureLayerInfos = arrayUtils.map(results, function (result){
          return {
            "featureLayer": result.layer
          };
        });
        var layers = arrayUtils.map(results, function (result){
          return result.layer;
        });


        var templatePicker = new TemplatePicker({
          featureLayers: layers,
          rows: 'auto',
          columns: 2
        }, "templatePickerDiv");


        templatePicker.startup();


        //setup the editor widget
        var settings = {
          map: map,
          templatePicker: templatePicker,
          layerInfos: featureLayerInfos
        };
        var params = {
          settings: settings
        };


        var editorWidget = new Editor(params);
        map.enableSnapping();
        editorWidget.startup();
       
       //VARIABLE PARA SABER SI EL LOGIN CORRESPONDE O NO
       
       identityManagerOK="YES";
       //alert(identityManagerOK);
      } 
      identityManagerOK="NO";
      // alert(identityManagerOK);
    });

[RobertScheitlin__GISP · Accepted solution]

Evelyn,

    Your requires do not match your variables order:

You Have:

require([ 
      "dojo/_base/array", 
      "dojo/parser", 
      "esri/config", 
      "esri/dijit/editing/Editor", 
      "esri/dijit/editing/TemplatePicker", 
      "esri/layers/FeatureLayer", 
      "esri/layers/ArcGISDynamicMapServiceLayer", 
        "esri/layers/ImageParameters", 
      "esri/map", 
      "esri/IdentityManager", 
      "dojo/domReady!", 
      "dijit/layout/ContentPane", 
      "dijit/layout/BorderContainer"], 
    function (arrayUtils, parser, esriConfig, Editor, TemplatePicker, ArcGISDynamicMapServiceLayer, ImageParameters,FeatureLayer, Map){

Your listing of vars needs to match your require modules order.

Should be:

require([  
      "dojo/_base/array",  
      "dojo/parser",  
      "esri/config",  
      "esri/dijit/editing/Editor",  
      "esri/dijit/editing/TemplatePicker",  
      "esri/layers/FeatureLayer",  
      "esri/layers/ArcGISDynamicMapServiceLayer",  
      "esri/layers/ImageParameters",  
      "esri/map",  
      "esri/IdentityManager",
      "dijit/layout/ContentPane",  
      "dijit/layout/BorderContainer",
      "dojo/domReady!"],  
    function (arrayUtils, parser, esriConfig, Editor, TemplatePicker, FeatureLayer, ArcGISDynamicMapServiceLayer, ImageParameters, Map, IdentityManager){

The abc’s of AMD | ArcGIS Blog

[EvelynHernandez]

As always, thanks for ur help Robert, now i can understand that js is a very sensitive language to learn!.

I have another question related with Dynamic Layers.

Is there a way to get the data in a popupwindow from a dynamic layer to be shown?

I have a service that the only way to be shown propertly is adding a Dynamic Layer, but the thing i want to do is, when the user clic one feature, it displays a popup with the info about that feature that he was clicking.

I can do it through a feature service easily, but when i try to put the dynamic layer and the feature layers using the "map.addLayers(dynamicLayer,featureLayer1,featureLayer2,...etc)" i cannot see the information about. (Seems like it is overwritten for the dynamic layer as a image).

The code is the same that i showed in the beginning, but i want to add a Dynamic Layer + FeatureLayers.

Like:

var map;
var identityManagerOK ="NO";
//Establece todo lo requerido para funcionar. "LIBRERIAS"
  require([  
      "dojo/_base/array",  
      "dojo/parser",  
      "esri/config",  
      "esri/dijit/editing/Editor",  
      "esri/dijit/editing/TemplatePicker",  
      "esri/layers/FeatureLayer",  
      "esri/layers/ArcGISDynamicMapServiceLayer",  
      "esri/layers/ImageParameters",  
      "esri/map",  
      "esri/IdentityManager",
      "dijit/layout/ContentPane",  
      "dijit/layout/BorderContainer",
      "dojo/domReady!"],  
    function (arrayUtils, parser, esriConfig, Editor, TemplatePicker, FeatureLayer, ArcGISDynamicMapServiceLayer, ImageParameters, Map, IdentityManager){


      parser.parse();
   esriConfig.defaults.io.proxyUrl = "/proxy/";


  
  //GENERA UN MAPA BASE
       map = new Map("map", {
          basemap: "topo",
          center: [-71.0659,-32.9252], // longitude, latitude
          zoom: 8
      });
    
        
      //add editor when secureLayer is added.
      map.on("layers-add-result", initEditing);


      //add the feature layer - secure service - token is required
      var secureLayer = new FeatureLayer("",
       { mode: FeatureLayer.MODE_ONDEMAND,outFields: ["nombre"] });
    
    
      var imageParameters = new ImageParameters();
        imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

        //My dynamicLayer map server
        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("", {
          "opacity" : 0.5,
          "imageParameters" : imageParameters
          });
          dynamicMapServiceLayer.setVisibleLayers([1,2,5]);
      
      
        //Add layers to the map
      map.addLayers([dynamicMapServiceLayer,secureLayer]);

    
    
      //Genera el infowindow para mostrar datos
      map.infoWindow.resize(200, 200);


      function initEditing(event){
      // alert("entre");
      var results = event.layers;
        var featureLayerInfos = arrayUtils.map(results, function (result){
          return {
            "featureLayer": result.layer
          };
        });
        var layers = arrayUtils.map(results, function (result){
          return result.layer;
        });


        var templatePicker = new TemplatePicker({
          featureLayers: layers,
          rows: 'auto',
          columns: 2
        }, "templatePickerDiv");


        templatePicker.startup();


        //setup the editor widget
        var settings = {
          map: map,
          templatePicker: templatePicker,
          layerInfos: featureLayerInfos
        };
        var params = {
          settings: settings
        };


        var editorWidget = new Editor(params);
        map.enableSnapping();
        editorWidget.startup();
      
       //VARIABLE PARA SABER SI EL LOGIN CORRESPONDE O NO
      
       identityManagerOK="YES";
       //alert(identityManagerOK);
      }
      identityManagerOK="NO";
      // alert(identityManagerOK);
    });

[RobertScheitlin__GISP]

Evelyn,

Sure here is a simplified example:

      var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServ...", {
        "id": "oilAndGasLayer",
        "opacity": 0.75
      });
      oilAndGasLayer.setInfoTemplates({
        0: { infoTemplate: new InfoTemplate() }
      });
      map.addLayer(oilAndGasLayer);

[EvelynHernandez]

Thanks, it help me a lot, i will continue developing