topic How to join two scripts to get the desired output? in ArcGIS JavaScript Maps SDK Questions

How to join two scripts to get the desired output?

ManjariGoyal — Thu, 06 Nov 2014 14:56:44 GMT

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>

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

on iOS devices-->

<title>Find Address</title>

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

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]),

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]),

), 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;

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.attributes["POP2000"];

}

return popTotal;

}

});*/

</script>

</head>

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

</body>

</html>

SCRIPT TWO:

<!DOCTYPE html>

<html>

<head>

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

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

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]),

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]),

), 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;

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.attributes["POP2000"];

}

return popTotal;

}

});

</script>

</head>

<body>

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

</body>

</html>

Re: How to join two scripts to get the desired output?

JakeSkinner — Thu, 06 Nov 2014 18:29:07 GMT

Hi Manjari,

Here is an example of the combined samples:

<!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/claro/claro.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%;
      }
      #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;
      }
      #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, candidateLocation;
      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/tasks/locator",
        "esri/tasks/query", "esri/geometry/Circle",
        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "esri/symbols/Font", "esri/symbols/TextSymbol",
        "dojo/_base/array", "dijit/registry",
        "esri/config", "esri/Color", "dojo/dom", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/Button", "dijit/form/Textarea",
        "dojo/domReady!"
      ], function(
        Map, FeatureLayer, Locator,
        Query, Circle,
        Graphic, InfoTemplate, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
        Font, TextSymbol,
        arrayUtils, registry,
        esriConfig, Color, dom, parser
      ) {
        
        parser.parse();
        
        // 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
        });
    
        locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
        locator.on("address-to-locations-complete", showResults);
    
        registry.byId("locate").on("click", locate);


        var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{
          infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
          outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"]
        });
        
        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) {
          console.log(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) {
            if (candidate.score > 80) {
              candidateLocation = 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(
                "16pt",
                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, 15);
          }
          
          Buffer(candidateLocation);
        }


        // 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.
        function Buffer(evt){
          console.log(evt);
          circle = new Circle({
            center: evt,
            geodesic: true,
            radius: 1,
            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;
            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.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">W 9th St, Lawrence, KS</textArea>
        <br>

        <button id="locate" data-dojo-type="dijit/form/Button">Locate</button> 
      </div>
      <span id="messages">Click on the map to select census block points within 1 mile.</span>

      <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      </div>
    </div>
  </body>

</html>

Re: How to join two scripts to get the desired output?

ManjariGoyal — Thu, 06 Nov 2014 19:16:05 GMT

Thanks Jake.