POST
|
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> Do you have any example? it's so complex! Thanks so much!
... View more
05-26-2010
03:13 AM
|
0
|
0
|
449
|
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:23 AM
|