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!
Solved! Go to 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"
});
},
Shaun,
Really depends on the code and what you are trying to do. Need a little more info here.
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!
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).
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
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"
});
},
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?
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.
Everything works perfectly . Thanks Robert!
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?