TIGERweb Tracts_Blocks

1822
13
Jump to solution
07-07-2021 07:05 AM
ChitraKrishnan
New Contributor III

Hi, 

I am trying to query the block  service  https://tigerweb.geo.census.gov/arcgis/rest/services/TIGERweb/Tracts_Blocks/MapServer/2 to get block information based on the input criteria - latitude and longitude. I am getting below error

"Unable to load proxy.ashx?https://tigerweb.geo.census.gov/arcgis/rest/services/TIGERweb/Tracts_Blocks/MapServer/2?f=json status: 500"

if anybody has resolved this issue, please let me know.

Thanks

Chitra

0 Kudos
2 Solutions

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

@ChitraKrishnan 

I am not sure why you are trying to execute the esriRequest... You have your QueryTask in Set1 that is returning the intersected track blocks based on the user click. So why attempt to query the same REST endpoint again using a esriRequest?

View solution in original post

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

@ChitraKrishnan  So this should get you going on the lat and lon array and different colors for blocks. The whole part on color intensity is quite a bit of work to figure that out.

<!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>Census Blocks</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.37/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.37/esri/css/esri.css">
  <style>
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/3.37/"></script>
  <script>
    var map, GL, pntsArr;
    require([
      "esri/map", "esri/tasks/QueryTask", "esri/SpatialReference",
      "esri/tasks/query", "esri/geometry/Point", "esri/dijit/PopupTemplate",
      "esri/layers/GraphicsLayer",
      "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
      "esri/Color", "dojo/domReady!"
    ], function (
      Map, QueryTask, SpatialReference,
      Query, Point, PopupTemplate,
      GraphicsLayer, 
      SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
      Color
    ) {
      
      map = new Map("mapDiv", {
        basemap: "streets",
        center: [-83.0014423, 39.9593239],
        zoom: 14,
        slider: false
      });

      var popupTemplate = new PopupTemplate({
          title: "{NAME}",
          fieldInfos: [{
              fieldName: "BLOCK",
              visible: true,
              label: "Block: "
            },
            {
              fieldName: "CENTLAT",
              visible: true,
              label: "Latitude: "
            },
            {
              fieldName: "CENTLON",
              visible: true,
              label: "Longitude: "
            }
          ]
        });

      GL = new GraphicsLayer({id: 'mygl', infoTemplate: popupTemplate});
      map.addLayer(GL);

      var arrayFromDatabase = [[-83.0014423,39.9593239],[-83.0006330,39.9597960],[-83.0019028,39.9617077]];
      queryBlocks(arrayFromDatabase);

      function queryBlocks(dbArr) {
        var q = new Query();
        q.outSpatialReference = new SpatialReference(102100);
        q.returnGeometry = true;
        q.outFields = ["*"];
        var qt = new QueryTask("https://tigerweb.geo.census.gov/arcgis/rest/services/TIGERweb/Tracts_Blocks/MapServer/2");

        dbArr.map(function (pntData){
          var pnt = new Point(pntData);
          q.geometry = pnt;
          qt.execute(q, function (result) {
            result.features.map(function (f) {
              var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
              var color = new Color(randomColor);
              color.a = 0.5;
              var gra = f.clone();
              console.info(gra.attributes);
              gra.setSymbol(
                new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                  new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,0,0]), 1),
                  color
                )
              );
              GL.add(gra);
            });
          });

        });
      }
    });
  </script>
</head>

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

</html>

 

View solution in original post

0 Kudos
13 Replies
RobertScheitlin__GISP
MVP Emeritus

@ChitraKrishnan  So the error mentioned that it is attempting to use a proxy. Do you have a proxy setup on your web server at the address of this app? If so have you added the tigerweb.geo.census.gov url to your proxy.config?

0 Kudos
ChitraKrishnan
New Contributor III

Hi Robert,

Thanks for the response.

It worked after I added a self-signed ssl to my local web server. I left the proxy.config file unchanged. I am not sure how it bypassed the proxy.ashx file. 

I am trying to  query https://tigerweb.geo.census.gov/arcgis/rest/services/TIGERweb/Tracts_Blocks/MapServer/2  using esri/request to get block info(and highlight that block with a color) whenever a particular latitude or longitude is passed as input. The return response looks very generic and does not include that particular block info. I tried below 2 sets of code. 

Could you please let me know what is incorrect in below code and appreciate if you could guide me with a sample code on how to query the url and render with colors. 

Set1

queryBlocks: function (e) {

var pad = this.extent.getWidth() / this.width * 3;
var queryGeom = new Extent(e.mapPoint.x - pad, e.mapPoint.y - pad, e.mapPoint.x + pad, e.mapPoint.y + pad, this.spatialReference);

var q = new query();
q.outSpatialReference = { "wkid": 102100 };
q.returnGeometry = true;
q.outFields = ["BLOCK", "CENTLAT", "CENTLON"];
q.geometry = queryGeom;

var popupTemplate = new PopupTemplate({
title: "{NAME}",
fieldInfos: [
{ fieldName: "BLOCK", visible: true, label: "Block: " },
{ fieldName: "CENTLAT", visible: true, label: "Latitude: " },
{ fieldName: "CENTLON", visible: true, label: "Longitude: " }
]
});

var qt = new QueryTask("https://tigerweb.geo.census.gov/arcgis/rest/services/TIGERweb/Tracts_Blocks/MapServer/2");

var def = qt.execute(q);
def.addCallback(function (result) {
return dojo.map(result.features, function (f) {
f.setInfoTemplate(popupTemplate);
return f;
});
});

this.infoWindow.setFeatures([def]);
this.infoWindow.show(e.screenPoint, this.getInfoWindowAnchor(e.screenPoint));

// queryFeatureLayer
const layerUrl = "https://tigerweb.geo.census.gov/arcgis/rest/services/TIGERweb/Tracts_Blocks/MapServer/2";
var layersRequest = esriRequest({
url: layerUrl,
content: {
f: "json",
where: "CENTLAT = +39.9570572", // Set by select element
spatialRelationship: "intersects", // Relationship operation to apply
geometry: this.extent, // Restricted to visible extent of the map
outFields: ["*"], // Attributes to return
returnGeometry: false
},
handleAs: "json",
// callbackParamName: "callback"
});

layersRequest.then(
function (response) {
console.log("Success: ", response.layers);
}, function (error) {
console.log("Error: ", error.message);
});

}

Set 2:

queryBlocks: function (e) {

var pad = this.extent.getWidth() / this.width * 3;
var queryGeom = new Extent(e.mapPoint.x - pad, e.mapPoint.y - pad, e.mapPoint.x + pad, e.mapPoint.y + pad, this.spatialReference);

var q = new query();
q.outSpatialReference = { "wkid": 102100 };
q.returnGeometry = true;
q.outFields = ["BLOCK", "CENTLAT", "CENTLON"];
q.geometry = queryGeom;

var popupTemplate = new PopupTemplate({
title: "{NAME}",
fieldInfos: [
{ fieldName: "BLOCK", visible: true, label: "Block: " },
{ fieldName: "CENTLAT", visible: true, label: "Latitude: " },
{ fieldName: "CENTLON", visible: true, label: "Longitude: " }
]
});

var qt = new QueryTask("https://tigerweb.geo.census.gov/arcgis/rest/services/TIGERweb/Tracts_Blocks/MapServer/2");

var def = qt.execute(q);
def.addCallback(function (result) {
return dojo.map(result.features, function (f) {
f.setInfoTemplate(popupTemplate);
return f;
});
});

this.infoWindow.setFeatures([def]);
this.infoWindow.show(e.screenPoint, this.getInfoWindowAnchor(e.screenPoint));

// queryFeatureLayer

const parcelLayer = new FeatureLayer("https://tigerweb.geo.census.gov/arcgis/rest/services/TIGERweb/Tracts_Blocks/MapServer/2");

const parcelQuery = {
where: "CENTLAT = +39.9570572", // Set by select element
outSpatialReference: { "wkid": 102100 },
spatialRelationship: "intersects", // Relationship operation to apply
geometry: this.extent, // Restricted to visible extent of the map
outFields: ["BLOCK"], // Attributes to return
returnGeometry: true
};
parcelLayer.queryFeatures(parcelQuery)
.then(function (results) {
console.log("Feature count: " + results.features.length)
})
.otherwise(function (error) {
console.log("Error: " + error.error);
});
},

 

 

 

 

Thanks

Chitra

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

@ChitraKrishnan 

I am not sure why you are trying to execute the esriRequest... You have your QueryTask in Set1 that is returning the intersected track blocks based on the user click. So why attempt to query the same REST endpoint again using a esriRequest?

0 Kudos
ChitraKrishnan
New Contributor III

Hi Robert,

Sorry for not giving much detail. 

My goal is to highlight each block with different colors based on the latitude and longitude array values from the database on map loading. We have only latitude and longitude values. 

Progress 1:

So I started off with Progress 1 as given in my code sample below, where I was able to bring a popup on clicking each block.

Progress 2

Later (Progress 2) I got the block information using the queryFeatures by passing a singe latitude value - actually I wasn't getting the expected result  in queryFeatures, that is why I tired esriRequest. But now I got the queryFeatures working.

Progress 3

Now my next thing is apply different colors to the blocks based on the latitude and longitude that I have, which I am struggling right now with. I tried using graphiclayer with polygon graphic, providing rings on top of the feature block layer but no good. Can you please guide me how to achieve this? I have attached my code sample here. 

Thanks

Chitra

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

@ChitraKrishnan 

So when the map loads you have an array of lats and longs that you want to query and display the intersecting census blocks with different colors. It also looks like you want the blocks to have a popup template applied to then so when the user clicks them the popup will appear? Can you provide some example lat long array values?

0 Kudos
ChitraKrishnan
New Contributor III

@RobertScheitlin__GISP 

Yes that is my requirement. Also I need to set the intensity of the colors based on the count of lat and long values for each block.  like given below:

Block 2019 - Identified 23 lat and long values from DB - darker the color

Block 2015 - identified 5 lat and long vlaues from DB - lesser the intensity of the color

Right  now I am trying with one latitude value to see if it works. I have given below code sample.

const graphicsLayer = new GraphicsLayer();
this.map.addLayer(graphicsLayer);

//I got below rings values by querying "CENTLAT = +39.9593239" using the queryBlockData() I posted in //my previous sample code. 

const polygon = {
type: "polygon",
rings: [
[-9239716.9977, 4860125.7711],
[-9239644.5287, 4860136.6635000035],
[-9239631.8383, 4860051.703000002],
[-9239615.697, 4859943.796899997],
[-9239711.877, 4859929.564400002],
[-9239741.0427, 4860121.849799998],
[-9239716.9977, 4860125.7711]
],
spatialReference: { wkid: 102100 }
};

const polygonGraphic = new Graphic({
geometry: polygon,
symbol: {
type: "simple-fill",
color: [51, 51, 204, 0.4],
style: "solid",
outline: {
color: "white",
width: 1
}
},
visible: true
});
polygonGraphic.visible = true;
graphicsLayer.add(polygonGraphic);

 

Thanks

Chitra

0 Kudos
ChitraKrishnan
New Contributor III

@RobertScheitlin__GISP 

I am clicking inside "S Wall St" (blue outlined block) in the screenshot below. I am getting two different block#s  2014 and 2015.

was my attached code sample correct in bringing the block details? 

 

screenshot.png

 

Thanks

Chitra

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

@ChitraKrishnan  So this should get you going on the lat and lon array and different colors for blocks. The whole part on color intensity is quite a bit of work to figure that out.

<!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>Census Blocks</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.37/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.37/esri/css/esri.css">
  <style>
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/3.37/"></script>
  <script>
    var map, GL, pntsArr;
    require([
      "esri/map", "esri/tasks/QueryTask", "esri/SpatialReference",
      "esri/tasks/query", "esri/geometry/Point", "esri/dijit/PopupTemplate",
      "esri/layers/GraphicsLayer",
      "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
      "esri/Color", "dojo/domReady!"
    ], function (
      Map, QueryTask, SpatialReference,
      Query, Point, PopupTemplate,
      GraphicsLayer, 
      SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
      Color
    ) {
      
      map = new Map("mapDiv", {
        basemap: "streets",
        center: [-83.0014423, 39.9593239],
        zoom: 14,
        slider: false
      });

      var popupTemplate = new PopupTemplate({
          title: "{NAME}",
          fieldInfos: [{
              fieldName: "BLOCK",
              visible: true,
              label: "Block: "
            },
            {
              fieldName: "CENTLAT",
              visible: true,
              label: "Latitude: "
            },
            {
              fieldName: "CENTLON",
              visible: true,
              label: "Longitude: "
            }
          ]
        });

      GL = new GraphicsLayer({id: 'mygl', infoTemplate: popupTemplate});
      map.addLayer(GL);

      var arrayFromDatabase = [[-83.0014423,39.9593239],[-83.0006330,39.9597960],[-83.0019028,39.9617077]];
      queryBlocks(arrayFromDatabase);

      function queryBlocks(dbArr) {
        var q = new Query();
        q.outSpatialReference = new SpatialReference(102100);
        q.returnGeometry = true;
        q.outFields = ["*"];
        var qt = new QueryTask("https://tigerweb.geo.census.gov/arcgis/rest/services/TIGERweb/Tracts_Blocks/MapServer/2");

        dbArr.map(function (pntData){
          var pnt = new Point(pntData);
          q.geometry = pnt;
          qt.execute(q, function (result) {
            result.features.map(function (f) {
              var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
              var color = new Color(randomColor);
              color.a = 0.5;
              var gra = f.clone();
              console.info(gra.attributes);
              gra.setSymbol(
                new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                  new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,0,0]), 1),
                  color
                )
              );
              GL.add(gra);
            });
          });

        });
      }
    });
  </script>
</head>

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

</html>

 

0 Kudos
ChitraKrishnan
New Contributor III

@RobertScheitlin__GISP 

Thanks Robert! I will try this.

Regards

Chitra

 

 

0 Kudos