Latest Contributions by IanPeebles

Evelyn, Are you wanting a tool where you can zoom to a specific scale on the map?    It would be nice is this was a widget.  We built a tool where you can enter in the scale (in feet) and it will zoom to that scale on the map.  The current zoom scale in feet will update as well on the map when you perform a zoom in or out.  It looks something like this:   When zooming again:   Then when zooming out:     Now the entire Zoom to Scale tool:     You can then type in the scale:   The map will zoom to that scale: Here is the code block used:   Javascript // Map - Define Scale mapView.scale = 96000; console.log("The initial map scale is 1:" + mapView.scale); var scaleInFeet = mapView.scale/12 // Watch for the Scale on the Extent Change mapView.watch('extent', function(){ var convertMapScale = mapView.scale/12; var roundScale = Math.round(convertMapScale); returnZoomScaleResult = document.getElementById("zoomToScaleResults"); returnZoomScaleResult.innerHTML = roundScale + " feet"; }); // Connect Zoom to Scale Button to Function on(dom.byId("zoomToScaleBtn"), "click", zoomToScale); // Zoom to Map Scale Function function zoomToScale() { // If no value is added in if (document.getElementById("zoomToScaleValue").value=="") { // Alert when Scale Value is left Blank enterScaleDialog = new Dialog({ title: "Zoom to Scale", content: "You must enter a zoom to scale value then hit enter or use the magnifying glass. Example: 1000, 2000, or 5000. All units are in feet.", style: "width: 300px; height: 150px;" }); enterScaleDialog.show(); } else { var zoom = document.getElementById("zoomToScaleValue").value*12; mapView.scale = zoom; var mapScaleInFeet = zoom/12; } console.log("ZOOM TO SCALE: The zoom level is 1:" + zoom + "."); console.log("ZOOM TO SCALE: The zoom scale in feet is 1 inch = " + mapScaleInFeet + " feet.") } HTML Zoom to Scale Input Box and Button Map Toolbar DIV (HTML) <div id="mapViewToolHeaderDIV"> <!-- Zoom to Scale Tool Title --> <div id="zoomToScaleToolTitle"><center>Zoom to Scale</center></div> <!-- Zoom to Scale Tool DIV --> <div id="zoomToScaleDIV"> <!-- Zoom to Scale Tool - Text Input --> <input type="search" id="zoomToScaleValue" placeholder=" Zoom to Scale: 1 inch = Feet" onkeypress="if (event.keyCode == 13) document.getElementById('zoomToScaleBtn').click()"/> <!-- Zoom to Scale Tool - Button (to Execute)--> <div id="zoomToScaleBtn"> <div id="zoomToScaleBtnText"><center>Go</center></div> </div> </div>   Zoom to Scale Results on Map (HTML) <div id="zoomToScaleFrame"> <!-- Zoom to Scale Map Scale Title --> <div id="zoomToScaleTitle">1 inch =</div> <!-- Zoom to Scale Value --> <div id="zoomToScaleResults"></div> </div>   CSS #zoomToScaleFrame{ z-index: 2; position: absolute; width: 150px; left: 10px; bottom: 32px; height: 17px; border: 1px solid none; font-size: 10pt; background-color: white; } #zoomToScaleTitle{ z-index: 2; margin-left: 1px; margin-top: 1px; height: 11px; width: 43px; font-family: arial; font-size: 8pt; color: black; } #zoomToScaleResults{ margin-left: 44px; margin-top: -11px; width: 70px; height: 11px; font-family: arial; font-size: 8pt; color: black; } /* Zoom to Scale - Tool Title */ #zoomToScaleToolTitle{ z-index: 2; position: absolute; top: 0px; line-height: 1; left: 8px; height: 10px; font-size: 10pt; font-weight: bold; color: white; width: 235px; /* Make Text Unselectable */ -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } #zoomToScaleDIV{ position: absolute; padding: 0; margin: 0; right: 0px; bottom: 1px; left: 8px; height: 35px; width: 235px; } /* Zoom to Scale Tool - Text Input */ #zoomToScaleValue{ position: absolute; padding: 0; margin: 0; right: 0px; top: 1px; left: 2px; height: 30px; width: 180px; } /* Zoom to Scale Tool - Button (to Execute) */ #zoomToScaleBtn{ position: absolute; padding: 0; margin: 0; right: 0px; top: 1px; left: 190px; height: 30px; width: 30px; border-radius: 4px; background-color: #EEEEEE; /* Make Text Unselectable */ -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } /* Zoom to Scale Tool - Button Text */ #zoomToScaleBtnText{ position: absolute; padding: 0; margin: 0; right: 2px; top: 5px; left: 2px; bottom: 2px; font-size: 11pt; font-weight: bold; }   This tool has worked really well for us.  May give you some ideas. Ian Peebles, GISP GIS Analyst II Application Support Team – Information Technology 1273 N Broadway, Edmond, OK 73034 (405) 359-4561 ... View more

Here is what I came up with to set the map scale when using the choice list: Choice List from Application:   JavaScript Code:   HTML Code:   When choosing the option, then the mouse is up, the zoom to scale will execute. The map changes zoom. I added console statements to track the changing map scale.  Here are examples of those that returned in the console.log: For 1000 Scale:   For 2500 Scale: Will something like that work?  I don't think the map scale will change on the print layout.  We use a zoom tool where you type in the scale and then a zoom occurs on the map.  When we go to print the layout, the map scale is preserved.     ... View more

What coordinate system are you using? ... View more

Hello, we have created a zoom to scale tool within our organization, but we allow for an input box where you can type in the scale, then zoom to it on the map.  perhaps you can use similar logic or get an idea from this code snippet I will provide? A Preview of the Zoom the Scale Tool within an Application:   The CODE in JS and HTML: // *********************************************************************** // * Zoom to Scale - START * // *********************************************************************** // Execute Zoom to Scale when Button is Clicked on(dom.byId("zoomToScaleBtn"), "click", zoomToScale); // Zoom to Scale Function function zoomToScale () { if (dom.byId("zoomToScaleValue").value == "") { alert("You must enter in a scale value"); } else { // Return Scale Value - Calculation (/12) based on Feet not Meters var scaleValue = (dom.byId("zoomToScaleValue").value)*12; map.setScale(scaleValue); var scaleValueFeet = (scaleValue/12); console.log("The map scale is 1:" + scaleValue); console.log("Map Scale in Feet 1 inch = " + scaleValueFeet + " feet"); } } // Return Map Scale Results to Application - Calculation (/12) based on Feet NOT Meters map.on("zoom-end", function() { var returnZoomResult = document.getElementById("zoomToScaleResults"); var scale = map.getScale()/12; var roundScale = Math.round(scale); returnZoomResult.innerHTML = roundScale + " feet"; }); // *********************************************************************** // * Zoom to Scale - END * // ***********************************************************************   <!-- ************************************ --> <!-- * ZOOM TO SCALE                           * --> <!-- ************************************ --> <div id="zoomToScaleTextBoxFrame"> <input type="search" id="zoomToScaleValue" placeholder="Zoom to Scale (Feet)" onkeypress="if (event.keyCode == 13) document.getElementById('zoomToScaleBtn').click()" /> <button id="zoomToScaleBtn" title="Zoom to Scale"></button> </div>   Print layout scale:   I am wondering if you can choose the scale within the map first, then run the print task?  Or are you wanting to choose the scale when you are initiating the print task? ... View more

Funny I came across this thread because I was looking to change the order of the popups.  To my disappointment, I learned it cannot be done.  I agree that it would be extremely nice to be able to re-order the popups within a javaScript application. ESRI...can you please consider this functionality?  We need more controls on what we can and can not do with popups.  Also, allow for easily changing the pixel tolerance on when a user clicks to identify a popup in the mobile environment.  Now you have to tap...tap..tap..until you get lucky enough to activate the popup when clicking on a point. ... View more

Robert, thank you for the response.   Oh... I see.  I was checking out the  popup wrapper to check, but now that makes sense.  I may stick with what I have for the time being.  I have used CSS to modify field positions and etc. ... View more

I actually figured out a solution.  I used the following .css within the index.htm file: .esri-view-width-xlarge .esri-popup__main-container, .esri-view-width-large .esri-popup__main-container, .esri-view-width-medium .esri-popup__main-container {   max-height: 400px !important;   max-width: 300px !important; } I had to do this since I was referencing the following .css: <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css"> I was trying to reference the code block above within my own layout.css...but could not overwrite the code specified in the link above. The result is this: ... View more

Hello Robert.  I was looking at that widget yesterday and it is really nice, but takes up a little too much real-estate.  I really like what I came up with for the app.  I do want to get this to work, just so I know it can be done. With that said, I may end up looking at it again and add it as a tool with the measurement widget...perhaps up here (see red box)? ... View more