Latest Contributions by SteveCole

As I keep working on migrating my 3.X app to 4.X, I keep hitting issues. Now, it's print output. The same basic code block, adjusted for 4.X differences, produces a vastly different output. The final part of a custom report generating tool is to produce a JPEG map and insert it into a HTML report output. The output from 3.X produces this: The 4.X API output results in this: It's almost as if there's a "reference scale" setting that I haven't adjusted but, from looking over the API reference, I can't see any. Is there one? There really isn't much to the code side of things so I'm kinda flummoxed but this. FWIW, the relevant 3.X code: tractsShown = theTractLayer.visible; bgsShown = theBlockgroupLayer.visible; //Switch the labelling class for Tracts/Block Groups temporarily for proper print sizes theTractLayer.setLabelingInfo([ app.tractPrintClass ]); theBlockgroupLayer.setLabelingInfo([ app.bgPrintClass ]); if (!tractsShown) { theTractLayer.setVisibility(true); } if (!bgsShown) { theBlockgroupLayer.setVisibility(true); } if (highlightGeom != null) { highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,255,0.1]), 4),new Color([255,255,0,0.1])); highlightGraphic = new Graphic(highlightGeom, highlightSymbol,null,null); app.map.graphics.add(highlightGraphic); } pTemplate = new PrintTemplate(); pTemplate.exportOptions = { width: 600, height: 400, dpi: 150 }; pTemplate.format = "jpg"; pTemplate.layout = "MAP_ONLY"; pTemplate.preserveScale = false; pTemplate.showAttribution = false; var params = new PrintParameters(); params.map = app.map; params.async = false; params.template = pTemplate; jpgMapDiv = theDocument.getElementById("jpegMap"); thePrintTask = new PrintTask(url); window.setTimeout(function() { thePrintTask.execute(params, function(result) { jpgMapDiv.innerHTML = "<img src=\"" + result.url + "\" style=\"border:2px solid black;left:25%\"\>"; var oldExtent = app.preRptExtent; app.map.setExtent(curExtent); //Restore the screen-centric label sizes for Tracts/Block Groups theTractLayer.setLabelingInfo([ app.tractScreenClass ]); theBlockgroupLayer.setLabelingInfo([ app.bgScreenClass ]); if (highlightGeom != null) { app.map.graphics.remove(highlightGraphic); highlightGraphic = null; highlightGeometry = null; } }, function(err) { //Print task failed app.map.graphics.remove(highlightGraphic); theTractLayer.setLabelingInfo([ app.tractScreenClass ]); theBlockgroupLayer.setLabelingInfo([ app.bgScreenClass ]); highlightGraphic = null; highlightGeometry = null; }); //Reset the current viewing status of the census tract / blockgroup layers if (!tractsShown) { theTractLayer.setVisibility(false); } if (!bgsShown) { theBlockgroupLayer.setVisibility(false); } },1000);   And the rewritten 4.X- var theTractLayer = app.map.findLayerById("censusTracts"); var tractsShown = theTractLayer.visible; var theBlockgroupLayer = app.map.findLayerById("censusBlockGroups"); var bgsShown = theBlockgroupLayer.visible; //Switch the labelling class for Tracts/Block Groups temporarily for proper print sizes theTractLayer.labelingInfo = [ app.tractPrintClass ]; theBlockgroupLayer.labelingInfo = [ app.bgPrintClass ]; if (!tractsShown) { theTractLayer.visible = true; } if (!bgsShown) { theBlockgroupLayer.visible = true; } if (app.highlightGeom != null) { var highlightSymbol = new SimpleFillSymbol({ color: new Color([255,255,0,1]), outline: new SimpleLineSymbol({ cap: "round", color: new Color([255,255,0,1]), join: "round", miterLimit: 1, style: "solid", width: 2 }), style: "forward-diagonal" }); var highlightGraphic = new Graphic({geometry: app.highlightGeom, symbol: highlightSymbol}); app.theView.graphics.add(highlightGraphic); } var pTemplate = new PrintTemplate(); pTemplate.exportOptions = { width: 600, height: 400, dpi: 300 }; pTemplate.format = "jpg"; pTemplate.layout = "map-only"; pTemplate.scalePreserved = false; pTemplate.attributionVisible = false; var params = new PrintParameters(); params.view = app.theView; params.template = pTemplate; var jpgMapDiv = theDocument.getElementById("jpegMap"); var oldExtent = app.preRptExtent; //app.theView.goTo(app.curExtent); print.execute(app.printUrl, params).then(function(printResult) { jpgMapDiv.innerHTML = "<img src=\"" + printResult.url + "\" style=\"border:2px solid black;left:25%\"\>"; //Restore the screen-centric label sizes for Tracts/Block Groups theTractLayer.labelingInfo = [ app.tractScreenClass ]; theBlockgroupLayer.labelingInfo = [ app.bgScreenClass ]; if (app.highlightGeom != null) { app.theView.graphics.remove(highlightGraphic); highlightGraphic = null; app.highlightGeom = null; app.theView.goTo(oldExtent); } }).catch(function(printError) { //Print task failed app.theView.graphics.remove(highlightGraphic); theTractLayer.labelingInfo = [ app.tractScreenClass ]; theBlockgroupLayer.labelingInfo = [ app.bgScreenClass ]; highlightGraphic = null; app.highlightGeom = null; app.theView.goTo(oldExtent); }); ... View more

I have some code that works, but not in the way I am intending. I'm using the Sketch widget with a GraphicsLayer and I'm also using the Calcite Color Picker to provide the option to change the color of the sketched graphics. In 3.X, when the dojo color picker would change, I was able to change the color of any new sketched graphics *and* the color of any existing graphics in the graphicsLayer. What I'm experiencing in 4.X is different, when the color is changed in the Calcite color picker, the change event is triggered and the code runs to change the color of the Sketch View Model graphics *and* loop through any graphics in the GraphicsLayer to change the color of those graphics. But visually there is no change. Only when the user draws another graphic will the new graphic and any previous graphic change its color. I want any existing graphic to change its color visually as soon as a color has been selected. Here's a Codepen to try. Draw a polygon. Unselect the graphic. Change the color in the color picker. The existing graphic will not change until you draw a second graphic. What am I missing? ... View more

In 3.X, this was quite simple as there was the infoWindow.Resize() method but there seemingly is not an equivalent option in 4.X? The closest thing I found was this thread where someone was using CSS to resize the popup. Unfortunately, this hasn't been working for me and I need to adjust the popup's dimensions a number of times, depending on the layer that was clicked. In my attempt, I'm using reactiveUtil to watch for features being added to the popup: reactiveUtils.watch(()=>theView.popup.features, (event)=>{ // If the zoom-out action is clicked, fire the zoomOut() function //Attempt to resize the popup based on the layer if (event.length > 0) { var theLayerName = theView.popup.features[0].layer.id; switch(theLayerName) { case "tipLine": break; case "tipPoint": break; case "swmCip": break; case "schools": break; case "parcels": break; case "raceTracts": app.plmf.resizePopupWindow(925,500); break; case "raceBlockGroups": break; case "povertyTracts": break; case "povertyBlockGroups": break; case "lepTracts": break; case "lepBlockGroups": break; case "ageSexTracts": break; case "ageSexBlockGroups": break; case "disabilityTracts": break; case "disabilityBlockGroups": break; case "originTracts": break; default: } } });   And then the function that is called to attempt to resize the popup is as follows: resizePopupWindow(theWidth,theHeight) { var theCssWidth = theWidth + 'px !important'; var theCssHeight = theHeight + 'px !important'; var cols = document.querySelectorAll('.esri-view-width-xlarge .esri-popup__main-container, .esri-view-width-large .esri-popup__main-container, .esri-view-width-medium .esri-popup__main-container'); if (cols.length > 0) { for(var i = 0; i < cols.length; i++) { cols[i].style.height = theCssHeight; cols[i].style.width = theCssWidth; } } } ... View more

I've spent far too much time today trying to figure this out. In the 4.X API, how do you unselect a selected graphic? My specific issue is with a popup on a graphicsLayer where the graphic is not unselected when the popup is closed. FWIW, this would be my relevant code: // Search for graphics at the clicked location theView.hitTest(screenPoint,{include:theGLayer}).then(function (response) { if (response.results.length) { var theContent = app.plmf.graphicsLayerContent(response.results[0].graphic); var theTitle = "User Defined Project"; theView.openPopup({title:theTitle, content:theContent, location: event.mapPoint}); //} } }); }); //Unselect the interactive project when the popup is closed reactiveUtils.watch( // getValue function () => theView.popup.visible, // callback (visible) => { if (visible == true) { //Do Nothing } else { console.log('The popup is closed'); theView.popup.clear(); } });       ... View more