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
Solved! Go to Solution.
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?
@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>
@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?
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
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?
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
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?
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
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
@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>