Latest Contributions by CraigLinn

‎08-21-2015

I am seeking the a way to show a hyperlink if a link is provided and not show if one is not provided. Thanks for any assistance. var template =new InfoTemplate( "<b>${NAME}</b>","<b>Address:</b> ${Match_addr}<br><br/><b>Phone:</b> ${PHONE} <br/><br/><b>Website:</b>${WEBSITE} <br><a target='_blank' href='${WEBSITE}' >Webpage</a><br><br/>

‎07-06-2015

Seeing if there is an AMD Version available. Thanks, Local Storage Demo

‎05-14-2015

I am trying to get a div container to show when a specific layer is turned on and turn off a div once a new layer is selected. Please see attached I am open to suggestions. Thanks.

‎03-13-2015

Seeking assistance on getting a freehand selection to push objects to a grid. Thanks, <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <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.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" href="https://community.esri.com//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #mapDiv { padding: 0; margin: 0; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; text-align: left; } body { background-color: #FFF; overflow: hidden; font-family: "Trebuchet MS"; } #bcMain { width: 100%; height: 100%; } #divRenderer { position: absolute; left: 27px; bottom: 27px; } #cpBottom { height: 100px; } #divGrid { height: 100%; } .dgrid { border: none; } .field-eqid { width: 100px; } .field-datetime { width: 160px; } .field-magnitude { width: 60px; } .field-longitude { width: 100px; } .field-latitude { width: 100%; } .esriControlsBR{ display: none; } .esriPopup .esriPopupVisible { display: none;} .esriPopupWrapper{ display: none;} .tundra .dijitBorderContainer-dijitContentPane { background-color: rgb(16, 100, 95); height: 58px; overflow: hidden; } .commandPanel { height: 52px; margin: 0px; padding: 2px; overflow: hidden; position: absolute; text-align: center; vertical-align: middle; } .okIE .commandButton { border-radius: 8px; } .commandButton { width: 44px; height: 44px; text-align: center; cursor: pointer; } .appTheme { color: rgb(255, 255, 255); background-color: rgb(16, 100, 95); } .commandPanel table { border-spacing: 0px; } .commandIcon { width: 32px; height: 32px; margin-top: 6px; } #divBuff { width: 200px; max-height: 424px; padding: 4px; position: absolute; display: none; background-color: rgb(16, 100, 95); right: 7px; top: 1%; z-index: 999; border-radius: 8px; color: rgb(255, 255, 255); vertical-align: middle; text-align: center; border-color: 1px solid #121310; text-align:left; } #appIcon { float: left; border: none; border-style: none; vertical-align: middle; max-height: 95%; margin: 5px; } .titleText { height: 48px; margin: 4px; padding: 0px; font-size: 175%; vertical-align: middle; word-wrap: break-word; float: left; } #divLayers { width: 421px; height: 290px; padding: 4px; position: absolute; display: none; background-color: rgb(16, 100, 95); right: 7px; top: 1%; z-index: 999; border-radius: 8px; } .layersBox { width: 400px; max-height: 270px; padding: 4px; position: absolute; background-color: rgb(16, 100, 95); right: 7px; top: 1%; z-index: 999; border-radius: 8px; color: white; vertical-align: middle; text-align: left; border-color: 1px solid #121310; overflow-y: scroll; overflow-x:hidden; padding: 4px; z-index: 40; word-wrap: break-word; } #divTableSearch { width: 75%; height: 175px; padding: 4px; position: absolute; right: 50px; display: none; background-color: rgb(16, 100, 95); Bottom: 1%; z-index: 999; border-radius: 8px; vertical-align: middle; } /* this line hides layers when out of scale for the inline TOC */ .agsjsTOCOutOfScale { display: none } </style> <script type="text/javascript"> var djConfig = { parseOnLoad: true, packages: [{ "name": "agsjs", "location": "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs" }] }; </script> <script> $(document).ready(function(){ $("#Search").click(function(){ $("#divBuff").fadeToggle("fast"); $("#divTableSearch").fadeToggle("fast"); }); }); </script> <script src="http://js.arcgis.com/3.10/"></script> <script> var toc; require([ "esri/map", "esri/layers/FeatureLayer", "esri/tasks/query", "esri/geometry/Circle", "esri/graphic", "esri/InfoTemplate", "dojo/_base/connect", "agsjs/dijit/TOC", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/dijit/Legend", "dijit/registry", "esri/dijit/Legend", "esri/tasks/GeometryService", "esri/tasks/BufferParameters", "dijit/form/Button", "esri/geometry/Extent", "esri/graphicsUtils", "esri/toolbars/draw", "dojo/dom-construct", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer", "esri/config", "esri/Color", "dojo/dom", "dojo/parser", "dojo/store/Memory", "dojo/data/ItemFileWriteStore", "dgrid/OnDemandGrid", "dojox/grid/EnhancedGrid", "dojox/grid/enhanced/plugins/exporter/CSVWriter", "dojox/grid/enhanced/plugins/Printer", "dgrid/Selection", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/_base/declare", "dojo/_base/array", "dojo/on", "dijit/form/ComboBox", "dojo/domReady!"], function( Map, FeatureLayer, Query, Circle, Graphic, InfoTemplate, connect,TOC, ArcGISDynamicMapServiceLayer,Legend, registry, Legend, GeometryService, BufferParameters, Extent, Button, graphicsUtils, Draw, domConstruct, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, esriConfig, Color, dom, parser, Memory, ItemFileWriteStore, Grid, EnhancedGrid, CSVWriter, Printer, Selection, BorderContainer, ContentPane, declare, array, on ) { var map, gsvc, selectionToolbar, tb; // Parse DOM nodes decorated with the data-dojo-type attribute parser.parse(); console.log(registry.byId("zoomin")); // Initialize the dgrid var gridNF = new EnhancedGrid({ structure : [ {name: "name", field : "Name"}, {name: "requesttype", field : "Request Type"}, {name: "requestreceived", field : "Request Received"} ], plugins: { exporter: true, printer: true } }, "divGrid"); gridNF.startup(); //Step: Specify the output fields var outFieldsNF = ["objectid", "name", "requesttype", "requestreceived"]; // this should not be needed as nearly all query & select functions are performed on the client // esriConfig.defaults.io.proxyUrl = "/proxy"; map = new Map("mapDiv", { basemap: "gray", center: [-96.000, 33.699], zoom: 4, slider: true }); map.on("load", initSelectToolbar); map.on("load", initToolbar); var markerSymbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_CIRCLE, 12, new SimpleLineSymbol( SimpleLineSymbol.STYLE_NULL, new Color([100, 34, 250, 0.9]),1 ), new Color([255, 34, 25, 0.9]) ); var fieldsSelectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5])); var extentSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([84, 84, 84, 0.5])); // Note that an info template has been defined so when //selected features are clicked a popup window will appear displaying the content defined in the info template. var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/LocalGovernment/CitizenRequests/MapServer/0",{ // infoTemplate: new InfoTemplate("Hospitals: ${NAME}", "${*}"), outFields: ["objectid", "name", "requestreceived", "requesttype"], mode: FeatureLayer.MODE_ONDEMAND }); featureLayer.setSelectionSymbol(markerSymbol); map.addLayer(featureLayer); countyLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", { }); countyLayer.setVisibility(true); //add the legend map.on("layers-add-result", function (evt) { var layerInfo = arrayUtils.map(evt.layers, function (layer, index) { return { layer: layer.layer, title: layer.layer.name }; }); if (layerInfo.length > 0) { var legendDijit = new Legend({ map: map, layerInfos: layerInfo }, "legendDiv"); legendDijit.startup(); } //add check boxes arrayUtils.forEach(layerInfo, function (layer) { var layerName = layer.title; if (layerName == undefined) { layerName = "SSSI"; } var checkBox = new CheckBox({ name: "checkBox" + layer.layer.id, value: layer.layer.id, checked: layer.layer.visible, onChange: function (evt) { var clayer = map.getLayer(this.value); clayer.setVisibility(!clayer.visible); this.checked = clayer.visible; } }); //add the check box and label to the TOC domConstruct.place(checkBox.domNode, "toggle", "after"); var checkLabel = domConstruct.create('label', { 'for': checkBox.name, innerHTML: layerName }, checkBox.domNode, "after"); domConstruct.place("<br/>", checkLabel, "after"); }); }); // map.addLayer(countyLayer); map.addLayers([ featureLayer, countyLayer]); //Add Table of Contents /////////////////////////////////////////////////////////////////////////////////// on(dom.byId("selectPolygonButton"), "click", function () { selectionToolbar.activate(Draw.EXTENT); }); on(dom.byId("selectCircleButton"), "click", function () { selectionToolbar.activate(Draw.CIRCLE); }); on(dom.byId("selectFreehandPolygonButton"), "click", function () { selectionToolbar.activate(Draw.FREEHAND_POLYGON); }); on(dom.byId("clearSelectionButton"), "click", function () { featureLayer.clearSelection(); map.graphics.clear(); dom.byId("messages").innerHTML = "<a>No features selected</a>"; }); //////////////////////////////////////////////// function initSelectToolbar(event) { alert("initSelectToolbar "); selectionToolbar = new Draw(event.map); var selectQuery = new Query(); on(selectionToolbar, "DrawEnd", function (geometry) { var promises = []; var graphic = new Graphic(geometry, extentSymbol); console.log(graphic); map.graphics.add(graphic); selectionToolbar.deactivate(); selectQuery.returnGeometry = false; selectQuery.outFields = ["*"]; selectQuery.geometry = geometry; if(featureLayer.visible){ promises.push(featureLayer.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW)); } var allPromises = new All(promises); allPromises.then(function (r) { showselResults(r); }); }); } //////////////////////////////////////////////////// gsvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); function initToolbar(evtObj) { alert("initToolbar "); app.tb = new Draw(evtObj.map); app.tb.on("draw-end", doBuffer); } // selection symbol used to draw the selected census block points within the buffer polygon // map.addLayer(featureLayer); // var circleSymb = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL,new SimpleLineSymbol( // SimpleLineSymbol.STYLE_SHORTDASHDOTDOT, // new Color([105, 105, 105]), 3 ), new Color([255, 255, 0, 0.25]) // ); // var circle; // var radius = parseInt(dom.byId("bufferDistance").value); //when the map is clicked create a buffer around the click point of the specified distance. // map.on("click", function(evt){ // var radius = parseInt(dom.byId("bufferDistance").value); // circle = new Circle({ // center: evt.mapPoint, // // geodesic: true, // radius: radius, // radiusUnit: "esriMiles" // }); ; // map.graphics.clear(); // map.infoWindow.show(); // var graphic = new Graphic(circle, circleSymb); // map.graphics.add(graphic); // var query = new Query(); // query.geometry = circle.getExtent(); // //use a fast bounding box query. will only go to the server if bounding box is outside of the visible map // featureLayer.queryFeatures(query, selectInBuffer); // }); // function selectInBuffer(response){ // var feature; // var features = response.features; // var inBuffer = []; //filter out features that are not actually in buffer, since we got all points in the buffer's bounding box // for (var i = 0; i < features.length; i++) { // feature = features; // if(circle.contains(feature.geometry)){ // inBuffer.push(feature.attributes[featureLayer.objectIdField]); // } // } // var query = new Query(); // query.objectIds = inBuffer; //use a fast objectIds selection query (should not need to go to the server) // featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){ // var totalFeatures = results.length; // var r = ""; // r = "<b>The total Number of Nursing Homes within the Buffer <i>" + totalFeatures+ "</i>.</b>"; // dom.byId("messages").innerHTML = r; // }); // populateGrid(response); // } //Step: Wire the layer's selection complete event //FeatureLayer.on("selection-complete", populateGrid); // Step: Perform the selection //FeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW); function showselResults(results) { var rsltsMsg = ""; rsltsMsg = 'Total features selected: <b>[count]</b><br> '; var rsltCnt = 0; if(featureLayer.visible){ rsltsMsg += 'FeatureLayer 1: <b>' + results[rsltCnt].length.toString() + '</b><br> &nbsp'; rsltCnt++; } var count = 0; for (var i = 0; i < results.length; i++) { count += results.length; } dom.byId("messages").innerHTML = rsltsMsg.replace('[count]', count); } function populateGrid(results) { var gridData; dataNF = array.map(results.features, function(feature) { return { // Step: Reference the attribute field values "objectid" : feature.attributes[outFieldsNF[0]], "name" : feature.attributes[outFieldsNF[1]], "requesttype" : feature.attributes[outFieldsNF[2]], "requestreceived" : feature.attributes[outFieldsNF[3]] } }); // Pass the data to the grid var memStore = new ItemFileWriteStore({ data : { identifier: 'OBJECTID', items: dataNF } }); gridNF.setStore(memStore); } on(dojo.byId("exportAll"), "click", function () { gridNF.exportGrid("csv", function(str){ alert(str); }); }); on(dojo.byId("printAll"), "click", function () { gridNF.printGrid({title: "Hospital List", cssFiles: []}); }); function doBuffer(evtObj) { var geometry = evtObj.geometry, map = app.map, gsvc = app.gsvc; switch (geometry.type) { case "point": var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25])); break; case "polyline": var symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1); break; case "polygon": var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])); break; } var graphic = new Graphic(geometry, symbol); map.graphics.add(graphic); //setup the buffer parameters var params = new BufferParameters(); params.distances = [dom.byId("distance").value]; params.unit = GeometryService[dom.byId("unit").value]; if (geometry.type === "polygon") { //if geometry is a polygon then simplify polygon. This will make the user drawn polygon topologically correct. gsvc.simplify([geometry], function (geometries) { params.geometries = geometries; gsvc.buffer(params, showBuffer); }); } else { params.geometries = [geometry]; gsvc.buffer(params, showBuffer); } } function showBuffer(bufferedGeometries) { var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0, 0.65]), 2), new Color([255, 0, 0, 0.35])); arrayUtils.forEach(bufferedGeometries, function (geometry) { var graphic = new Graphic(geometry, symbol); app.map.graphics.add(graphic); }); app.tb.deactivate(); app.map.showZoomSlider(); } app = { map: map, tb: tb, gsvc: gsvc }; }); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;"> <div id="appTitle" style= "vertical-align: middle; padding-left: 20px"> <span class="titleText" style="color:white;">Title</span> <div id="commandPanel" class="commandPanel" style="right: 4px; top:4px;"> <table class="appTheme"> <tbody> <tr> <td class="commandPanelItem"><div id="Search" class="commandButton appTheme appThemeHover" title="Find" style="display: block; visibility: visible;"><img src="http://webhelp.esri.com/arcgisexplorer/1500/gpsicons/GPX_107_air_strip.png" class="commandIcon"></div></td> </tr> </tbody> </table> </div>  </div> </div> <div id="mapDiv" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"> <div id="divBuff" class="searchBox appTheme" style="right: 2px; top: 2px; bottom: 2px;"> <label for="searchBox_entry">Buffer Tools </label> <span id="drop"><form name="FormSelection">  <select name="BufferSelection"> <option> Layer 1</option> </select> </form> </span> <br/><br/> <span id="messages"></span> <br/> <div><b>Feature Selection</b></div> <button id="selectPolygonButton" data-dojo-type="dijit/form/Button">Polygon</button> <button id="selectCircleButton" data-dojo-type="dijit/form/Button">Circle</button> <button id="selectFreehandPolygonButton" data-dojo-type="dijit/form/Button">Freehand Polygon</button> <button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Selection</button> <br /><hr /> <button id="exportAll">Export all to CSV</button> <button id="printAll">Print All</button> </div>  </div> <div id="divLayers"> <div id="layersBox" class="layersBox appTheme" style="right: 2px; top: 2px; display: block;"> <div id="divLayersTitle">Toggle Visible Layers:</div> </div> </div>  <div id="divTableSearch" align="center"> <div id="divGrid"style="height:110px;"> </div>  </div>  </div> </div> </body> </html>

‎01-29-2015

I will see how that works out. Thanks, My initial hope was to use the ${*}. I have turned off the fields I do not want displayed before I publish out the service however the OBJECTID field always publishes out with the service no matter if it is turned on or off. In addition it always gives "layername= " I was hoping I would not have to create an infotemplate and set fields for every layer given I have many.

‎01-28-2015

I am using the TOC and the Identify task to accomplish the goal of my info-template. --Trying to get each layer have its own info template based on attributes of that layer. Since not all layers have the same fields Names and attributes. Thanks,

‎01-06-2015

Thanks for your support! That does help. I should have been more detailed in my question. I have different rest services associated with each radio button. I would have a different table and search variable for each rest service. I was thinking about creating multiple find task with multiple table divs and with the radio button selected toggle all tables except that one, the same goes for search bar. What are your thoughts on that? <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</title> <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.12/dojox/grid/resources/Grid.css"> <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.12/dojox/grid/resources/claroGrid.css"> <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.12/esri/css/esri.css"> <script type='text/javascript' src="http://js.arcgis.com/3.12/"></script> <style type='text/css'> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script type='text/javascript'>//<![CDATA[ window.onload=function(){ require([ "esri/map", "esri/tasks/FindTask", "esri/tasks/FindParameters", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/on", "dojo/dom", "dijit/registry", "dojo/_base/array", "dojo/_base/connect", "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore", "dijit/form/Button", "dojo/parser", "dijit/form/RadioButton", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser ) { var findTask, findParams; var map, center, zoom; var grid, store; parser.parse(); registry.byId("search").on("click", doFind); center = [-85.7667, 38.2500]; zoom = 11; map = new esri.Map("map", { basemap: "streets", center: center, zoom: zoom }); //Create Find Task using the URL of the map service to search findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/MapServer"); findTask2 = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer"); //0 //findTask2 Fields ObjectID State_FIPS TRACT BLOCK map.on("load", function () { //Create the find parameters findParams = new FindParameters(); findParams.returnGeometry = true; findParams.searchFields = ["NAME"]; findParams.outSpatialReference = map.spatialReference; }); function doFind() { if(registry.byId("radLayer1").checked){ findParams.layerIds = [1]; } // else if(registry.byId("radLayer2").checked){ // findParams.layerIds = [3]; // } findParams.searchText = dom.byId("ownerName").value; findTask.execute(findParams, showResults); } function showResults(results) { map.graphics.clear(); var symbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2), new Color([98, 194, 204, 0.5]) ); var items = arrayUtils.map(results, function (result) { var graphic = result.feature; graphic.setSymbol(symbol); map.graphics.add(graphic); return result.feature.attributes; }); var data = { identifier : "OBJECTID", //This field needs to have unique values label : "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere. items : items }; store = new ItemFileReadStore({ data : data }); var grid = registry.byId("grid"); grid.setStore(store); grid.on("rowclick", onRowClickHandler); map.centerAndZoom(center, zoom); } function onRowClickHandler(evt) { var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).OBJECTID; var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) { return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedTaxLotId); }); if ( selectedTaxLot.length ) { var centerClickRow = [selectedTaxLot[0].geometry.getLongitude(), selectedTaxLot[0].geometry.getLatitude()]; var zoomClickRow = 14; map.centerAndZoom(centerClickRow, zoomClickRow); // map.setExtent(selectedTaxLot[0].geometry.getExtent(), true); } } }); }//]]> </script> </head> <body> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;"> ID: <input type="text" id="ownerName" size="60" value="a" /> <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search </button> <input type="radio" name="rbLayer" value="rbLayerONE" checked="checked" id="radLayer1" data-dojo-type="dijit/form/RadioButton">Fire Stations <input type="radio" name="rbLayer" value="rbLayerTWO" id="radLayer2" data-dojo-type="dijit/form/RadioButton"> Layer 2 </div> <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;"> <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"> <thead> <tr> <th field="OBJECTID">ID</th> <th field="NAME">Name</th> <th field="ADDRESS"width="30%">Address</th> <th field="LFD_DIST"width="100%">City</th> </tr> </thead> </table> </div> </div> </body> </body> </html>

‎01-05-2015

I am looking for the best way to run a find task based on a radio button selection and export that to a grid. Thus I simply choose the correct radio button I want to use and search layer and populate results. Thanks, <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Display Find Task results in Dojo DataGrid</title> <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojox/grid/resources/Grid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojox/grid/resources/claroGrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script src="http://js.arcgis.com/3.12/"></script> <script> require([ "esri/map", "esri/tasks/FindTask", "esri/tasks/FindParameters", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/on", "dojo/dom", "dijit/registry", "dojo/_base/array", "dojo/_base/connect", "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore", "dijit/form/Button", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser ) { var findTask, findParams; var map, center, zoom; var grid, store; parser.parse(); registry.byId("search").on("click", doFind); center = [-83.266, 42.568]; zoom = 11; map = new esri.Map("map", { basemap: "streets", center: center, zoom: zoom }); //Create Find Task using the URL of the map service to search findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/"); findTask = new FindTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0"); map.on("load", function () { //Create the find parameters findParams = new FindParameters(); findParams.returnGeometry = true; findParams.layerIds = [0]; findParams.searchFields = ["OWNERNME1", "OWNERNME2"]; findParams.outSpatialReference = map.spatialReference; console.log("find sr: ", findParams.outSpatialReference); }); function doFind() { //Set the search text to the value in the box findParams.searchText = dom.byId("ownerName").value; findTask.execute(findParams, showResults); } 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([98, 194, 204]), 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 }); var grid = registry.byId("grid"); grid.setStore(store); grid.on("rowclick", onRowClickHandler); //Zoom back to the initial map extent map.centerAndZoom(center, zoom); } //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); } } }); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;"> Owner name: <input type="text" id="ownerName" size="60" value="Katz" /> <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search </button> <input type="radio" id="radLayer1" name="rbLayer" value="rbLayerONE" checked>Layer 1 <input type="radio" id="radLayer2" name="rbLayer" value="rbLayerTWO" checked>Layer 2 </div> <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;"> <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"> <thead> <tr> <th field="PARCELID">Parcel ID</th> <th field="OWNERNME1" >Owner 1</th> <th field="OWNERNME2">Owner 2</th> <th field="RESYRBLT ">Year Built</th> <th field="SITEADDRESS" width="100%">Address</th> </tr> </thead> </table> </div> </div> </body> </html>

‎12-23-2014

I am using this sample Feature layer hover | ArcGIS API for JavaScript I have modified it to work with a points layer. I was curious if anyone had a suggestion on clearing the dialog after cursor moves off the point. The dialog box seems to not disappear I have tried making the points bigger without much success. I wanted to use an info template however I hit a road block with the mouse click event when trying to incorporate it into my bigger application that uses the closest facility sample. Attached is sample code that pulls in a point feature service. Thanks,

‎12-09-2014

I have my buffer drawing to the size of my selection in a combo box however when I select a value greater than a radius of 4 miles it does not draw the larger circle and reverts back to the radius of 4. I assume this is some default somewhere I just can't seem to locate or how to modify it. Please see attached html for full code. Thank you for any suggestions. Long range plan is to then export selection to a table.

‎11-20-2014

Looking for best way to symbolize newly imported layers quickly according to a "COLORS" column. I use a stand alone program that runs plume models that exports the layers out to a .shp file. The layers need to use the specified RGB values given. Thanks, for any suggestions.

‎11-17-2014

Thanks!!

‎11-14-2014

I am trying to figure out the best way to route to closest facility based on radio button selection. The default routes to squares but I would like to choose between either circles or squares via radio button selection. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Closest Facilities</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/esri/css/esri.css"> <style> body,html,#main{margin:0;padding:0;height:100%;width:100%;} .panel { border-radius: 6px; box-shadow: 0px 6px 3px -3px #888; border: 2px solid #86942A; margin: 5px; } #metac { position: absolute; left: 20px; bottom: 62px; width: 10em; height: 5em; z-index: 40; background: #fff; color: #777; padding: 5px; border: 2px solid #686; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-family: arial; font-size: 0.9em; } #metac h3 { color: #666; font-size: 1.1em; padding: 0px; margin: 0px; display: inline-block; } </style> <script src="http://js.arcgis.com/3.11/"></script> <script> var map, params; require([ "dojo/dom", "dojo/_base/array", "esri/Color", "dojo/parser", "dijit/registry", "esri/urlUtils", "esri/map", "esri/lang", "esri/graphic", "esri/InfoTemplate", "esri/layers/GraphicsLayer", "esri/renderers/SimpleRenderer", "esri/geometry/Point", "esri/tasks/FeatureSet", "esri/tasks/ClosestFacilityTask", "esri/tasks/ClosestFacilityParameters", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "dijit/form/ComboBox", "dijit/layout/BorderContainer", "dijit/layout/ContentPane" ], function( dom, array, Color, parser, registry, urlUtils, Map, esriLang, Graphic, InfoTemplate, GraphicsLayer, SimpleRenderer, Point, FeatureSet, ClosestFacilityTask, ClosestFacilityParameters, SimpleMarkerSymbol, SimpleLineSymbol ) { var incidentsGraphicsLayer, routeGraphicLayer, closestFacilityTask; parser.parse(); urlUtils.addProxyRule({ urlPrefix: "route.arcgis.com", proxyUrl: "/sproxy/" }); map = new Map("map", { basemap: "streets", center: [-122.4, 37.785], zoom: 14, showInfoWindowOnClick: false }); map.on("click", mapClickHandler); params = new ClosestFacilityParameters(); params.impedenceAttribute= "Miles"; params.defaultCutoff= 7.0; params.returnIncidents=false; params.returnRoutes=true; params.returnDirections=true; map.on("load", function(evtObj) { var map = evtObj.target; var facilityPointSymbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_SQUARE, 20, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([89,95,35]), 2 ), new Color([130,159,83,0.40]) ); var incidentPointSymbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_DIAMOND, 16, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([200,100,200]), 2 ), new Color([200,100,200,0.9]) ); incidentsGraphicsLayer = new GraphicsLayer(); var incidentsRenderer = new SimpleRenderer(incidentPointSymbol); incidentsGraphicsLayer.setRenderer(incidentsRenderer); map.addLayer(incidentsGraphicsLayer); routeGraphicLayer = new GraphicsLayer(); var routePolylineSymbol = new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([250,0,0]), 4.0 ); var routeRenderer = new SimpleRenderer(routePolylineSymbol); routeGraphicLayer.setRenderer(routeRenderer); map.addLayer(routeGraphicLayer); var facilitiesGraphicsLayer = new GraphicsLayer(); var facilityRenderer = new SimpleRenderer(facilityPointSymbol); facilitiesGraphicsLayer.setRenderer(facilityRenderer); map.addLayer(facilitiesGraphicsLayer); facilitiesGraphicsLayer.add(new Graphic(new Point(-13625960,4549921,map.spatialReference))); facilitiesGraphicsLayer.add(new Graphic(new Point(-13626184,4549247,map.spatialReference))); facilitiesGraphicsLayer.add(new Graphic(new Point(-13626477,4549415,map.spatialReference))); facilitiesGraphicsLayer.add(new Graphic(new Point(-13624374,4548254,map.spatialReference))); facilitiesGraphicsLayer.add(new Graphic(new Point(-13624891,4548565,map.spatialReference))); var facilities = new FeatureSet(); facilities.features = facilitiesGraphicsLayer.graphics; params.facilities = facilities; params.outSpatialReference = map.spatialReference; //////////////NEW Point Symbols ////////// var facilityNEWPointSymbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_CIRCLE, 15, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([250,95,35]), 2 ), new Color([130,250,83,0.40]) ); var facilitiesNEWGraphicsLayer = new GraphicsLayer(); var facilityNEWRenderer = new SimpleRenderer(facilityNEWPointSymbol); facilitiesNEWGraphicsLayer.setRenderer(facilityNEWRenderer); map.addLayer(facilitiesNEWGraphicsLayer); facilitiesNEWGraphicsLayer.add(new Graphic(new Point(-13625750,4549721,map.spatialReference))); facilitiesNEWGraphicsLayer.add(new Graphic(new Point(-13626194,4549547,map.spatialReference))); facilitiesNEWGraphicsLayer.add(new Graphic(new Point(-13626487,4549215,map.spatialReference))); facilitiesNEWGraphicsLayer.add(new Graphic(new Point(-13625375,4549459,map.spatialReference))); facilitiesNEWGraphicsLayer.add(new Graphic(new Point(-13624364,4548554,map.spatialReference))); var facilitiesNEW = new FeatureSet(); facilitiesNEW.features = facilitiesNEWGraphicsLayer.graphics; /////////////// END NEW POINT SYMBOL }); closestFacilityTask = new ClosestFacilityTask("http://route.arcgis.com/arcgis/rest/services/World/ClosestFacility/NAServer/ClosestFacility_World"); registry.byId("numLocations").on("change", function() { params.defaultTargetFacilityCount = this.value; clearGraphics(); }); function clearGraphics() { //clear graphics dom.byId("directionsDiv").innerHTML= ""; map.graphics.clear(); routeGraphicLayer.clear(); incidentsGraphicsLayer.clear(); } function mapClickHandler(evt) { clearGraphics(); dom.byId("directionsDiv").innerHTML= ""; var inPoint = new Point(evt.mapPoint.x, evt.mapPoint.y, map.spatialReference); var location = new Graphic(inPoint); incidentsGraphicsLayer.add(location); var features = []; features.push(location); var incidents = new FeatureSet(); incidents.features = features; params.incidents = incidents; map.graphics.enableMouseEvents(); routeGraphicLayer.on("mouse-over", function(evt){ //clear existing directions and highlight symbol map.graphics.clear(); dom.byId("directionsDiv").innerHTML= "Hover over the route to view directions"; var highlightSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,255,255],0.25), 4.5); var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol); map.graphics.add(highlightGraphic); dom.byId("directionsDiv").innerHTML = esriLang.substitute(evt.graphic.attributes,"${*}"); }); //solve closestFacilityTask.solve(params, function(solveResult){ array.forEach(solveResult.routes, function(route, index){ //build an array of route info var attr = array.map(solveResult.directions[index].features, function(feature){ return feature.attributes.text; }); var infoTemplate = new InfoTemplate("Attributes", "${*}"); route.setInfoTemplate(infoTemplate); route.setAttributes(attr); routeGraphicLayer.add(route); dom.byId("directionsDiv").innerHTML = "Hover over the route to view directions"; }); //display any messages if(solveResult.messages.length > 0){ dom.byId("directionsDiv").innerHTML = "<b>Error:</b> " + solveResult.messages[0]; } }); } }); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0px;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" class="panel"> <div id="metac"><h3>Layers</h3> <br> <form > <input type="radio" id="radCurrent" name="rbPoints" value="" checked>Current (Squares)<br> <input type="radio" id="radNew" name="rbPoints" value="">New (Circles)<br> </form> </div> </div> <div id="directions" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" class="panel" style="height:250px;"> <b>Click the map to find routes for the <select id="numLocations" name="numLocations" data-dojo-type="dijit/form/ComboBox" value="1" style="width:60px;"> <option selected="selected">1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> closest facilities to the input point.</b> <div id="directionsDiv"></div> </div> </div> </body> </html>

‎10-22-2014

add this to your css .esriPopup a { display:none; }

‎10-15-2014

You could try adding <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to the top of your application. See if you can force IE into a compatibility mode. Google IE Compatibility mode. html - Force IE compatibility mode off in IE using tags - Stack Overflow

Online Status	Offline
Date Last Visited	‎11-11-2020 02:23 AM

My Ideas

Latest Contributions by CraigLinn

Re: additional function in infotemplate hyperlink

Any update to AMD for Local Storage Example??

Show/ Hide div on layer visibility

Selection to Grid

Re: TOC with Different InfoTemplates

TOC with Different InfoTemplates

Re: Grid- Find task based on Radio Button Selection

Grid- Find task based on Radio Button Selection

ToolTip Dialog for Points

Change Default Buffer Size based on Combo Box

Symbolize based on Column Color RGB value -Arcmap 10.2

Re: Select layer to use for Closest Facility Route

Select layer to use for Closest Facility Route

Re: Hide the zoom link in infoTemplate

Re: TextSymbols do not display in IE8.

Re: additional function in infotemplate hyperlink

ToolTip Dialog for Points

Re: Hide the zoom link in infoTemplate