Latest Contributions by PaulMcCord

Is there a way to use the .goTo() method on an array of Graphics Layers so that I can zoom to the extent of the 'broadest' (most spread out) group of graphics? I'm creating an application where users are able to select from a list of park amenities. For each amenity that they select, a new Graphics Layer is created. I then add that Graphics Layer to an array of Graphics Layers. The problem arises when there are multiple layers in the array and I try to zoom to the extent of the amenities that are toggled on. I've tried to simply add all of the Graphics from all of the Graphics Layers to a new Graphic Layer. However, when I do this, the Graphics are removed from the Graphic Layer from which they were copied. In other words, if I have a Graphic Layer for parks where basketball courts are located, when I try to "copy" these graphics into a separate Graphic Layer, they're removed from the initial basketball courts Graphic Layer. Since I suspect that there is no way to run the .goTo() method on an array of Graphics Layers, I believe that the workaround is to add all of my Graphics to a new Graphic Layer, but this, surprisingly, doesn't seem to work. I've spent much more time on this issue than I thought I would; any help would be greatly appreciated! ... View more

I'm using the ArcGIS API for JS to query a Feature Layer hosted on ArcGIS Server. I'm trying to include a variable name in my "where" statement. For example: var params = new Query({ returnGeometry: true, outFields: ["*"] }); params.where = "PropOwner = 'City' AND Location = commName";‍‍‍‍‍‍‍‍‍‍‍‍ In the above, I'm querying buildings where the Property Owner field is populated with "City" and commName is a variable defined when a user selects a location from a drop down list. However, my query doesn't work when I pass it the variable commName.  I'm sure there is a simple way to do this. How do I need to revise my where statement to successfully pass it a variable name (in this case, commName)?  ... View more

I'm using ArcGIS API for JS v 4.11, and I'd like to remove a group of graphics from a Graphics Layer according to which checkbox is checked. In my code below, I'm giving the user the option to check either basketball, volleyball, or both. The layer on the ArcGIS Server is queried and the appropriate graphics are added to the map. This works fine when I'm adding graphics to the map. However, when I uncheck basketball, volleyball, or both, I'm unable to remove the appropriate graphics. When viewing the console window, it looks like I'm capturing the correct graphics, but when I attempt to remove with them with the removeMany() method (line 56 below), nothing is removed from the map. $(document).on("click", ".featureCheck", function(){ var trgt = $(this).attr("data-rel"); //This 'if' statement will execute the query and get the query results if(trgt == "bball"){ params.where = "Park_Att_4 = 'Y'" if ($(this).is(".checked")){ console.log("checked"); myMap.remove(wayneCoParks); qTask.execute(params).then(getResults); } else{ console.log("unchecked"); qTask.execute(params).then(removeLayer); //resultsLayer.removeAll(); } } else if(trgt == "vball"){ params.where = "Park_At_45 = 'Y'"; if ($(this).is(".checked")){ console.log("volleyball is checked"); myMap.remove(wayneCoParks); qTask.execute(params).then(getResults); } else{ console.log("unchecked"); qTask.execute(params).then(removeLayer); } } }); //Add and remove parks according to community /*$("#multi-select").change(function(){ console.log("change to selection"); x = $("#multi-select").val() console.log(x); })*/ //Called once promise is resolved function getResults(response){ console.log("in getResults"); console.log(response); var parkResults = response.features.map(function(feature){ feature.symbol = parkSymbol; feature.popupTemplate = resultsPopupTemplate; return feature; }); //Add results to the Layer console.log(parkResults); resultsLayer.addMany(parkResults); console.log(resultsLayer); }; //Called once promise is resolved function removeLayer(response){ console.log(response.features); resultsLayer.graphics.removeMany(response.features); console.log(resultsLayer); };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Note that the resultsLayer and several of the server query parameters are defined earlier in the code. Please let me know if I'm missing something. Thank you. ... View more

I'd like to query a hosted layer and add the output to my map using ArcGIS API for JS 4.11. I'm creating a Park Finder application, and the goal is for different parks to appear on the map according to amenities that are checked. I've been following the documentation for the Query and QueryTask modules and looking at the sample code in the QueryTask example: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=tasks-query. However, I can't seem to get the results to add to my map. At the moment, my test application is supposed to return one park named Rouge Park when I check the "Basketball" checkbox, but nothing appears on the map when I check the checkbox. Printing to the console, I can tell that the queried object is successfully making it to the final function where I ultimately add the result (lines 346-365). Am I adding the result incorrectly?  Apologies for copying my entire code... lines 61-210 essentially create dummy content. Any help would be very appreciated. <html> <head> <meta charset="utf-8"> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0"> <link href="https://www.waynecounty.com/ui/css/jquery.mmenu.all.css" rel="stylesheet" type="text/css"> <link href='https://www.waynecounty.com/ui/css/semantic.min.css' rel='stylesheet' type='text/css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src='https://www.waynecounty.com/ui/lib/semantic.min.js'></script> <!--JS Scripts to print map--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css"> <!--<link rel="manifest" href="/manifest.json"/>--> <!--ArcGIS API for JavaScript--> <script src="https://js.arcgis.com/4.11/"></script> <title>The Wayne County ParkFinder</title> <style> html, body { margin: 0px; height: 100%; width: 100%; } #map_canvas { height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: #F5FFFA; } #overviewDiv { position: absolute; bottom: 55px; left: 30px; width: 300px; height: 200px; border: 2px solid black; z-index: 997; overflow: hidden; } #extentDiv { background-color: rgba(0, 0, 0, 0.5); position: absolute; z-index: 998; } </style> </head> <body> <div class="ui small top fixed teal inverted menu"> <a class="browse item" style="color: white; font-size: 14px; font-weight: bold;"> Park Features <i class="large dropdown icon"></i> </a> <div class="ui fluid popup" style="top: 553px; left: 1px; bottom: auto; right: auto; width: 960px;"> <div class="ui six column relaxed equal height divided grid"> <div class=column> <h4 class="ui header">Trails & Fitness</h4> <div class="ui checkbox"> <input type="checkbox" name="ccSki"> <label>Cross Country Skiing</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="filler"> <label>Filler Amenity 1</label> </div> </div> <div class=column> <h4 class="ui header">Sports & Games</h4> <div class="ui checkbox featureCheck" data-rel="bball"> <input type="checkbox" name="bball"> <label>Basketball</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="vball"> <label>Volleyball</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="rackball"> <label>Racketball</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="vball"> <label>Volleyball</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="vball"> <label>Volleyball</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="vball"> <label>Volleyball</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="vball"> <label>Volleyball</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="vball"> <label>Volleyball</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="vball"> <label>Volleyball</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="vball"> <label>Volleyball</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="vball"> <label>Volleyball</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="vball"> <label>Volleyball</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="vball"> <label>Volleyball</label> </div> </div> <div class=column> <h4 class="ui header">Water Recreation</h4> <div class="ui checkbox"> <input type="checkbox" name="filler"> <label>Filler Amenity 2</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="filler"> <label>Filler Amenity 3</label> </div> </div> <div class=column> <h4 class="ui header">Outdoor Recreation</h4> <div class="ui checkbox"> <input type="checkbox" name="filler"> <label>Filler Amenity 4</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="filler"> <label>Filler Amenity 5</label> </div> </div> <div class=column> <h4 class="ui header">Winter Recreation</h4> <div class="ui checkbox"> <input type="checkbox" name="filler"> <label>Filler Amenity 6</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="filler"> <label>Filler Amenity 7</label> </div> </div> <div class=column> <h4 class="ui header">Amenities & Fitness</h4> <div class="ui checkbox"> <input type="checkbox" name="filler"> <label>Filler Amenity 8</label> </div> <br> <br> <div class="ui checkbox"> <input type="checkbox" name="filler"> <label>Filler Amenity 9</label> </div> </div> </div> </div> </div> <!--Map div--> <div id="map_canvas"></div> <script> var map; var myView; require([ "esri/Map", "esri/views/MapView", "esri/Basemap", "esri/layers/VectorTileLayer", "esri/widgets/ScaleBar", "esri/layers/MapImageLayer", "esri/layers/GraphicsLayer", "esri/tasks/QueryTask", "esri/tasks/support/Query", "esri/symbols/SimpleFillSymbol" ], function(Map, MapView, Basemap, VectorTileLayer, ScaleBar, MapImageLayer, GraphicsLayer, QueryTask, Query, SimpleFillSymbol) { //The URL of the Parks Map Service that will queried var parksMapServiceURL = "https://devarcgisent.waynecounty.lan/serverdev/rest/services/ParkFinder/Wayne_County_Parks/MapServer/0"; //The popup template and symbology for the search results var resultsPopupTemplate = { title: "{Parks_NAME}", content: "<b>Owner:</b> {Parks_OWNE}<br><b>Park Location:</b> {Park_Attri}<br><b>Basketball:</b> {Park_Att_4}" }; var parkSymbol = { type: "simple-fill", color: [51,51, 204, 0.9], style: "solid", outline: { color: "white", width: 1 } }; //Graphics layer for displaying the query results var resultsLayer = new GraphicsLayer(); //Point the QueryTask to the Map Service URL var qTask = new QueryTask({ url: parksMapServiceURL }); //Set the query parameters to always return geometry and all fields var params = new Query({ returnGeometry: true, outFields: ["*"], where: "Parks_NAME = 'Rouge Park'" //This will be changed to be more dynamic. For now keep this here. }); //Create the main map, starting with a custom basemap loaded from ArcGIS Online var basemap = new Basemap({ baseLayers: [ new VectorTileLayer({ portalItem: { id: "ddef64bb74174dd6adf7cff46dd24da7" } }) ] }); map = new Map({ basemap: basemap, layers: [resultsLayer], //Add graphics layer to the map sliderPosition: "bottom-right" }); //Add Wayne County boundary - number in the map.add function indicates the z-index. wayneCoBoundary = new MapImageLayer({ url: "https://devarcgisent.waynecounty.lan/serverdev/rest/services/WayneCoBaseMapApp/WayneCoBoundary/MapServer" }); map.add(wayneCoBoundary, 20); //Add Parks layer - number in the map.add function indicates the z-index wayneCoParks = new MapImageLayer({ url: "https://devarcgisent.waynecounty.lan/serverdev/rest/services/ParkFinder/Wayne_County_Parks/MapServer", sublayers: [{ id: 0, popupTemplate: { title: "{Parks_NAME}", content: "<b>Owner:</b> {Parks_OWNE}<br><b>Park Location:</b> {Park_Attri}<br><b>Basketball:</b> {Park_Att_4}" } }] }); map.add(wayneCoParks, 19); //Create the MapView for the main map myView = new MapView({ container: "map_canvas", map: map, center: [-83.22511,42.24697], zoom: 10, //Exclude the zoom widget from the UI ui: { components: ["attribution"] } }); //Add scale bar to the bottom right corner of the view var scaleBar = new ScaleBar({ view: myView }); myView.ui.add(scaleBar, { position: "bottom-trailing" }); //Constrain the max and min zoom levels myView.constraints = { minZoom: 10, maxZoom: 19 }; //Add and remove parks according to features $(".featureCheck").checkbox(); $(document).on("click", ".featureCheck", function(){ var trgt = $(this).attr("data-rel"); //This 'if' statement will execute the query and get the query results if(trgt == "bball"){ if ($(this).is(".checked")){ console.log("checked"); map.remove(wayneCoParks); qTask.execute(params).then(getResults); } else{ console.log("unchecked"); } } }); //Called once promise is resolved function getResults(response){ console.log("in getResults"); console.log(response); var parkResults = response.features.map(function(feature){ //feature.symbol = parkSymbol feature.symbol = { type: "simple-fill", color: [51,51, 204, 0.9], style: "solid", outline: { color: "white", width: 1 } }; feature.popupTemplate = resultsPopupTemplate; return feature; }); //Add results to the map resultsLayer.add(parkResults); }; }); </script> <script> //Configure popup for Park Features $(document).ready(function(){ $(".menu .browse").popup({ inline: true, hoverable: true, position: "bottom left", delay: { show: 300, hide: 500 } }); }); </script> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more

I'm attempting to develop a function that will take a screenshot when an icon is clicked. I've found similar posts on GeoNet: https://community.esri.com/thread/211365-how-to-take-screenshot-in-javascript-for-arcgis-basemap-with-layers. However, when following these instructions, I'm unable to successfully get a screen capture. My goal is to have a user click on a print icon within the application that I'm developing and then have the map "canvas" download as a PDF. I'm using ArcGIS API for JS 4.11. Below is my relevant code.... First, I add the necessary modules: require([ "esri/Map", "esri/views/MapView", "esri/Basemap", "esri/layers/VectorTileLayer", "esri/widgets/ScaleBar", "esri/geometry/Point", "esri/geometry/Extent", "esri/core/watchUtils", "esri/layers/MapImageLayer", "esri/tasks/PrintTask", "esri/tasks/support/PrintParameters", "esri/tasks/support/PrintTemplate", "esri/core/lang" ], function(Map, MapView, Basemap, VectorTileLayer, ScaleBar, Point, Extent, watchUtils, MapImageLayer, PrintTask, PrintParameters, PrintTemplate, lang) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ Then, I create the function where the user clicks on the print icon, which should then create the screenshot. Much of this is taken from the above article I referenced. $(window).ready(function() { $(".print_icon").click(function(){ var printTask = new PrintTask("https://devarcgisent.waynecounty.lan/serverdev/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"); var template = new PrintTemplate(); template.exportOptions = { width: 1500, height: 700, dpi: 200 }; template.format = "jpg"; template.layout = "MAP_ONLY"; template.preserveScale = false; template.showAttribution = false; var params = new PrintParameters(); params.map = this.map; params.template = template; printTask.execute(params, printResult); function printResult(rsltURL){ var mapImg = domConstruct.toDom('<img src="'+rsltURL.url+'" border="0" style="width:1500px;height:700px;"/>'); domConstruct.place(mapImg, dom.byId("map_canvas"), "replace"); } }); });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ When I click on the print icon, I don't receive an error, but a screenshot is also not taken. I'm likely missing something in the code that I've written. Any help would be welcomed. ... View more