dojo.some(map.graphics.graphics,function(graphic){ if ((graphic.attributes) && graphic.attributes.OBJECTID === rowId) { var selectedState = new esri.Graphic(graphic.geometry).setAttributes( graphic.attributes); selectionLayer.add(selectedState); return true; } });
selectionLayer.setRenderer(new esri.renderer.SimpleRenderer(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,new dojo.Color([0,255,200]), 14)));
var defaultRenderer = new esri.renderer.SimpleRenderer(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2));
I have been testing the various samples as a way to learn how to customize with the Javascript API. I came across the Synchronizing Map and Data Sample and I tried to modfiy it to use a line layer instead of a polygon. I can't seem to get the selection in the grid to sync up with the features in the map. Here is the sample code with my changes:
var map,selectionLayer,majorProject;
var resizeTimer;
function init() {
var initExtent = new esri.geometry.Extent(-161.015,-45.489,-35.156,91.0925,
new esri.SpatialReference({"wkid":4236}));
map = new esri.Map("map",{extent:initExtent});
map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
//add the ArcGIS Online Streetmap service, hide it so the imagery appears first
majorProject = new esri.layers.ArcGISDynamicMapServiceLayer("http://gisweb03v/ArcGIS/rest/services/majorProject/MapServer");
map.addLayer(majorProject);
//define default and selected symbology
dojo.connect(map,"onLoad",function(){
selectionLayer = new esri.layers.GraphicsLayer();
selectionLayer.setRenderer(new esri.renderer.SimpleRenderer(new esri.symbol.SimpleLineSymbol().setColor(
new dojo.Color([255,255,0]))));
//selectionLayer.setRenderer(new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0,0,255])).setWidth(5));
map.addLayer(selectionLayer);
var defaultRenderer = new esri.renderer.SimpleRenderer(
new esri.symbol.SimpleLineSymbol().setColor( new dojo.Color([0,0,0])));
map.graphics.setRenderer(defaultRenderer);
executeTask();
});
//Highlight map graphic when hovering over row
dojo.connect(grid, "onMouseOverRow", function(evt){
if(evt.rowIndex === -1){
return;
}
var rowId = grid.getItem(evt.rowIndex).OBJECTID;
selectionLayer.clear();
//add a new graphic to the selection layer
dojo.some(map.graphics.graphics,function(graphic){
if ((graphic.attributes) && graphic.attributes.OBJECTID === rowId) {
var selectedState = new esri.Graphic(graphic.geometry).setAttributes(
graphic.attributes);
selectionLayer.add(selectedState);
return true;
}
});
});
dojo.connect(grid,"onMouseOutRow",function(){
selectionLayer.clear();
});
//change the row's background color to yellow on mouse hover
dojo.connect(grid,"onStyleRow",function(row){
if (row.over) {
row.customStyles+='background-color:#FFFF00;';
}
});
//add logic to resize the map when the browser size changes
dojo.connect(dijit.byId('map'), 'resize', function() {
resizeMap();
});
//modify the grid so only the STATE_NAME field is sortable
grid.canSort = function(col){ if(Math.abs(col) == 2) { return true; } else { return false; } };
}
function executeTask(){
//var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");
var queryTask = new esri.tasks.QueryTask("http://gisweb03v/ArcGIS/rest/services/majorProject/MapServer/1");
var query = new esri.tasks.Query();
query.returnGeometry=true;
query.outFields = ["NAME","STATUS","OBJECTID"];
query.where = "1=1";
dojo.connect(queryTask,"onComplete",function(featureSet){
//build an array of attributes
var items = dojo.map(featureSet.features,function(feature){
return feature.attributes;
});
var data = {
identifier:"OBJECTID",
items:items};
store = new dojo.data.ItemFileReadStore({data:data});
grid.setStore(store);
grid.setSortIndex(1,"true"); //sort on the state name
dojo.forEach (featureSet.features, function(feature) {
map.graphics.add(feature);
});
});
dojo.connect(map.graphics,"onMouseOver",function(evt){
selectionLayer.clear();
//loop through the grid and find the row associated with the graphic
for (var i=0, il=grid.rowCount; i<il; i++) {
if((grid.getItem(i)) && grid.getItem(i).OBJECTID === evt.graphic.attributes.OBJECTID){
grid.rows.setOverRow(i);
grid.scrollToRow(i);
var selectedState = new esri.Graphic(evt.graphic.geometry).setAttributes(
evt.graphic.attributes);
selectionLayer.add(selectedState);
break;
}
}
});
dojo.connect(map.graphics,"onMouseOut",function(evt){
selectionLayer.clear();
grid.rows.setOverRow(-1);
});
queryTask.execute(query);
}
//Handle resize of browser
function resizeMap() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 800);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer"
design="headline" gutters="false" style=
"width:100%; height:100%;">
<div id="map" dojotype="dijit.layout.ContentPane" region=
"center" style="margin:5px;">
</div>
<div dojotype="dijit.layout.ContentPane" region="left" style=
"width:28%;margin:5px">
<table dojotype="dojox.grid.DataGrid" jsid="grid" id="grid"
selectionMode="none">
<thead>
<tr>
<th field="OBJECTID" width="35px">ID</th>
<th field="NAME" width="100px">TRAIL</th>
<th field="STATUS" width="100%">STATUS</th>