Select to view content in your preferred language

Using extent values of Basemap, I want to use extent values of the Map Service used in WAB?

3095
3
Jump to solution
07-25-2015 01:33 AM
RahmathUnissa
Deactivated User

I am using a custom widget which is used to draw an extent and retrieve the XMax,Xmin,YMax,YMin values of the used Map Service but in WAB it is returning  the extent values of the basemap. Also, the spatial reference is different for both Map Service and BaseMap.

How Can I get the Map Service's extent values??

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Rathmath,

    If the basemap is in a different spatial reference then the one you need for that map service then you will have to re-project the extent drawn by the end user using the GeometryService.

Here is a quick simple example app:

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
      var map, gsvc;

      require([
        "esri/map",
        "esri/tasks/GeometryService",
        "esri/tasks/ProjectParameters",
        "esri/toolbars/draw",
        "esri/graphic",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/SpatialReference",
        "dojo/_base/lang",
        "dojo/on",
        "esri/symbols/SimpleFillSymbol",
        "dojo/domReady!"
      ], function(
        Map,
        GeometryService,
        ProjectParameters,
        Draw,
        Graphic,
        ArcGISDynamicMapServiceLayer,
        SpatialReference,
        lang,
        on,
        SimpleFillSymbol
      ) {
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
        });
        gsvc = new GeometryService("http://sampleserver6.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        var dLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver5.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer");

        map.addLayer(dLayer);

        on(map, 'load', createToolbar);

        function createToolbar() {
          var toolbar = new Draw(map);
          toolbar.activate(Draw.EXTENT);
          toolbar.on("draw-end", addToMap);
        }

        function addToMap(evt) {
          map.graphics.clear();
          evt.target.deactivate();
          var graphic = new Graphic(evt.geometry, new SimpleFillSymbol());
          console.info("In Geometry: ", evt.geometry.xmax, evt.geometry.xmin, evt.geometry.ymax, evt.geometry.ymin);
          map.graphics.add(graphic);
          var params = new ProjectParameters();
          params.geometries = [evt.geometry];
          params.outSR = new SpatialReference({wkid:102726});
          gsvc.project(params, lang.hitch(this, function(geomsArr){
            console.info("Out Geometry: ", geomsArr[0].xmax, geomsArr[0].xmin, geomsArr[0].ymax, geomsArr[0].ymin);
          }));
        }
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Emeritus

Rathmath,

    If the basemap is in a different spatial reference then the one you need for that map service then you will have to re-project the extent drawn by the end user using the GeometryService.

Here is a quick simple example app:

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
      var map, gsvc;

      require([
        "esri/map",
        "esri/tasks/GeometryService",
        "esri/tasks/ProjectParameters",
        "esri/toolbars/draw",
        "esri/graphic",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/SpatialReference",
        "dojo/_base/lang",
        "dojo/on",
        "esri/symbols/SimpleFillSymbol",
        "dojo/domReady!"
      ], function(
        Map,
        GeometryService,
        ProjectParameters,
        Draw,
        Graphic,
        ArcGISDynamicMapServiceLayer,
        SpatialReference,
        lang,
        on,
        SimpleFillSymbol
      ) {
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
        });
        gsvc = new GeometryService("http://sampleserver6.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        var dLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver5.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer");

        map.addLayer(dLayer);

        on(map, 'load', createToolbar);

        function createToolbar() {
          var toolbar = new Draw(map);
          toolbar.activate(Draw.EXTENT);
          toolbar.on("draw-end", addToMap);
        }

        function addToMap(evt) {
          map.graphics.clear();
          evt.target.deactivate();
          var graphic = new Graphic(evt.geometry, new SimpleFillSymbol());
          console.info("In Geometry: ", evt.geometry.xmax, evt.geometry.xmin, evt.geometry.ymax, evt.geometry.ymin);
          map.graphics.add(graphic);
          var params = new ProjectParameters();
          params.geometries = [evt.geometry];
          params.outSR = new SpatialReference({wkid:102726});
          gsvc.project(params, lang.hitch(this, function(geomsArr){
            console.info("Out Geometry: ", geomsArr[0].xmax, geomsArr[0].xmin, geomsArr[0].ymax, geomsArr[0].ymin);
          }));
        }
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>
RahmathUnissa
Deactivated User

Thanks Robert

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Glad to help. Now it is your turn to help the community by marking this question as answered. All you have to do is click the "Correct Answer" link (the one with the little green star) on the post that provided the answer for you. If the answer was not provided by one of the responders then you can mark any of the replies that you received as helpful by clicking on the "Actions" menu and choosing "Mark as Helpful"