Combine JavaScript Samples

Question

I'm trying to combine 2 of the JavaScript samples, specifically the Identify & Find Results in DataGrid. I started with the latter and then tried to add/combine the identify. When I add the Identify HTML to the body at the bottom it appears on loading of the map. Any ideas on how to keep the identify pop-up hidden until it is clicked? I thought it might have something to do with a piece of code in the Find Sample near the top where it shows dojoConfig = { parseOnLoad:true } . I'm sort of new to Javascript and combining samples. I've been able to make a few of the others work together such as adding the Navigation toolbar but this is puzzling. I've attached the code as a .txt file. Ultimately I'd like to be able to use the Identify in multiple Apps and simply call it through the code from a particular source. Any help would be appreciated.

Map3.txt.zip

JohnnyPenet · Answer

Sometime ago I had to create a framework in Silverlight to replace the Web ADF development as it will be obsolete in future versions of ArcGis. 
Afterwards I migrate this framework towards JavaScript keeping the same application patterns of Silverlight. 
In my blog �??jpenet.blogspot.com�?? I describe how a possible framework could be build. The purpose was not to develop some general application 
but a study how you can create libraries that could help you in making applications like was possible in web adf. 
Little focus was done on visual aspects, keeping a very clean html page.

Hope this will illustrate how to start with ArcGis Javascript API.

DanPajak · Answer

Thanks Ben,

I'll take some time to digest this. I agree with the your points 1 thru 4, concerning creating a file once and using it many times, makes perfect sense. I'm still getting acquainted with javascript, dojo and programming with the ArcGIS API for Javascript. I'll post back if I have any more questions.

BenFousek · Answer

This is one method I use to add dijits to infoWindow template. This example loads a feature layer as part of the apps onLoad from a js object. The concept is the same for your needs. Here's the object: { type: 'feature', requireToken: true, url: 'http://SOME_URL/ArcGIS/rest/services/SOME_TOWN_IN_OREGON/Fire_Hydrants/MapServer/0', name: 'Fire Hydrants', id: 'fire_hydrants', outFields: ['*'], itTitle: 'Hydrant', itContentType: 'function', //'function' or 'text' itContent: '', itContentFunction: 'hydrant', visible: false, opacity: 1, legend: true, toc: true, info: false, infoHtml: '' } When it runs through this loop we set up the infoTemplate.dojo.forEach(config.featureLayers, function(fl) { var url; if (fl.requireToken == true) { url = fl.url + '?token=' + config.app.token } else { url = fl.url } var it = new esri.InfoTemplate(); it.setTitle(fl.itTitle); if (fl.itContentType == 'text') { it.setContent(fl.itContent); } else if (fl.itContentType == 'function') { //turns out we want some dijits in our infoWindow eval('it.setContent(viewer.itContentFunctions.' + fl.itContentFunction + ')') //set the content via a function; in this case viewer.itContentFunctions.hydrant; see below } else { it.setContent('There must not be any important info about this feature.'); } var layer = new esri.layers.FeatureLayer(url, { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, outFields: fl.outFields, infoTemplate: it, id: fl.id, visible: fl.visible, opacity: fl.opacity }); if (fl.legend == true) { viewer.legendLayers.push({ layer: layer, title: fl.name }) } var info = ''; if (fl.info == true) { info = fl.infoHtml } //toc controls viewer.map.addLayer(layer); }); At this point the template is just a domNode and has not been rendered in a container object yet. Now when we click on a hydrant the infoWindow popups up because the graphic has a template, with that specific graphic's template domNode appearing in said infoWindow. In this example a function is connected to the buffer button's onClick event, which when clicked buffers the hydrant the specified distance and adds the geometry to the map. [ATTACH=CONFIG]14868[/ATTACH]var viewer = { itContentFunctions: { hydrant: function(graphic) { var x = Math.round(Math.random() * 1000000); var content = new dijit.layout.ContentPane({ style: 'padding:0;', content: '

Buffer this hydrant:

Buffer

' }); dojo.connect(dijit.byId('hydrant_buffer_button_' + x), 'onClick', function() { viewer.itContentFunctions.hydrantBuffer(graphic.geometry, x); viewer.map.infoWindow.hide(); /* viewer.mapTipsShow('

Buffer in progress...');*/ }); return content.domNode; }, hydrantBuffer: function(geom, id) { viewer.map._layers.gl.clear(); var params = new esri.tasks.BufferParameters(); params.geometries = [geom]; params.distances = [eval('parseInt(dijit.byId("hydrant_buffer_dist_' + id + '").value)')]; params.unit = esri.tasks.GeometryService.UNIT_FOOT; params.outSpatialReference = viewer.map.spatialReference; viewer.geoSrv.buffer(params, function(geoms) { //viewer.mapTipsHide(); var symbol = new esri.symbol.SimpleFillSymbol('solid', new esri.symbol.SimpleLineSymbol('solid', new dojo.Color([0, 0, 255]), 2), new dojo.Color([0, 0, 255, 0.25])); dojo.forEach(geoms, function(geometry) { var graphic = new esri.Graphic(geometry, symbol, { ID: '7', __print: true, __whatAmI: 'a hydrant buffer', __addToMapSave: false, __style: { who: 'mxdSelect' }, __db: 'schema.gdb', __sdeDump: config.app.dumpUserGraphicsToSde }); viewer.map._layers.gl.add(graphic); viewer.map.setExtent(graphic.geometry.getExtent(), true); }); }); } } } Here's the buffered hydrant: [ATTACH=CONFIG]14874[/ATTACH] Notice that I created a ContentPane and it's content in html. All the content could be created programmatically, but with simpler items it's easier to create a ContentPane and use it's content property. In your case, where you may have multiple tasks executing, a TabContainer and tabs I would probably build my own dijit (see No. 2 & 3 below). You said you were just getting started. I don't know what your long term goals are, but if the shoe fits: 1) The arcgis js api just extends dojo. An above average understanding of how dojo works is important. http://dojotoolkit.org/documentation/ The reference guide and documentation are indispensable, as is the API reference. 2) Use Firefox for development with Firebug add-in. Use Firebug to dissect every last corner of the DOM related to the esri classes. 3) Creating modules, custom dijits, and working from a programmatic view point will make your life easier. For example, I've used the same custom measuring module for years. With two lines of code I can load the module and place it anywhere in the application (e.g. a tab, accordion pane, floating pane, etc). The three files for the module only exist once on my server. Write once, use many. Easy to update. Company A and Company B both have intranet web apps, but the measure module comes from the same place every time someone initiates its use. This same idea allows me to choose the api version for every app I have deployed by changing a single variable in one file on my server. When a new version comes out I test it out in the development environment and if there's no problems I update all my apps at once, by changing 2.7 to 2.8 for example. 4) All my apps' index.html look like this: [HTML] [/HTML] The rest is programmatic. Many of my apps have measuring capabilities, but the module and the controls are only downloaded when the user first uses the module. This on-demand method keeps the app lean and quick. The code samples above come from a app I'm currently working on that has 20+ dynamic layers, 5+ feature layers, more tasks than I can count and 28 geoprocessing tasks. If I had to load all that onLoad it would take forever to load and be slow. Not to mention taxing on bandwidth. Well Jeremy, I hope I didn't confuse you. I never post on the forum, but I noticed your post just as I was finishing up the hydrant buffer and thought I might weigh in for once. Good luck! 2.JPG 1.JPG