topic Re: Deploy Code to Web App Builder Dev Edition in ArcGIS JavaScript Maps SDK Questions

Deploy Code to Web App Builder Dev Edition

TD1 — Tue, 10 Jul 2018 17:55:30 GMT

I have some code that I want to deploy into my app created through web app builder developer edition. Where do I include my java script code to make this run correctly? I am new to web dev.

Thanks!

Re: Deploy Code to Web App Builder Dev Edition

RobertScheitlin__GISP — Tue, 10 Jul 2018 20:15:13 GMT

Shaun,

Really depends on the code and what you are trying to do. Need a little more info here.

Re: Deploy Code to Web App Builder Dev Edition

TD1 — Tue, 10 Jul 2018 21:20:47 GMT

Hi Robert,

Actually I'm trying to implement your code found here: Mouse click to get Map Point (or X/Y)

My goal is to include this code into an existing web app I built using web app builder dev edition but am unsure of where to include this code in the local folder structure. I have played around with modifying the index.html found in my app builder folder strucutre as follows: arcgis-web-appbuilder-2.8\WebAppBuilderForArcGIS\server\apps\11 with no luck.

Any direction is greatly appreciated.

Thanks!

Re: Deploy Code to Web App Builder Dev Edition

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:00:57 GMT

Shaun,

The best place for this would be in the jimu/MapManager.js at the end of the _publishMapEvents function

        require(['esri/graphic'], lang.hitch(this, function(Graphic){
          map.on("click", function(evt){
            map.graphics.clear();
            map.graphics.add(new Graphic(evt.mapPoint, symbol));
            map.infoWindow.setContent("X: " + evt.mapPoint.x.toString() + ", <br>Y: " + evt.mapPoint.y.toString());
            map.infoWindow.show(evt.mapPoint)
          });‍‍‍‍‍‍
        }));‍‍‍‍‍‍‍‍

But the issue would be that this would always happen when the map is clicked and there would be no way to turn it off (not really ideal).

Re: Deploy Code to Web App Builder Dev Edition

TD1 — Wed, 11 Jul 2018 14:51:39 GMT

Thanks for the info.

Still causing me trouble. Just a few questions:

Does this go into the client or server folder?

Where exactly in the code does this go and how to handle brackets/semi colons:

_publishMapEvent: function(map) {
//add this property for debug purpose
window._viewerMap = map;

MapUrlParamsHandler.postProcessUrlParams(this.urlParams, map);

        console.timeEnd('Load Map');
        if (this.map) {
          this.map = map;
          this.resetInfoWindow(true);
          console.log('map changed.');
          topic.publish('mapChanged', this.map, this.layerInfosObj);
        } else {
          this.map = map;
          this.resetInfoWindow(true);
          topic.publish('mapLoaded', this.map, this.layerInfosObj);
        }
      },

      _getWebsceneData: function(itemId) {
        return esriRequest({
          url: 'http://184.169.133.166/sharing/rest/content/items/' + itemId + '/data',
          handleAs: "json"


        });
      },

Thank you in advance

Re: Deploy Code to Web App Builder Dev Edition

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:01:00 GMT

Shaun,

So this is exactly what it would look like then. It would go in the server folder.

      _publishMapEvent: function(map) {
        //add this property for debug purpose
        window._viewerMap = map;

        MapUrlParamsHandler.postProcessUrlParams(this.urlParams, map);

        console.timeEnd('Load Map');
        if (this.map) {
          this.map = map;
          this.resetInfoWindow(true);
          console.log('map changed.');
          topic.publish('mapChanged', this.map, this.layerInfosObj);
        } else {
          this.map = map;
          this.resetInfoWindow(true);
          topic.publish('mapLoaded', this.map, this.layerInfosObj);
        }
        require([
          'esri/graphic',
          'esri/symbols/SimpleMarkerSymbol',
          'esri/symbols/SimpleLineSymbol',
          'esri/Color'
        ], lang.hitch(this, function(Graphic, SimpleMarkerSymbol, SimpleLineSymbol, Color){
          var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE,
          12,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_NULL,
            new Color([247, 34, 101, 0.9]),
            1
          ),
          new Color([207, 34, 171, 0.5])
        );
          map.on("click", function(evt){
            map.graphics.clear();
            map.graphics.add(new Graphic(evt.mapPoint, symbol));
            map.infoWindow.setContent("X: " + evt.mapPoint.x.toString() + ", <br>Y: " + evt.mapPoint.y.toString());
            map.infoWindow.show(evt.mapPoint)
          });
        }));
      },

      _getWebsceneData: function(itemId) {
        return esriRequest({
          url: 'http://184.169.133.166/sharing/rest/content/items/' + itemId + '/data',
          handleAs: "json"
        });
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Deploy Code to Web App Builder Dev Edition

TD1 — Wed, 11 Jul 2018 16:04:22 GMT

It worked!

Now I'm trying to pass these coordinates into Survey123 via a custom URL (which is working perfectly). How would I convert these into decimal degrees to allow Survey123 to understand them?

Re: Deploy Code to Web App Builder Dev Edition

RobertScheitlin__GISP — Wed, 11 Jul 2018 16:11:47 GMT

Use the getLatitude and getLogitude methods of the pint class.

map.infoWindow.setContent("X: " + evt.mapPoint.getLongitude().toString() + ", <br>Y: " + evt.mapPoint.getLatitude().toString());‍

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: Deploy Code to Web App Builder Dev Edition

TD1 — Wed, 11 Jul 2018 20:18:13 GMT

Everything works perfectly . Thanks Robert!

Re: Deploy Code to Web App Builder Dev Edition

joerodmey — Thu, 12 Jul 2018 13:25:01 GMT

I had the exact same question.

This functionality is something I would like to have in a widget so that the user has the control over seeing the coordinates. How would I go about doing that?

Re: Deploy Code to Web App Builder Dev Edition

RobertScheitlin__GISP — Thu, 12 Jul 2018 13:47:59 GMT

Joe,

Refer to this thread sample:

https://community.esri.com/thread/185220-mouse-click-to-get-map-point-or-xy

Re: Deploy Code to Web App Builder Dev Edition

joerodmey — Thu, 12 Jul 2018 14:03:40 GMT

Took a look but still unsure of how to implement as widget for WAB. Maybe I missed something?

Re: Deploy Code to Web App Builder Dev Edition

RobertScheitlin__GISP — Thu, 12 Jul 2018 14:19:22 GMT

Joe,

Not sure why you would need to. Have you not seen the coordinate widget that comes with WAB?

Coordinate widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Re: Deploy Code to Web App Builder Dev Edition

joerodmey — Thu, 12 Jul 2018 14:59:34 GMT

Robert,

Looking to incorporate the capture x/y location code as mentioned above only when a widget is selected, create a hyperlink and pass the info to survey123. I have all of this functionality except being a widget in WAB

Re: Deploy Code to Web App Builder Dev Edition

joerodmey — Tue, 17 Jul 2018 15:43:56 GMT

This code works except for one part...when other layers are added the popup box disappears but the purple dot sticks around when clicking on map.

Re: Deploy Code to Web App Builder Dev Edition

TD1 — Thu, 16 Aug 2018 16:50:12 GMT

Same thing happens for me. Curious to know if there is a solution

Re: Deploy Code to Web App Builder Dev Edition

RobertScheitlin__GISP — Thu, 16 Aug 2018 17:07:47 GMT

Just clear the maps graphics first then:

map.graphics.clear();‍

Re: Deploy Code to Web App Builder Dev Edition

TD1 — Fri, 17 Aug 2018 15:29:35 GMT

Popups still competing for screen space. I've had to disable all popups from my layers to allow this custom popup to display. Is there a workaround?

Re: Deploy Code to Web App Builder Dev Edition

joerodmey — Wed, 06 Feb 2019 17:40:22 GMT

How can this x/y on mouse click be housed within a widget? I would like the user to have control over when this function is on or off.

Thanks

Re: Deploy Code to Web App Builder Dev Edition

RobertScheitlin__GISP — Wed, 06 Feb 2019 17:48:39 GMT

Joe,

The coordinate widget already does this.