Latest Contributions by JenniferZumbado-Hannibal1

‎11-06-2014

Hi there, I'm kinda new at programming so please excuse me if I ask stupid questions. What I want to do is simple: Show a Search grid inside an accordion left panel where it will print the grid with a button. I've achieved doing the all of it until I get to the part where I want to print the grid. I'm confuse about using DataGrid or EnhancedGrid and when and how to use it. I want to take advantage of the plugin that dojox has. I actually found a script that uses this feature (see attachment). But, now I'm stuck on how to make it work on my side. And for some reason my Clear button is not working anymore. Also, I wanted to hightlight the outline polygon a different color when the row in the grid gets selected. Any ideas on this? I'm purposely omitting some parts. This is what I have so far: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Title</title> <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.11/dojox/grid/resources/Grid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"> <style> ..... </style> var .......center, zoom, grid, store; require([ "dojo/_base/connect", "dojo/dom", "dojo/parser", "dojo/on", ...... "dojo/_base/array", "dojo/data/ItemFileReadStore", "dojo/data/ItemFileWriteStore", "esri/map", ..... "esri/layers/FeatureLayer", ..... "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol", ..... "esri/graphic", ..... "esri/config", "esri/InfoTemplate", ..... "esri/tasks/query", "esri/Color", "esri/tasks/FindTask", "esri/tasks/FindParameters", ...... "dijit/layout/AccordionContainer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/registry", "dijit/form/Button", "dijit/layout/TabContainer", "dojox/grid/DataGrid", "dojox/grid/EnhancedGrid", "dojox/grid/enhanced/plugins/Printer", "dojo/fx", "dojo/domReady!" ], function ( connect, dom, parser, on, ..... arrayUtils, ItemFileReadStore, ItemFileWriteStore, Map,....FeatureLayer, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, ..... Graphic, .....esriConfig, InfoTemplate, ...... Query, Color, FindTask, FindParameters,..... AccordionContainer, BorderContainer, ContentPane, registry, Button, TabContainer, DataGrid, EnhanceGrid, Printer, fx, domReady ) { // call the parser to create the dijit layout dijits parser.parse(); ..... map = new Map("map", { sliderOrientation: "horizontal", basemap: "topo", center: [-93.745776, 32.513614], zoom: 14, ..... }); dynaLayer1 = "http://......./MapServer/"; map.on("load", mapReady); //variable REST service Shreveport as a layer var layer = new ArcGISDynamicMapServiceLayer(dynaLayer1, { opacity: 0.8 }) map.addLayer(layer); //Create Find Task using the URL of the map service to search Caddo Parcels Parcels findTask = new FindTask("http://......./MapServer/"); map.on("load", function () { //Create the find parameters findParams = new FindParameters(); findParams.returnGeometry = true; findParams.layerIds = [12]; findParams.searchFields = ["PARCELID"]; findParams.outSpatialReference = map.spatialReference; }); function doFind() { //Set the search text to the value in the box findParams.searchText = dom.byId("searchText").value; findTask.execute(findParams, showResults); } dom.byId('doParcelSearch').onclick = doFind; function showResults(results) { //This function works with an array of FindResult that the task returns map.graphics.clear(); var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([50, 25, 200]), 2), new Color([98, 194, 204, 0.5]) ); //create array of attributes var items = arrayUtils.map(results, function (result) { var graphic = result.feature; graphic.setSymbol(symbol); map.graphics.add(graphic); return result.feature.attributes; }); //Create data object to be used in store var data = { identifier: "PARCELID", //This field needs to have unique values label: "PARCELID", //Name field for display. Not pertinent to a grid but may be used elsewhere. items: items }; //Create data store and bind to grid. store = new ItemFileReadStore({ data: data }); grid = registry.byId("grid"); grid.setStore(store); grid.on("rowclick", onRowClickHandler); //Zoom back to the initial map extent map.centerAndZoom(center, zoom); } //dojo Methods on(dojo.byID("printAll"), "click", function () { grid.printGrid({title: "Print Grid", cssFiles: []}); }); //Zoom to the parcel when the user clicks a row function onRowClickHandler(evt) { var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).PARCELID; var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) { return ((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId); }); if (selectedTaxLot.length) { map.setExtent(selectedTaxLot[0].geometry.getExtent(), true); } } dom.byId('ClearSearch').onclick = clearMyGrid; function clearMyGrid() { map.graphics.clear(); var emptyCells = { items: "" }; var emptyStore = new dojo.data.ItemFileReadStore({data: emptyCells}); grid.setStore(emptyStore); } ....... }); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width:100%;height:100%;margin: 0;"> <div id="header" data-dojo-type="dijit/layout/ContentPane" region="top"> <div> <ul style="margin:20px"> <b>Title</b> <div id="search"></div> </ul> </div> </div> <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" region="left" splitter="true"> <div data-dojo-type="dijit/layout/AccordionContainer" style="height: 300px;"> ....... </div> </div> <div data-dojo-type="dijit/layout/ContentPane" title="Click for GEOGNO results" > <input type="text" id="searchText" value="Input Parcel ID" /> <input type="button" value="Search" id="doParcelSearch"/> <input type="button" value="Print All" id="printAll"/> <input type="button" value="Clear" id="ClearSearch"/> <table data-dojo-type="dojox.grid.DataGrid" jsid="grid" id="grid" > <thead> <th field="ParcelID">Parcel ID</th> <th field="OWNER" >Owner</th> <th field="ADDRESS">Address</th> <th field="DESCRIPTION">Legal Description</th> <th field="TAXSTATUS" width="100%">Tax Status</th> </thead> </table> </div> </div> </div> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> <div id="HomeButton"></div> <div style="position:absolute; right:50px; top:10px; z-Index:999;"> <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false"> <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;"> <div id="basemapGallery"></div> </div> </div> </div> </div> </body> </html>

‎10-09-2014

You were right Timothy Hales‌ I was logged into my personal account and not my organization account. I wish I can name them differently. Thanks so much for all your help guys. Sorry for being such a pain. Again, I'm new at this

‎09-29-2014

I got it to work finally. Had to get an ESRI rep involved. I did have to put in your reference but used packages instead of paths: <script> var djConfig = { parseOnLoad: true, packages: [{ "name": "agsjs", "location": "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/" }] }; </script> Now the problem is it's not putting the map in the center and my overview, switch base map, and find widgets are not showing up. I will study the Dojo layouts to straighten this out. Thanks.

‎09-29-2014

I had one of our IT people try loading it without proxy settings and id didn't work. I loaded the page using IE v. 8 and opened the developer tools and in the console it gave me this message: xhrFailed init.js, line 32 character 224 Object doesn't support this property or method Blabla.html, line 83 character 2 I don't get it.

‎09-29-2014

Well...tried and that didn't help. But now I'm starting to believe it's my proxy settings. I'll give that a try and see. I'll post the result when I can configure the settings. Thanks so much Ken.

‎09-29-2014

I'm trying to learn programming with ArcGIS API for Javascript. This is my first attempt at this so please excuse my ignorance. Anyhow, what I want is very simple...use a dynamic map service with 23 layers (yes...I know...but my audience "needs them all") to be able to check off/on within a TOC. Thus, I downloaded the Table of Contents (TOC)/Legend Widget for JavaScript API and incorporated into my script. I haven't been very successful at all. I'm using Notepad ++ and have tried opening it with several different browsers (Firefox v. 31, Chrome v. 37, & IE v.8). Debugging with Chrome's developer tools mostly. I've put the TOC widget folder and .html on my webserver to test. No results! Not happening! What I'm I doing wrong? This is my script so far: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Blabla....</title> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> <link rel="stylesheet" type="text/css" href="../src/agsjs/css/agsjs.css" /> <style> html, body . . . . </style> <script src="http://js.arcgis.com/3.10/"> </script> <script type="text/javascript"> // helpful for understanding dojoConfig.packages vs. dojoConfig.paths: // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/ var dojoConfig = { paths: { //if you want to host on your own server, download and put in folders then use path like: agsjs: location.pathname.replace(/\/[^/]+$/, '') + '/../src/agsjs' } }; </script> <script type="text/javascript"> var map, toc, dynaLayer1; require(["dojo/_base/connect", "dojo/on", "esri/map", "esri/dijit/Geocoder", "esri/geometry/Extent", "esri/layers/FeatureLayer", "esri/layers/ArcGISTiledMapServiceLayer", "esri/symbols/SimpleFillSymbol", "esri/renderers/ClassBreaksRenderer", "agsjs/dijit/TOC", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/geometry/screenUtils", "dojo/dom", "dojo/dom-construct", "dojo/query", "dojo/_base/Color", "esri/dijit/Scalebar", "esri/dijit/HomeButton", "esri/dijit/OverviewMap", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "esri/dijit/BasemapGallery", "esri/arcgis/utils", "dojo/parser", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/fx", "dojo/domReady!" ], function(connect, on, Map, Geocoder, Extent, FeatureLayer, ArcGISTiledMapServiceLayer, SimpleFillSymbol, ClassBreaksRenderer, TOC, Graphic, SimpleMarkerSymbol, screenUtils, dom, domConstruct, query, Color, Scalebar, HomeButton, OverviewMap, BorderContainer, ContentPane, BasemapGallery, arcgisUtils, parser, ArcGISDynamicMapServiceLayer ) { // call the parser to create the dijit layout dijits parser.parse(); // note djConfig.parseOnLoad = false; // create a map var map = new Map("map", { sliderOrientation : "horizontal", basemap: "topo", center: [-93.745776,32.513614], zoom: 14 }); //variable REST service Shreveport as a layer dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://noonecares/rest/services/MapServer", { opacity: 0.9 });@ alert("1"); //shows up when it runs //Add a TOC widget map.on('layers-add-result', function(evt){ // overwrite the default visibility of service. // TOC will honor the overwritten value. dynaLayer1.setVisibleLayers([3, 7, 8, 23]); // { toc = new TOC({ map: map, layerInfos: [{ layer: dynaLayer1, title: "Base Map" //collapsed: true, // whether this root layer should be collapsed initially, default false. //slider: true, // whether to display a transparency slider. //autoToggle: true //whether to automatically collapse when turned off, and expand when turn on for groups layers. default true. }] }, 'tocDiv'); toc.startup(); alert("2"); //it skipped when it runs toc.on('load', function(){ alert("3"); //it skipped when it runs if (console) console.log('TOC loaded'); dom.byId("InsertNewLayer").disabled = false; }); }); map.addLayers([dynaLayer1]); alert("4"); //shows up when it runs on(dom.byId("SetOpacity"), 'click', function(evt){ if (dynaLayer1 != null) { dynaLayer1.setOpacity(0.2); } }); //adding geocoder widget var geocoder = new Geocoder({ arcgisGeocoder: { placeholder: "Find an address" }, autoComplete: true, map: map }, dom.byId("search")); map.on("load", enableSpotlight); geocoder.on("select", showLocation); geocoder.on("clear", removeSpotlight); //adding scalebar widget var scalebar = new Scalebar({ map: map, attachTo: "bottom-left", scalebarUnit: "dual" }); //adding home button widget var home = new HomeButton({ map: map }, "HomeButton"); home.startup(); //adding overview map widget var overviewMapDijit = new OverviewMap({ map: map, visible: true, attachTo: "bottom-right", opacity: .40 }); overviewMapDijit.startup(); //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps var basemapGallery = new BasemapGallery({ showArcGISBasemaps: true, map: map }, "basemapGallery"); basemapGallery.startup(); basemapGallery.on("error", function(msg) { console.log("basemap gallery error: ", msg); }); //showing Lat, Long location on the bottom of map function showLocation(evt) { map.graphics.clear(); var point = evt.result.feature.geometry; var symbol = new SimpleMarkerSymbol().setStyle( SimpleMarkerSymbol.STYLE_SQUARE).setColor( new Color([255,0,0,0.5]) ); var graphic = new Graphic(point, symbol); map.graphics.add(graphic); map.infoWindow.setTitle("Search Result"); map.infoWindow.setContent(evt.result.name); map.infoWindow.show(evt.result.feature.geometry); var spotlight = map.on("extent-change", function(extentChange) { var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, extentChange.extent); var width = geom.xmax - geom.xmin; var height = geom.ymin - geom.ymax; var max = height; if ( width > height ) { max = width; } var margin = '-' + Math.floor(max/2) + 'px 0 0 -' + Math.floor(max/2) + 'px'; query(".spotlight").addClass("spotlight-active").style({ width: max + "px", height: max + "px", margin: margin }); spotlight.remove(); }); } //adding point spot holder function enableSpotlight() { var html = "<div id='spotlight' class='spotlight'></div>" domConstruct.place(html, dom.byId("map_container"), "first"); } //removing point spot holder function removeSpotlight() { query(".spotlight").removeClass("spotlight-active"); map.infoWindow.hide(); map.graphics.clear(); } }); </script> </head> <body class="claro"> <div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;"> <div id="header" data-dojo-type="dijit/layout/ContentPane" region="top"> <div> <ul style="margin:15px"> <b>Blabla....</b> <div id="search"></div> </ul> </div> </div> <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" region="left" splitter="true"> <div id="tocDiv"> </div> </div> <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center"> <div id="HomeButton"></div> <div style="position:absolute; right:50px; top:10px; z-Index:999;"> <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false"> <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;"> <div id="basemapGallery"></div> </div> </div> </div> </div> </div> </body> </html>

Online Status	Offline
Date Last Visited	‎01-11-2023 02:24 PM

My Ideas

Latest Contributions by JenniferZumbado-Hannibal1

EnhancedGrid vs DataGrid for Print (mix code)

Re: Help!! TOC not showing up.....

Re: Help!! TOC not showing up.....

Re: Help!! TOC not showing up.....

Re: Help!! TOC not showing up.....

Help!! TOC not showing up.....

Re: Help!! TOC not showing up.....

Re: Help!! TOC not showing up.....