Deploy Code to Web App Builder Dev Edition

[AdamMoszynski]

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!

[RobertScheitlin__GISP]

Shaun,

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

[AdamMoszynski]

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!

[RobertScheitlin__GISP]

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).

[AdamMoszynski]

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

[RobertScheitlin__GISP · Accepted solution]

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"
        });
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AdamMoszynski]

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?

[RobertScheitlin__GISP]

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.

[AdamMoszynski]

Everything works perfectly . Thanks Robert!

[joerodmey]

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?