AnsweredAssumed Answered

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

Question asked by sadanand_arc on May 14, 2015
Latest reply on May 14, 2015 by rscheitlin

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <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>

        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>

<body id="mapDiv">   

    <form id="form1" runat="server">

   

     <div ></div>

    </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[i];

                            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;

        }

);

Outcomes