Latest Contributions by RebeccaWatson1

Include basemaps in the swipe tool - the most useful functionality of the swipe tool in the Flex web app was to be able to compare two satellite/drone images from your basemap switcher - this no longer seems possible. ... View more

Allow custom sort of categories on a pie chart. For example, you have categories 'Not Started', 'In Progress', 'Complete', 'Review' - at the moment you can sort by label alphabetically (which starts with 'Complete') or by value, but the order we want them to appear in is a logical order. ... View more

A general question. I am starting a new web application using JavaScript API. I can't use portal or AGOL hosted web map in the final live web application. Which is the best course of action to follow? 1. Build the bones of the application using web appbuilder developer, download it and remove the web map used to create it, or 2. Build the application from scratch Option 1 is more attractive to me as I am not a seasoned web developer and it would be nice to avoid web design as much as possible, but once this is created, is it too much of a fiddle to extricate the web map? Are there any better options? Using Server 10.5.1 and WAB 2.6 and JS API 3.23 ... View more

I am attempting my first custom widget - a fairly simple coordinate tool - using the new javscript/html/css. I started with the custom GoToXY tool and was playing around adding a bit a functionality and styling it up but I have an issue with buttons. I have tried to override the default button style by adding in baseClass:myButton and creating my own style in the style.css but I'm getting the changes I've asked for (the red line border around the Copy EN button in the image below) and I'm also getting a grey outline around the Copy EN button label too and I cannot seem to find where it is coming from. I've search for an answer and I'm thinking it is because the style is being overriding by something but I've used the developer tools on IE to try and find what it and still cannot find where the outline is from - can anyone enlighten me? Here is the full code for the custom widget... HTML < div >       < div >       < div class = " identify-tab-node " data-dojo-attach-point = " tabNode3 " >            < div class = " outerBox " >                       < div class = " leader " > Enter coordinates: </ div >                       < div class = " wrapper " >                     E: < input                                     class = " xyinput "                                     id = " ProjXBox "                                     data-dojo-type = " dijit/form/TextBox "                                     placeHolder = " 203331.090 "                                     data-dojo-attach-point = " ProjXBox "                                     data-dojo-props = " intermediateChanges:true, placeHolder: ' -80.7352016 ' " >                           </ input >                     N: < input                                class = " xyinput "                                id = " ProjYBox "                                data-dojo-type = " dijit/form/TextBox "                                placeHolder = " 546315.655 "                                data-dojo-attach-point = " ProjYBox "                                data-dojo-props = " intermediateChanges:true, placeHolder: ' -80.7352016 ' " >                           </ input >                      </ div >                      < div id = " GoTo_btn " data-dojo-attach-point = " createPointIdNode " > </ div >                      < div id = " GoTo_btn1 " data-dojo-attach-point = " removePointIdNode " > </ div >                 </ div >            </ div >       </ div > < br >       < div class = " outerBox " >            < div class = " leader " > Get coordinates: </ div >            < div class = " wrapper " >      E: < div class = " xyresult " id = " CurrentX " > Click Map </ div >      N: < div class = " xyresult " id = " CurrentY " > Click Map </ div >        </ div >            < div data-dojo-attach-point = " copyToClipboardNode " > </ div >       </ div > ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ CSS .jimu-widget-panel .jimu-foldable-dijit .jimu-foldable-panel {   position : relative ;   width : 360px ;   height : 150px ;   min-width : 150px ;   min-height : 150px ; } .jimu-widget-GoToXY {   position : relative ;   width : 100% ;   height : 20% ;   min-width : 150px ;   min-height : 150px ; } .jimu-widget-GoToXY:hover { } path[data-uniquevalue="GoToXY"] {   fill : none ;   stroke : #009900 ;   stroke-width : 3 ;   stroke-opacity : 0.85 ;   stroke-linecap : round ;   stroke-linejoin : round ;   -webkit-animation-duration : 0.5s ;   -webkit-animation-iteration-count : 1 ;   -webkit-animation-name : pulse2 ;   -moz-animation-duration : 0.5s ;   -moz-animation-iteration-count : 1 ;   -moz-animation-name : pulse2 ; } @-webkit-keyframes pulse2 {       0% {        opacity : 0.55 ;        stroke-width : 25k ;        stroke : #339966 ;       }       45% {        opacity : 0.7 ;        stroke-width : 15 ;        stroke : #00cc66 ;       }       100% {        opacity : 0.8 ;        stroke-width : 2 ;        stroke : #009933 ;       }       }       @-moz-keyframes pulse2 {       0% {        opacity : 0.55 ;        stroke-width : 25 ;        stroke : #339966 ;       }       45% {        opacity : 0.7 ;        stroke-width : 15 ;        stroke : #00cc66 ;       }       100% {        opacity : 0.85 ;        stroke-width : 2 ;        stroke : #009933 ;       } } #GoTo_btn {   display : inline-block ; } #GoTo_btn1 {   display : inline-block ; } .leader {   text-align : left ;   font-size : 18 ;   font-weight : bold ;   padding : inherit ; } .outerBox {   border : 1px solid #d0d0e2 ;   border-radius : 5px ;   background-color : #efeff5 ;   padding : 5px 10px ;   text-align : right ; } .wrapper {   text-align : center ;   padding : 5px 10px ; } .xyinput {   margin : auto ;   width : 37% ;   display : inline-block ;   border : 1px solid black ;   border-radius : 5px ;   padding : 2px 15px ;   background-color : #ffffff ;   color : #888 ; } /*.xyinput:focus{   color: #888; }*/ .xyresult {   margin : auto ;   width : 37% ;   display : inline-block ;   border : 1px solid black ;   border-radius : 5px ;   padding : 2px 15px ;   background-color : #ffffff ;   color : #888 ; } .myButton { border-radius : 6px ; border : 1px solid red ; cursor : pointer ; color : #777777 ; font-family : Arial ; font-size : 13px ; font-weight : bold ; padding : 5px 23px ; text-decoration : none ; text-shadow : 0px 1px 0px #ffffff ; } ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍  and the javascript define ( [   'dojo/_base/declare' ,   'jimu/BaseWidget' ,   'jimu/utils' ,   'dijit/form/Button' ,   'esri/symbols/SimpleMarkerSymbol' ,   'esri/geometry/Point' ,   'esri/graphic' ,   'esri/layers/GraphicsLayer' ,   'esri/Color' ,   'dojo/on' ,   'dojo/_base/lang' ,   'dojo/query' ,   'esri/map' ,   "esri/geometry/webMercatorUtils" ,   "dojo/dom"   ] , function (   declare ,   BaseWidget ,   utils ,   Button ,   SimpleMarkerSymbol ,   Point ,   Graphic ,   GraphicsLayer ,   Color ,   on ,   lang ,   query ,   Map ,   webMercatorUtils ,   dom   ) {   return declare ( [ BaseWidget ] ,   {     name : 'GoToXY' , baseClass : 'jimu-widget-GoToXY' ,   postCreate : function ( )   {     console . log ( "postCreate!" ) ;         var mapFrame = this ;     this . inherited ( arguments ) ;     this . addPointsButton = new Button ( { label : "Go to" } ) . placeAt ( this . createPointIdNode ) ;         this . clearPointsButton = new Button ( { label : "Clear" } ) . placeAt ( this . removePointIdNode ) ;     this . copyToClipboardButton = new Button ( { label : "Copy EN" , baseClass : "myButton" } ) . placeAt ( this . copyToClipboardNode ) ;     this . addPointsButton . startup ( ) ;   } ,   startup : function ( )   {     console . log ( "startup!" ) ;     this . layer = new GraphicsLayer ( { dataAttributes : [ "id" ] } ) ;         if ( this . layer . surfaceType === "svg" )         {           on ( this . layer , "graphic-draw" , function ( evt )           {               console . log ( "graphic-draw" ) ;               var renderercategory ;               renderercategory = "GoToXY" ;               evt . node . setAttribute ( "data-uniquevalue" , renderercategory ) ;           } ) ;         }     this . map . addLayer ( this . layer ) ;     on ( this . addPointsButton , "click" , lang . hitch ( this , "createPoint" ) ) ;         on ( this . clearPointsButton , "click" , lang . hitch ( this , "clearPoint" ) ) ;     on ( this . copyToClipboardButton , "click" , lang . hitch ( this , "copyXY" ) ) ;     on ( this . map , "click" , lang . hitch ( this , "getXY" ) ) ;     console . log ( "this.map: " , this . map ) ;   } ,   getXY : function ( evt )   {     var mp = evt . mapPoint ;     dom . byId ( "CurrentX" ) . innerHTML = mp . x . toFixed ( 3 ) ;     dom . byId ( "CurrentY" ) . innerHTML = mp . y . toFixed ( 3 ) ;   } ,   copyXY : function ( )   {     // var curX = dom.byID("CurrentX").value;     var curX = dom . byId ( "CurrentX" ) . innerHTML ;     var curY = dom . byId ( "CurrentY" ) . innerHTML ;     // query(".xyresult").style("background-color", "#e6b3cc");     query ( ".xyresult" ) . style ( "border" , "2px solid #ff4d4d" ) ;     setTimeout ( function ( )     {       //query(".xyresult").style("background-color", "#d1d1e0");       query ( ".xyresult" ) . style ( "border" , "1px solid black" ) ;     } , 300 ) ;     //curX.style.background = 'red';     var xy = curX + ", " + curY ;     // var aux = document.createElement("input");     var aux = dojo . create ( "input" ) ;     aux . setAttribute ( "value" , xy ) ;     // document.body.appendChild(aux);     dojo . doc . body . appendChild ( aux ) ;     aux . select ( ) ;     document . execCommand ( "copy" ) ;     document . body . removeChild ( aux ) ;   } ,   createPoint : function ( )   {         var xx = Number ( dom . byId ( "ProjXBox" ) . value ) ;         var yy = Number ( dom . byId ( "ProjYBox" ) . value ) ;     console . log ( "createPoint!" ) ;         var ZoomIt = Number ( 3 ) ;     var sympath = "M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16.125c-3.383 0-6.125-2.742-6.125-6.125s2.742-6.125 6.125-6.125 6.125 2.742 6.125 6.125-2.742 6.125-6.125 6.125zM12.125 10c0-2.14 1.735-3.875 3.875-3.875s3.875 1.735 3.875 3.875c0 2.14-1.735 3.875-3.875 3.875s-3.875-1.735-3.875-3.875z" ;     var symcolor = "#ff0000" ;     var sym = new SimpleMarkerSymbol ( ) ;     sym . setPath ( sympath ) ;     sym . setColor ( new Color ( symcolor ) ) ;     sym . setOutline ( null ) ;     sym . setSize ( "30" ) ;     var randx = document . getElementById ( "ProjXBox" ) . value ;     var randy = document . getElementById ( "ProjYBox" ) . value ;     var attr = { "id" : "rand" } ;     var zoomPoint = new esri . geometry . Point ( Number ( randx ) , Number ( randy ) , this . map . spatialReference ) ;         this . map . centerAndZoom ( zoomPoint , 10 ) ;     var pt = new Point ( randx , randy , this . map . spatialReference ) ;        pntd = new Graphic ( pt , sym , attr ) ;         this . layer . add ( pntd ) ;   } ,        clearPoint : function ( )     {       this . layer . clear ( ) ;         }   } ) ; } ) ; ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ Many thanks for any pointers in advance. ... View more