Thanks so much Derek!! Here is the relevant code, it is quite a mess as I am still learning this whole Javascript thing. Please forgive me :)I did not attach the whole thing because it is over 2000 lines, but hopefully I got all the right pieces. The main issue I am trying to solve now is zooming to a single feature from a row click in a datagrid that is generated after features are manually selected. Hope this makes sense.I really appreciate your help with this!
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script>
<script type="text/javascript">
var idTask, idParams;
var grid, store, toolBar;
var exportMapGP, surveyLink, searchType, findTask, identifyTask, identifyParams, findParams, map, visible = [], HideShowTimer, featureLayer, navToolbar, measurement, features;
searchType = "";
function init() {
dojo.connect(map, 'onLoad', function(theMap) {
//initialize the toolbar
toolBar = new esri.toolbars.Draw(map);
dojo.connect(toolBar, "onDrawEnd",onDrawEnd);
toolBar.deactivate();
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
navToolbar.deactivate();
featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/MapServer/2";
featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields:["*"]
});
function onDrawEnd(extent){
navToolbar.deactivate();
//id = "control";
//select features within the draw extent
var query = new esri.tasks.Query();
query.geometry = extent;
featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features,selectionMethod){
var items = dojo.map(features,function(feature){
return feature.attributes;
});
//add selected features to the grid
if (document.getElementById("contSel").checked){
showPointNameGrid();
} else if(document.getElementById("survSel").checked){
showSurveysNameGrid();
}
var items = dojo.map(features,function(feature){
return feature.attributes;
});
if(document.getElementById("contSel").checked){
//showPointNameGrid();
searchType="selControl2";
var data = {identifier:"POINT_NAME", items:items};
var store = new dojo.data.ItemFileReadStore({data:data});
var grid = dijit.byId('grid4');
grid.setStore(store);
featureLayer.selectFeatures.clear;
} else if (document.getElementById("survSel").checked){
//showSurveysNameGrid();
searchType="selSurveys2";
var data = {identifier:"doc_id", items:items};
var store = new dojo.data.ItemFileReadStore({data:data});
var grid = dijit.byId('grid5');
grid.setStore(store);
featureLayer.selectFeatures.clear;
}
});
}
function toggleSelect (el)
{
navToolbar.deactivate();
alert(el.checked);
if (el.checked)
{
switch (el.id)
{
case 'survSel':
searchType="selSurveys2";
document.getElementById('contSel').checked = false;
featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/MapServer/2";
featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields:["*"]
});
featureLayer.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([200,255,0,0.5])));
map.addLayer(featureLayer);
featureLayer.selectFeatures.clear;
break;
case 'contSel':
searchType="selControl2";
document.getElementById('survSel').checked = false;
featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/FeatureServer/0";
featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields:["*"]
});
featureLayer.setSelectionSymbol(new esri.symbol.SimpleMarkerSymbol().setSize(11).setColor(new dojo.Color([160,214,238])));
map.addLayer(featureLayer);
featureLayer.selectFeatures.clear;
break;
}
} else
{
switch (el.id)
{
case 'survSel':
document.getElementById('contSel').checked = true;
break;
case 'contSel':
document.getElementById('survSel').checked = true;
break;
}
}
}
var items = dojo.map(features,function(feature){
return feature.attributes;
});
//add selected features to the grid
if (document.getElementById("contSel").checked){
showPointNameGrid();
} else if(document.getElementById("survSel").checked){
showSurveysNameGrid();
}
var items = dojo.map(features,function(feature){
return feature.attributes;
});
if(document.getElementById("contSel").checked){
//showPointNameGrid();
searchType="selControl2";
var data = {identifier:"POINT_NAME", items:items};
var store = new dojo.data.ItemFileReadStore({data:data});
var grid = dijit.byId('grid4');
grid.setStore(store);
featureLayer.selectFeatures.clear;
} else if (document.getElementById("survSel").checked){
//showSurveysNameGrid();
searchType="selSurveys2";
var data = {identifier:"doc_id", items:items};
var store = new dojo.data.ItemFileReadStore({data:data});
var grid = dijit.byId('grid5');
grid.setStore(store);
featureLayer.selectFeatures.clear;
}
});
}
//Zoom to the parcel when the user clicks a row
function onRowClickHandler(evt){
if (searchType == "selControl2") {
var clickedTaxLotId = grid4.getItem(evt.rowIndex).POINT_NAME;
var selectedTaxLot;
alert(featureLayer.name);
var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3]));
dojo.forEach(map.graphics.graphics,function(graphic){
if((feature.attributes) && feature.attributes.POINT_NAME === clickedTaxLotId){
selectedTaxLot = graphic;
graphic.setSymbol(highlightSymbol);
//added this part to build infotemplate
map.infoWindow.setTitle(graphic.getTitle());
map.infoWindow.setContent(graphic.getContent());
return;
}
});
if ( selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point' ) {
map.centerAndZoom(taxLotExtent, 11)
var sp = map.toScreen(selectedTaxLot.geometry);
} else {
var taxLotExtent = selectedTaxLot.geometry.getExtent();
var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());
var mappoint = map.toMap(screenpoint);
map.setExtent(taxLotExtent,true);
map.infoWindow.show(taxLotExtent.getCenter(), map.getInfoWindowAnchor(screenpoint));
}
} else if (searchType == "selSurveys2") {
var clickedTaxLotId = grid5.getItem(evt.rowIndex).DOCUMENT_N;
var selectedTaxLot;
alert(featureLayer.name);
var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3]));
dojo.forEach(map.graphics.graphics,function(graphic){
if((graphic.attributes) && graphic.attributes.DOCUMENT_N === clickedTaxLotId){
selectedTaxLot = graphic;
graphic.setSymbol(highlightSymbol);
//added this part to build infotemplate
map.infoWindow.setTitle(graphic.getTitle());
map.infoWindow.setContent(graphic.getContent());
return;
}
});
if ( selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point' ) {
map.centerAndZoom(taxLotExtent, 11)
var sp = map.toScreen(selectedTaxLot.geometry);
} else {
var taxLotExtent = selectedTaxLot.geometry.getExtent();
var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());
var mappoint = map.toMap(screenpoint);
map.setExtent(taxLotExtent,true);
map.infoWindow.show(taxLotExtent.getCenter(), map.getInfoWindowAnchor(screenpoint));
}
}
}
</script>
Since esri does not ship source code you cannot build one layer package with all your classes. You will have to push out the esri api locally or using the CDN and then pull down your layer file. So you will have 2 and then the extra's that esri forgot to bundle or chose not to.
We've put together a discard layer so that you don't duplicate packages within your own built layer file and the esri layer file. This is pre AMD but as you've noticed, AMD is only partially implemented in the current version of the API.
This blog post will outline everything you need to know and the concept will apply for newer versions.
the freenode irc chatroom #dojo has great realtime information if you dont' want to wait around for the forum.
Best Answer
I would agree with Moyles that the samples are just samples and dojo boileplate is a great resource however at current snovers boilerplate isn't a viable solution. You have two different versions of dojo going on there. The current js api still uses the classic require syntax of dojo 1.6.1 and does not support AMD. I'm sure that a newer js api will be built on 1.7.x and since converting classic dojo.defined modules to AMD is mostly trivial I would choose that route.
If you're starting your project now then I would choose whatever server side framework you wanted to use (if it is necessary for your application. If its just a single page viewer with no server side requirements then don't over complicate things). It could be rails, php, asp, whatever. Follow the best practices for your framework/language.
Then since esri is built on dojo you are already loading a great js framework for creating large scale web applications. Structure your code so that the dojo's loader can load your widgets and modules with the dojo require syntax. Write dojo widgets and modules, use dijits and dojox tools when necessary ( http://dojotoolkit.org/documentation/tutorials/1.6/declare, http://dojotoolkit.org/documentation/tutorials/1.6/recipes/custom_widget/, http://dojotoolkit.org/documentation/tutorials/1.6/understanding_widget, http://dojotoolkit.org/documentation/tutorials/1.6/templated, http://dojotoolkit.org/documentation/tutorials/1.6/cdn). Do not write inline js like the samples do. Create a build profile to optimize all your code when its time for production.
You have to keep your esri and custom code separate to a certain degree because they don't offer the source for compiling - it's already built and minified. The build tool doesn't like that so much.
EDIT
I built a grunt tool, esri_slurp to download the esri js api so you can use it as a package in your applications. This allows you to run the build and get a single file.