All,
As I continue to get my feet wet with the ArcGIS API for JavaScript, I am quickly discovering the limitations to my understanding. My latest stumbling block is working on a related table query. I recently discovered John Gravois esri-leaflet-related example that does what I want. I was even able to get it to successful work with my data (hurray to the newbie). However, I wish to integrate this into a larger application, so I believe I should be using the full JSAPI, not leaflet. Here is where I stumbled (hard). I found another great exampleâ, but unlike my early luck, I could not get it to work with my data. I am fairly certain I am just making beginner errors here (or maybe I am way off). So, below is my feeble and futile attempt to take jgavois' example and modify it. All I know is when I run it in Firebug, I get the following error: TypeError: features is undefined relatedOVPDQuery.objectIDS = [features[0].attributes.objectid]; I have looked at other examples, have dipped my hand at trying to understand global and local variables, etc., but i am still lost.
Note, the FeatureLayer I am using is running on a development server not accessible, but hopefully someone much more experienced than I can still help me understand what I am doing wrong.
<!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>Todd is being very skewey</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.2.4/bootstrap-table.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- cool bootstrap plugin for working with tables
//http://wenzhixin.net.cn/p/bootstrap-table/docs/index.html
-->
<script src="http://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.claro .dijitTooltipContainer {
background-image: none;
border: 1px solid #444444;
background-color: #444444;
color: #FFFFFF;
}
.claro .dijitTooltipConnector {
background-image: none;
}
#info-pane {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
padding: 1em;
background: white;
}
.fixed-table-container {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1000;
padding: 1em;
background: white;
}
.fixed-table-body {
max-height: 400px;
max-width: 600px;
}
#hidden {
display:none;
}
</style>
<script src="https://js.arcgis.com/3.15/"></script>
<script>
require([
"dojo/dom-construct",
"dojo/parser",
"esri/Color",
"esri/config",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/map",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/tasks/RelationshipQuery",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/GeometryService",
"dojo/on",
"dojo/domReady!"
], function(
domConstruct,
parser,
Color,
esriConfig,
Popup,
PopupTemplate,
ArcGISTiledMapServiceLayer,
FeatureLayer,
Map,
Query,
QueryTask,
RelationshipQuery,
SimpleFillSymbol,
SimpleLineSymbol,
GeometryService,
on
) {
parser.parse();
currentBasemap = []
map = new Map("map", {
center: [-98.435731, 35.222876],
zoom: 7,
slider: false,
logo: false
});
relief = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer")
currentBasemap.push(relief);
var okco = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Todds_Samples/m_ovpd/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
});
map.addLayers([relief,okco]);
okco.on("click", queryRelated);
//Here's the code with which I am having issue
function queryRelated(evt) {
var features = evt.features;
var relatedOVPDQuery = new esri.tasks.RelationshipQuery();
relatedOVPDQuery.outFields = ["*"];
relatedOVPDQuery.relationshipId = 0;
relatedOVPDQuery.objectIds = [features[0].attributes.objectid];
relatedOVPDQuery.run(function(error, response, raw) {
//pull the attributes out of the geoJson response
if (response.features.length > 0) {
var results = [];
for (i=0; i < response.features.length; i++){
results.push(response.features.properties);
}
$('#my-table').removeClass('hidden');
//you can only call refresh() when loading from a url
$('#my-table').bootstrapTable('destroy');
$('#my-table').bootstrapTable({
data: results,
cache: false,
striped: true,
clickToSelect: true,
columns: [{
field: 'family',
title: 'Family',
sortable: true,
order: 'asc'
}, {
field: 'sname',
title: 'Species',
sortable: true,
}, {
field: 'commonname',
title: 'Common Name',
sortable: true
}, {
field: 'count_',
title: 'Record Count',
sortable: true
}]
});
}
});
}
}
);
</script>
</head>
<body class="claro">
<div id='my-table' class="hidden">
</div>
<div id="map"></div>
<div id="info-pane">
<label>Click on a county to view <br>OVPD record counts!</label>
</div>
</body>
</html>As always, thanks to those in this great community.
Cheers,
Todd
