topic TIGERweb Tracts_Blocks in ArcGIS JavaScript Maps SDK Questions

TIGERweb Tracts_Blocks

ChitraKrishnan — Wed, 07 Jul 2021 14:05:48 GMT

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

Re: TIGERweb Tracts_Blocks

RobertScheitlin__GISP — Wed, 07 Jul 2021 14:16:51 GMT

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

Re: TIGERweb Tracts_Blocks

ChitraKrishnan — Wed, 07 Jul 2021 20:11:50 GMT

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

Thanks

Chitra

Re: TIGERweb Tracts_Blocks

RobertScheitlin__GISP — Thu, 08 Jul 2021 14:08:20 GMT

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

Re: TIGERweb Tracts_Blocks

ChitraKrishnan — Mon, 12 Jul 2021 16:23:48 GMT

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

Re: TIGERweb Tracts_Blocks

RobertScheitlin__GISP — Mon, 12 Jul 2021 18:25:06 GMT

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

Re: TIGERweb Tracts_Blocks

ChitraKrishnan — Mon, 12 Jul 2021 18:55:09 GMT

@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 }
};

Thanks

Chitra

Re: TIGERweb Tracts_Blocks

ChitraKrishnan — Mon, 12 Jul 2021 19:18:15 GMT

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

Thanks

Chitra

Re: TIGERweb Tracts_Blocks

RobertScheitlin__GISP — Tue, 13 Jul 2021 13:59:25 GMT

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

Re: TIGERweb Tracts_Blocks

ChitraKrishnan — Tue, 13 Jul 2021 16:13:44 GMT

@RobertScheitlin__GISP

Thanks Robert! I will try this.

Regards

Chitra

Re: TIGERweb Tracts_Blocks

ChitraKrishnan — Tue, 13 Jul 2021 19:43:17 GMT

@RobertScheitlin__GISP

It works!!!!! that is cool!!!! Thank you very much Robert.

I will try to figure out the color intensity part. If not, will come back for ideas.

Thank you

Chitra

Re: TIGERweb Tracts_Blocks

ChitraKrishnan — Fri, 16 Jul 2021 13:51:51 GMT

Hi Robert,

The outline color is not setting to black in below code. We are using js.arcgis.com/3.14. Do I have to do anything different for this version?

gra.setSymbol(
new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0]), 2),
color
)
);

Thanks

Chitra

Thanks

Chitra

Re: TIGERweb Tracts_Blocks

RobertScheitlin__GISP — Fri, 16 Jul 2021 15:33:13 GMT

@ChitraKrishnan 3.14 does not have the clone method on the Graphic class so you have to make some code changes:

<!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.14/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.14/esri/css/esri.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } </style> <script src="https://js.arcgis.com/3.14/"></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/graphic", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer", "esri/Color", "dojo/domReady!" ], function ( Map, QueryTask, SpatialReference, Query, Point, PopupTemplate, GraphicsLayer, Graphic, 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 = new Graphic(f.toJson()); // console.info(gra.attributes); gra.setSymbol( new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,0,0]), 2), color ) ); GL.add(gra); }); }); }); } }); </script> </head> <body> <div id="mapDiv"></div> </body> </html>

Re: TIGERweb Tracts_Blocks

ChitraKrishnan — Fri, 16 Jul 2021 20:51:17 GMT

@RobertScheitlin__GISP Thank you very much. I will try this.

Thanks

Chitra