AnsweredAssumed Answered

How to join two scripts to get the desired output?

Question asked by manjarigoyal on Nov 6, 2014
Latest reply on Nov 6, 2014 by manjarigoyal

I have two scripts, first script is to geocode the address and second script is to click anywhere in the map and it creates a circle (1.5 Mile radius) from the clicked point. I want  to join these two scripts and the output should be geocode the address and then from the address point draw a circle(which should be static) and get the cell tower points from the feature layer ..

Please let me know the solution as I am fairly new to this language.

 

 

 

SCRIPT ONE:

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples

      on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Find Address</title>

 

 

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

    <style>

      html, body {

        height: 100%; width: 100%;

        margin: 0; padding: 0;

      }

      #map{

        padding:0;

        border:solid 1px #343642;

        margin:5px 5px 5px 0px;

      }

      #leftPane{

        width:20%;

        border-top: solid 1px #343642;

        border-left: solid 1px #343642;

        border-bottom: solid 1px #343642;

        margin:5px 0px 5px 5px;

        color: #343642;

        font:100% Georgia,"Times New Roman",Times,serif;

        /*letter-spacing: 0.05em;*/

      }

     </style>

    <script src="http://js.arcgis.com/3.11/"></script>

    <script>

      var map, locator;

 

 

      require([

        "esri/map", "esri/tasks/locator", "esri/graphic",

        "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",

        "esri/symbols/Font", "esri/symbols/TextSymbol",

        "dojo/_base/array", "esri/Color",

        "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",

        "dijit/form/Button", "dijit/form/Textarea",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

      ], function(

        Map, Locator, Graphic,

        InfoTemplate, SimpleMarkerSymbol,

        Font, TextSymbol,

        arrayUtils, Color,

        number, parser, dom, registry

      ) {

        parser.parse();

 

 

        map = new Map("map", {

          basemap: "streets",

          center: [-93.5, 41.431],

          zoom: 5

        });

      

        locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");

        locator.on("address-to-locations-complete", showResults);

 

 

        // listen for button click then geocode

        registry.byId("locate").on("click", locate);

      

        map.infoWindow.resize(200,125);

 

 

        function locate() {

          map.graphics.clear();

          var address = {

            "SingleLine": dom.byId("address").value

          };

          locator.outSpatialReference = map.spatialReference;

          var options = {

            address: address,

            outFields: ["Loc_name"]

          };

          locator.addressToLocations(options);

        }

 

 

        function showResults(evt) {

          var symbol = new SimpleMarkerSymbol();

          var infoTemplate = new InfoTemplate(

            "Location",

            "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}"

          );

          symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);

          symbol.setColor(new Color([153,0,51,0.75]));

 

 

          var geom;

          arrayUtils.every(evt.addresses, function(candidate) {

            console.log(candidate.score);

            if (candidate.score > 80) {

              console.log(candidate.location);

              var attributes = {

                address: candidate.address,

                score: candidate.score,

                locatorName: candidate.attributes.Loc_name

              }; 

              geom = candidate.location;

              var graphic = new Graphic(geom, symbol, attributes, infoTemplate);

              //add a graphic to the map at the geocoded location

              map.graphics.add(graphic);

              //add a text symbol to the map listing the location of the matched address.

              var displayText = candidate.address;

              var font = new Font(

                "12pt",

                Font.STYLE_NORMAL,

                Font.VARIANT_NORMAL,

                Font.WEIGHT_BOLD,

                "Helvetica"

              );

           

              var textSymbol = new TextSymbol(

                displayText,

                font,

                new Color("#666633")

              );

              textSymbol.setOffset(0,8);

              map.graphics.add(new Graphic(geom, textSymbol));

              return false; //break out of loop after one candidate with score greater  than 80 is found.

            }

          });

          if ( geom !== undefined ) {

            map.centerAndZoom(geom, 12);

          }

        }

      });

     var map, locator;

  /*require([

        "esri/map", "esri/layers/FeatureLayer",

        "esri/tasks/query", "esri/geometry/Circle",

        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",

        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",

        "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!", "esri/tasks/locator", "esri.arcgis.utils", "dijit.form.Button",

        "dijit.layout.ContentPane", "dijit.layout.BorderContainer", "esri/symbols/Font", "esri/symbols/TextSymbol",

        "dojo/_base/array", "dojo/number", "dojo/parser", "dijit/registry", "dijit/form/Button", "dijit/form/Textarea"

      ],

      function(

         Map, FeatureLayer,

         Query, Circle,

         Graphic, InfoTemplate, SimpleMarkerSymbol,

         SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,

         esriConfig, Color, dom

      ) {

 

 

        // use a proxy page if a URL generated by this page is greater than 2000 characters

        //

        // this should not be needed as nearly all query & select functions are performed on the client

        esriConfig.defaults.io.proxyUrl = "/proxy/";

 

map = new Map("map", {

          basemap: "streets",

          center: [-93.5, 41.431],

          zoom: 5

  //add the census block points in on demand mode. Note that an info template has been defined so when

       //selected features are clicked a popup window will appear displaying the content defined in the info template.

      

  var featureLayer = new FeatureLayer

  ("https://map layer",{

          //infoTemplate: new InfoTemplate("CascadeID: ${SOURCE_CAS}", "${*}"),

          infoTemplate: new InfoTemplate("Cell Towers"),

          outFields: ["SOURCE_CAS","SOURCE_SIT","SOURCE_OEM", "SOURCE_MAR", "SOURCE_LEA", "SOURCE_TOT"]

        });

     // selection symbol used to draw the selected census block points within the buffer polygon

 

 

  var symbol = new SimpleMarkerSymbol(

        SimpleMarkerSymbol.STYLE_CIRCLE,

        12,

        new SimpleLineSymbol(

        SimpleLineSymbol.STYLE_NULL,

        new Color([247, 34, 101, 0.9]),

        1

       ),

       new Color([207, 34, 171, 0.5])

     );

     featureLayer.setSelectionSymbol(symbol);

 

 

  //make unselected features invisible

        var nullSymbol = new SimpleMarkerSymbol().setSize(0);

        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

        map.addLayer(featureLayer);

        var circleSymb = new SimpleFillSymbol(

        SimpleFillSymbol.STYLE_NULL,

        new SimpleLineSymbol(

        SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,

        new Color([105, 105, 105]),

        2

       ), new Color([255, 255, 0, 0.25])

      );

        var circle;

 

 

    //when the map is clicked create a buffer around the click point of the specified distance.     

  

  map.on("click", function(evt){

      

        circle = new Circle({

        center: evt.mapPoint,

        geodesic: true,

        radius: 1.5,

        radiusUnit: "esriMiles"

       });

          map.graphics.clear();

          //map.infoWindow.hide();

          var graphic = new Graphic(circle, circleSymb);

          map.graphics.add(graphic);

 

 

    var query = new Query();

          query.geometry = circle.getExtent();

 

 

     //use a fast bounding box query. will only go to the server if bounding box is outside of the visible map

 

 

          featureLayer.queryFeatures(query, selectInBuffer);

        });

 

 

  function selectInBuffer(response){

        var feature;

        var features = response.features;

        var inBuffer = [];

 

 

     //filter out features that are not actually in buffer, since we got all points in the buffer's bounding box

 

 

        for (var i = 0; i < features.length; i++) {

          feature = features[i];

              if(circle.contains(feature.geometry)){

                  inBuffer.push(feature.attributes[featureLayer.objectIdField]);

      }

          }

  var query = new Query();

        query.objectIds = inBuffer;

 

 

   //use a fast objectIds selection query (should not need to go to the server)

          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){

            var totalPopulation = sumPopulation(results);

            var r = "";

            r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";

            dom.byId("messages").innerHTML = r;

          });

       }

              function sumPopulation(features) {

         var popTotal = 0;

        for (var x = 0; x < features.length; x++) {

            popTotal = popTotal + features[x].attributes["POP2000"];

          }

        return popTotal;

        }  

  });*/

    </script>

  </head>

  <body class="claro">

    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"

         data-dojo-props="design:'sidebar', gutters:false"

         style="width:100%; height:100%;">

 

 

      <div id="leftPane"

           data-dojo-type="dijit/layout/ContentPane"

           data-dojo-props="region:'left'">

        Enter an address then click the locate button to use a sample address locator to return the location for

        street addresses in the United States.

        <br>

 

 

        <textarea id="address">380 New York St, Redlands</textArea>

        <br>

 

 

        <button id="locate" data-dojo-type="dijit/form/Button">Locate</button>

      </div>

 

 

      <div id="map"

           data-dojo-type="dijit/layout/ContentPane"

           data-dojo-props="region:'center'">

      </div>

    </div>

  </body>

</html>

 

 

 

SCRIPT TWO:

<!DOCTYPE html>

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples

          on iOS devices-->    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

      <title>Select with feature layer</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/tundra/tundra.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"> 

  <style>

    html, body, #mapDiv

        {

        padding: 0;    

        margin: 0;  

        height: 100%;

        width: 100%;

        }

  #messages

        {

        background-color: #fff;

        box-shadow: 0 0 5px #888;

        font-size: 1.1em;

        max-width: 15em;

        padding: 0.5em;

        position: absolute;

        right: 20px;

        top: 20px;

        z-index: 40;

        }

 

  </style>

  <script src="http://js.arcgis.com/3.11/"></script>

  <script>

  var map, locator;

  require([

        "esri/map", "esri/layers/FeatureLayer",

        "esri/tasks/query", "esri/geometry/Circle",

        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",

        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",

        "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!", "esri/tasks/locator", "esri.arcgis.utils", "dijit.form.Button",

        "dijit.layout.ContentPane", "dijit.layout.BorderContainer", "esri/symbols/Font", "esri/symbols/TextSymbol",

        "dojo/_base/array", "dojo/number", "dojo/parser", "dijit/registry", "dijit/form/Button", "dijit/form/Textarea"

      ],

      function(

         Map, FeatureLayer,

         Query, Circle,

         Graphic, InfoTemplate, SimpleMarkerSymbol,

         SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,

         esriConfig, Color, dom

      ) {

 

 

        // use a proxy page if a URL generated by this page is greater than 2000 characters

        //

        // this should not be needed as nearly all query & select functions are performed on the client

        esriConfig.defaults.io.proxyUrl = "/proxy/";

 

  map = new Map("mapDiv", {

           basemap: "streets",

           center: [-95.249, 38.954],

           zoom: 14,

           slider: false

         });

 

 

  //add the cell tower points in on demand mode. Note that an info template has been defined so when

       //selected features are clicked a popup window will appear displaying the content defined in the info template.

      

  var featureLayer = new FeatureLayer

  ("https://map layer",{

          //infoTemplate: new InfoTemplate("CascadeID: ${SOURCE_CAS}", "${*}"),

          infoTemplate: new InfoTemplate("Cell Towers"),

          outFields: ["SOURCE_CAS","SOURCE_SIT","SOURCE_OEM", "SOURCE_MAR", "SOURCE_LEA", "SOURCE_TOT"]

        });

     // selection symbol used to draw the selected cell tower block points within the buffer polygon

 

 

  var symbol = new SimpleMarkerSymbol(

        SimpleMarkerSymbol.STYLE_CIRCLE,

        12,

        new SimpleLineSymbol(

        SimpleLineSymbol.STYLE_NULL,

        new Color([247, 34, 101, 0.9]),

        1

       ),

       new Color([207, 34, 171, 0.5])

     );

     featureLayer.setSelectionSymbol(symbol);

 

 

  //make unselected features invisible

        var nullSymbol = new SimpleMarkerSymbol().setSize(0);

        featureLayer.setRenderer(new SimpleRenderer(nullSymbol));

        map.addLayer(featureLayer);

        var circleSymb = new SimpleFillSymbol(

        SimpleFillSymbol.STYLE_NULL,

        new SimpleLineSymbol(

        SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,

        new Color([105, 105, 105]),

        2

       ), new Color([255, 255, 0, 0.25])

      );

        var circle;

 

 

    //when the map is clicked create a buffer around the click point of the specified distance.     

  

  map.on("click", function(evt){

      

        circle = new Circle({

        center: evt.mapPoint,

        geodesic: true,

        radius: 1.5,

        radiusUnit: "esriMiles"

       });

          map.graphics.clear();

          //map.infoWindow.hide();

          var graphic = new Graphic(circle, circleSymb);

          map.graphics.add(graphic);

 

 

    var query = new Query();

          query.geometry = circle.getExtent();

 

 

     //use a fast bounding box query. will only go to the server if bounding box is outside of the visible map

 

 

          featureLayer.queryFeatures(query, selectInBuffer);

        });

 

 

  function selectInBuffer(response){

        var feature;

        var features = response.features;

        var inBuffer = [];

 

 

     //filter out features that are not actually in buffer, since we got all points in the buffer's bounding box

 

 

        for (var i = 0; i < features.length; i++) {

          feature = features[i];

              if(circle.contains(feature.geometry)){

                  inBuffer.push(feature.attributes[featureLayer.objectIdField]);

      }

          }

  var query = new Query();

        query.objectIds = inBuffer;

 

 

   //use a fast objectIds selection query (should not need to go to the server)

          featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){

            var totalPopulation = sumPopulation(results);

            var r = "";

             });

       }

              function sumPopulation(features) {

         var popTotal = 0;

        for (var x = 0; x < features.length; x++) {

            popTotal = popTotal + features[x].attributes["POP2000"];

          }

        return popTotal;

        } 

  });

</script>

</head>

 

<body>

  <span id="messages">Click on the map to select census block points within 1.5 mile.</span>

    <div id="mapDiv"></div>

</body>

</html>

Outcomes