Community
Select to view content in your preferred language

Custom layer (WMS) - example in AMD version

1444
2
Jump to solution
09-08-2016 06:01 AM
WojciechRozkowski
by
Deactivated User
‎09-08-2016 06:01 AM

I've found an example of creating custom request to WMS service written in non-AMD style:

Custom layer - WMS | ArcGIS API for JavaScript 3.17 

I'm trying to implement this kind approach but in modern AMD approach.

Unfortunately, as a beginner, I don't know how to rewrite this example to fit AMD style. Especially the part with defining my.CityStatesRiversUSAWMSLayer() function with callback is out of my reach.

Could you please provide the mentioned example in AMD style?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎09-08-2016 06:52 AM

Wojciech,

   Here is the code updated to AMD:

<!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>WMS</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
    var map;
    require([
      "dojo/_base/declare",
      "esri/map",
      "esri/geometry/Extent",
      "esri/layers/DynamicMapServiceLayer",
      "esri/SpatialReference",
      "dojo/domReady!"
    ], function(
      declare, Map, Extent,
      DynamicMapServiceLayer, SpatialReference
    ) {
      declare("my.CityStatesRiversUSAWMSLayer", DynamicMapServiceLayer, {
        constructor: function() {
          this.initialExtent = this.fullExtent = new Extent({"xmin":-16476154.32,"ymin":2504688.54,"xmax":-6457400.14,"ymax":7514065.62,"spatialReference":{"wkid":102100}});
          this.spatialReference = new SpatialReference({wkid:102100});
          this.loaded = true;
          this.onLoad(this);
        },

        getImageUrl: function(extent, width, height, callback) {
          var params = {
            request:"GetMap",
            transparent:true,
            format:"image/png",
            bgcolor:"ffffff",
            version:"1.1.1",
            layers:"0,1",
            styles: "default,default",
            exceptions: "application/vnd.ogc.se_xml",

            //changing values
            bbox:extent.xmin + "," + extent.ymin + "," + extent.xmax + "," + extent.ymax,
            srs: "EPSG:" + extent.spatialReference.wkid,
            width: width,
            height: height
          };

          callback("https://sampleserver1.arcgisonline.com/arcgis/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServ...?" + dojo.objectToQuery(params));
        }
      });

      map = new Map("map", {
        basemap: "satellite",
        center: [-103.008, 40.98],
        zoom: 4
      });
      map.addLayer(new my.CityStatesRiversUSAWMSLayer());
    });
    </script>
  </head>
  <body class="claro">
    <div id="map"  style="position:relative; width:1024px; height:512px; border:2px solid #000;"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

2 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎09-08-2016 06:52 AM

Wojciech,

   Here is the code updated to AMD:

<!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>WMS</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
    var map;
    require([
      "dojo/_base/declare",
      "esri/map",
      "esri/geometry/Extent",
      "esri/layers/DynamicMapServiceLayer",
      "esri/SpatialReference",
      "dojo/domReady!"
    ], function(
      declare, Map, Extent,
      DynamicMapServiceLayer, SpatialReference
    ) {
      declare("my.CityStatesRiversUSAWMSLayer", DynamicMapServiceLayer, {
        constructor: function() {
          this.initialExtent = this.fullExtent = new Extent({"xmin":-16476154.32,"ymin":2504688.54,"xmax":-6457400.14,"ymax":7514065.62,"spatialReference":{"wkid":102100}});
          this.spatialReference = new SpatialReference({wkid:102100});
          this.loaded = true;
          this.onLoad(this);
        },

        getImageUrl: function(extent, width, height, callback) {
          var params = {
            request:"GetMap",
            transparent:true,
            format:"image/png",
            bgcolor:"ffffff",
            version:"1.1.1",
            layers:"0,1",
            styles: "default,default",
            exceptions: "application/vnd.ogc.se_xml",

            //changing values
            bbox:extent.xmin + "," + extent.ymin + "," + extent.xmax + "," + extent.ymax,
            srs: "EPSG:" + extent.spatialReference.wkid,
            width: width,
            height: height
          };

          callback("https://sampleserver1.arcgisonline.com/arcgis/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServ...?" + dojo.objectToQuery(params));
        }
      });

      map = new Map("map", {
        basemap: "satellite",
        center: [-103.008, 40.98],
        zoom: 4
      });
      map.addLayer(new my.CityStatesRiversUSAWMSLayer());
    });
    </script>
  </head>
  <body class="claro">
    <div id="map"  style="position:relative; width:1024px; height:512px; border:2px solid #000;"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
WojciechRozkowski
by
Deactivated User
‎09-08-2016 08:06 AM

Thank you very much Robert.

Someone from Esri can take your work and update the example:)