topic How do you add featurelayers and map services to the same javascript map? in ArcGIS JavaScript Maps SDK Questions

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

ChadKopplin — Wed, 30 Dec 2015 16:24:12 GMT

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>

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:10:11 GMT

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

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

ChadKopplin — Wed, 30 Dec 2015 16:46:30 GMT

Thank you Robert, that was all it was, and thank you for the AMD resource.