I have one small question , I have main esri map in html page how to take this map control in module js page

SadanandacharB1 · ‎05-14-2015

html page has esri main map and in module js i am doing query task and calling that module function from html page ,

But i am not able to show the query task results, How to take html map control in module as we do in silverlight . my code is below, Please correct me

TEST.HTML

<title>Dojo Modules</title>

<style>

html, body, #mapDiv { height: 100%; width: 100%; margin: 0; padding: 0; }

</style>

parseOnLoad: true,

packages: [{

"name": "modules",

"location": location.pathname.replace(/\/[^/]+$/, "") + "/modules"

}]

};

</script>

require([

"dojo/dom",

"dojo/dom-construct",

"esri/map",

"modules/myModule",

"esri/layers/DynamicMapServiceLayer",

"dojo/domReady!"

], function (

dom,

domConstruct,

Map,

myModule,

DynamicMapServiceLayer) {

var map = new Map("mapDiv", {

// center: [-122.41, 37.78],

zoom: 15,

// basemap: "topo"

});

var mapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://XXX/arcgis/rest/services/TEST/MapServer");

map.addLayer(mapServiceLayer);

var mapServiceLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("http://XXX/arcgis/rest/services/TEST1/MapServer");

map.addLayer(mapServiceLayer1);

dojo.connect(map, 'onClick', function ()

{

myModule.queryStatesLayer();

});

</script>

</head>

</form>

</body>

</html>

=========================================

myModule.is

define(["dojo/_base/declare", "dojo/_base/lang", "dojo/dom", "dojo/on","esri/map", "esri/tasks/QueryTask",

"esri/tasks/query",

"esri/symbols/SimpleMarkerSymbol",

"esri/InfoTemplate",

"dojo/_base/Color", "dojo/ready"],

function (declare, lang, dom, on, Map, QueryTask, query, SimpleMarkerSymbol, InfoTemplate, Color, ready)

{

var myModule = {

//return

//{

queryStatesLayer : function()

{

queryTask = new QueryTask("http://XXX/arcgis/rest/services/TEST/MapServer/2");

query = new esri.tasks.Query();

query.returnGeometry = true;

query.outFields = ["NAME"];

query.where = "NAME = 'ambur'";

// queryTask.execute(query, showResults);

queryTask.execute(query, function (queryResults) {

debugger;

Map.graphics.clear();

var resultFeatures = queryResults.features;

var extent = esri.graphicsExtent(resultFeatures);

if (!extent && features.length == 1) {

// esri.getExtent returns null for a single point, so we'll build the extent by hand

var point = features[0];

extent = new esri.geometry.Extent(point.x - 1, point.y - 1, point.x + 1, point.y + 1, point.SpatialReference);

}

//Loop through each feature returned

for (var i = 0, il = resultFeatures.length; i < il; i++) {

//Get the current feature from the featureSet.

//Feature is a graphic

var graphic = resultFeatures;

graphic.setSymbol(symbol);

//Set the infoTemplate.

graphic.setInfoTemplate(infoTemplate);

//Add graphic to the map graphics layer.

Map.graphics.add(graphic);

selectedWell = graphic.geometry;

//Zoom To a Layer...

// var taxLotExtent = graphic.geometry.getExtent()

// map.setExtent(taxLotExtent);

}

if (extent) {

// assumes the esri map object is stored in the globally-scoped variable 'map'

Map.setExtent(extent)

}

});

//initialize InfoTemplate

infoTemplate = new esri.InfoTemplate("${NAME}", "NAME : ${NAME}<br/>");

//create symbol for selected features

symbol = new esri.symbol.SimpleMarkerSymbol();

symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);

symbol.setSize(10);

symbol.setColor(new dojo.Color([255, 255, 0, 0.5]));

}

};

return myModule;

}

);

ChrisSmith7 · ‎05-14-2015

Have a look at my answer in this thread:

RequireJS and ArcGIS API for JS

I believe this may help you out a bit.

RobertScheitlin__GISP · ‎05-14-2015

Sadanandachar,

You need to make your map var global in the html ( line 31 below):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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>Dojo Modules</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">

  <style>
    html,
    body,
    #mapDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <script>
    var dojoConfig = {
      parseOnLoad: true,
      packages: [{
        "name": "modules",
        "location": location.pathname.replace(/\/[^/]+$/, "") + "/modules"
      }]
    };
  </script>
  <script src="http://js.arcgis.com/3.8/"></script>
  <script>
    var map;
    require([
      "dojo/dom",
      "dojo/dom-construct",
      "esri/map",
      "modules/myModule",
      "esri/layers/DynamicMapServiceLayer",
      "dojo/domReady!"
      ], function (
      dom,
      domConstruct,
      Map,
      myModule,
      DynamicMapServiceLayer) {
      map = new Map("mapDiv", {
        // center: [-122.41, 37.78],
        zoom: 15,
        //  basemap: "topo"
      });
      var mapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://XXX/arcgis/rest/services/TEST/MapServer");
      map.addLayer(mapServiceLayer);
      var mapServiceLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("http://XXX/arcgis/rest/services/TEST1/MapServer");
      map.addLayer(mapServiceLayer1);

      dojo.connect(map, 'onClick', function () {
        myModule.queryStatesLayer();
      });
    });
  </script>
</head>

<body id="mapDiv">
  <form id="form1">
    <div></div>
  </form>
</body>

</html>

Then here is your module code cleaned up a little, and referencing the correct global map object:

define(["dojo/_base/declare",
        "dojo/_base/lang",
        "dojo/dom",
        "dojo/on",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/InfoTemplate",
        "esri/geometry/Extent",
        "esri/graphicsUtils",
        "dojo/_base/Color"],
  function (declare, lang, dom, on, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Extent, graphicsUtils, Color)
  {
    var myModule = {
      queryStatesLayer: function () {
        var queryTask = new QueryTask("http://XXX/arcgis/rest/services/TEST/MapServer/2");
        var query = new Query();
        query.returnGeometry = true;
        query.outFields = ["*"];
        query.where = "PPIN = '1998'";

        //   queryTask.execute(query, showResults);
        queryTask.execute(query, function (queryResults) {
          //debugger;
          map.graphics.clear();
          var resultFeatures = queryResults.features;
          var extent = graphicsUtils.graphicsExtent(resultFeatures);
          if (!extent && resultFeatures.length == 1) {
            // esri.getExtent returns null for a single point, so we'll build the extent by hand
            var point = resultFeatures[0];
            extent = new Extent(point.x - 1, point.y - 1, point.x + 1, point.y + 1, point.SpatialReference);
          }

          //Loop through each feature returned
          for (var i = 0, il = resultFeatures.length; i < il; i++) {
            //Get the current feature from the featureSet.
            //Feature is a graphic
            var graphic = resultFeatures;
            graphic.setSymbol(symbol);
            //Set the infoTemplate.
            graphic.setInfoTemplate(infoTemplate);
            //Add graphic to the map graphics layer.
            map.graphics.add(graphic);
//            selectedWell = graphic.geometry;
            //Zoom To a Layer...
            //            var taxLotExtent = graphic.geometry.getExtent()
            //                map.setExtent(taxLotExtent);
          }
          if (extent) {
            // assumes the esri map object is stored in the globally-scoped variable 'map'
            map.setExtent(extent);
          }
        });
        //initialize InfoTemplate
        var infoTemplate = new InfoTemplate("${NAME}", "NAME : ${NAME}<br/>");
        //create symbol for selected features
        var symbol = new SimpleMarkerSymbol();
        symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
        symbol.setSize(10);
        symbol.setColor(new Color([255, 255, 0, 0.5]));
      }
    };
    return myModule;
  }
);