How do you add featurelayers and map services to the same javascript map?

ChadKopplin · ‎12-30-2015

I am new to javascript, so I have taken a sample map and added featurelayers, but know I am trying to add dyanamicmapservice to the same map, and it is not working. Here is the code. Thank you. Please let me know if you need the rest of the code.

      map = new Map("map", {
        basemap:"hybrid",
        center: [-107.38, 42.99],
        zoom: 7
      });
      var LQD_Active_Permits = new FeatureLayer("https://gis.deq.wyoming.gov/arcgis/rest/services/LQD_PERMIT_DATA/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      var LQD_County_Permits = new FeatureLayer("https://gis.deq.wyoming.gov/arcgis/rest/services/LQD_PERMIT_DATA/MapServer/1", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      var Coal_Boundary = new FeatureLayer("https://gis.deq.wyoming.gov/arcgis/rest/services/ACTIVE_COAL/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      var LQD_Terminated_Permits = new FeatureLayer("https://gis.deq.wyoming.gov/arcgis/rest/services/LQD_PERMIT_DATA/MapServer/2", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      var LQD_DISTRICTS = new FeatureLayer("https://gis.deq.wyoming.gov/arcgis/rest/services/LQD_PERMIT_PUBLIC/MapServer/12", {
        mode: FeatureLayer.MODE_ONDEMAND,
"opacity" : 0.5,
        outFields:["*"]
      });
        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("https://gis.deq.wyoming.gov/arcgis/rest/services/LQD_PERMIT_PUBLIC/MapServer", {
          "opacity" : 0.5,
          "imageParameters" : imageParameters
   });
      //add the legend
      map.on("layers-add-result", function (evt) {
        var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
          return {layer:layer.layer, title:layer.layer.name};
        });
        if (layerInfo.length > 0) {
          var legendDijit = new Legend({
            map: map,
            layerInfos: layerInfo
          }, "legendDiv");
          legendDijit.startup();
        }
      });

map.addLayers([LQD_DISTRICTS, LQD_Active_Permits, Coal_Boundary,LQD_County_Permits, LQD_Terminated_Permits, dynamicMapServiceLayer]);
});
</script>

RobertScheitlin__GISP · ‎12-30-2015

Chad,

You are making the normal mistake with beginners using AMD style coding for the first time. Your requires have to mach the order of the subsequent vars that they align to:

This is what you have:

require([
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
      "dojo/_base/array", "dojo/parser",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
      "dijit/layout/AccordionContainer", "dojo/domReady!",
   "esri/layers/ArcGISDynamicMapServiceLayer",
   "esri/layers/ImageParameters"
    ], function(
      Map, FeatureLayer, Legend,
      arrayUtils, parser, ArcGISDynamicMapServiceLayer,
   ImageParameters
    ) {

This is what it must be:

require([
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
      "dojo/_base/array", "dojo/parser",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/layers/ImageParameters",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
      "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      Map, FeatureLayer, Legend,
      arrayUtils, parser, ArcGISDynamicMapServiceLayer,
   ImageParameters
    ) {

Notice that domReady is always last and it an other dijit layout elements do not have vars defined for them unless you actually use them in the code and not just the html.

Here is a good resource

The abc’s of AMD | ArcGIS Blog

View solution in original post

RobertScheitlin__GISP · ‎12-30-2015