Capture User x/y Mouse Click Widget and URL Link

316
15
Jump to solution
02-08-2019 08:50 AM
joerodmey
MVP Regular Contributor

Hi all,

Right now in WAB I have code to allow the user to click on the map, capture the x/y location, initate a popup with a link (that has the x/y location passed in), and when the link is hit fires up Survey123 to enter data.

What I want to do next is allow the user to click a button to perform this rather than have this option on "all the time".

Any ideas or samples?

Thanks,

Joe

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Joe,

   So you start by getting the basic widgets template from the samples folder and adding your code to that (removing all the fluff that you will not need). I have done all that for you in the attached file. The widget is what you are after I think or it is almost complete.

View solution in original post

0 Kudos
15 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Joe,

  Please provide your full code you have right now and I will help you convert this to a widget.

0 Kudos
joerodmey
MVP Regular Contributor

Hi Robert,

I have included my MapManager.js

define([
'dojo/_base/declare',
'dojo/_base/lang',
'dojo/_base/array',
'dojo/_base/html',
'dojo/query',
'dojo/topic',
'dojo/on',
'dojo/aspect',
'dojo/keys',
'dojo/i18n',
'dojo/_base/config',
'esri/dijit/InfoWindow',
'esri/dijit/PopupMobile',
'esri/InfoTemplate',
'esri/request',
'esri/arcgis/utils',
'esri/geometry/Extent',
'esri/geometry/Point',
'require',
'./utils',
'jimu/LayerInfos/LayerInfos',
'jimu/dijit/Message',
'jimu/dijit/AppStatePopup',
'./MapUrlParamsHandler',
'./AppStateManager',
'./PopupManager',
'./FilterManager'
], function(declare, lang, array, html, query, topic, on, aspect, keys, i18n, dojoConfig, InfoWindow,
PopupMobile, InfoTemplate, esriRequest, arcgisUtils, Extent, Point, require, jimuUtils,
LayerInfos, Message, AppStatePopup, MapUrlParamsHandler, AppStateManager, PopupManager, FilterManager) {
var instance = null,
clazz = declare(null, {
appConfig: null,
mapDivId: '',
map: null,
previousInfoWindow: null,
mobileInfoWindow: null,
isMobileInfoWindow: false,

layerInfosObj: null,
SERVICE_ID: "_M",

constructor: function( /*Object*/ options, mapDivId) {
this.appConfig = options.appConfig;
this.urlParams = options.urlParams;
this.mapDivId = mapDivId;
this.id = mapDivId;
this.appStateManager = AppStateManager.getInstance(this.urlParams);
this.popupManager = PopupManager.getInstance(this);
this.filterManager = FilterManager.getInstance();
this.nls = window.jimuNls;
topic.subscribe("appConfigChanged", lang.hitch(this, this.onAppConfigChanged));
topic.subscribe("syncExtent", lang.hitch(this, this.onSyncExtent));
topic.subscribe("mapContentModified", lang.hitch(this, this.onMapContentModified));

on(window, 'resize', lang.hitch(this, this.onWindowResize));
on(window, 'beforeunload', lang.hitch(this, this.onBeforeUnload));
},

showMap: function() {
// console.timeEnd('before map');
this._showMap(this.appConfig);
},

_showMap: function(appConfig) {
// console.timeEnd('before map');
console.time('Load Map');
//for now, we can't create both 2d and 3d map
if (appConfig.map['3D']) {
if (appConfig.map.itemId) {
this._show3DWebScene(appConfig);
} else {
this._show3DLayersMap(appConfig);
}
} else {
if (appConfig.map.itemId) {
this._show2DWebMap(appConfig);
} else {
console.log('No webmap found. Please set map.itemId in config.json.');
}
}
},

onBeforeUnload: function() {
if(this.appConfig.keepAppState) {
this.appStateManager.saveWabAppState(this.map, this.layerInfosObj);
}
},

onWindowResize: function() {
if (this.map && this.map.resize) {
this.map.resize();
this.resetInfoWindow(false);
}
},

getMapInfoWindow: function(){
return {
mobile: this._mapMobileInfoWindow,
bigScreen: this._mapInfoWindow
};
},

resetInfoWindow: function(isNewMap) {
if(isNewMap){
this._mapInfoWindow = this.map.infoWindow;
if(this._mapMobileInfoWindow){
this._mapMobileInfoWindow.destroy();
// working around for bug of destroying _mapMobileInfoWindow is not completely.
query("div.esriMobileInfoView.esriMobilePopupInfoView").forEach(function(node){
html.destroy(node);
});
query("div.esriMobileNavigationBar").forEach(function(node){
html.destroy(node);
});
}
this._mapMobileInfoWindow =
new PopupMobile(null, html.create("div", null, null, this.map.root));
this.isMobileInfoWindow = false;
}
if (jimuUtils.inMobileSize() && !this.isMobileInfoWindow) {
this.map.infoWindow.hide();
this.map.setInfoWindow(this._mapMobileInfoWindow);
this.isMobileInfoWindow = true;
} else if (!jimuUtils.inMobileSize() && this.isMobileInfoWindow) {
this.map.infoWindow.hide();
this.map.setInfoWindow(this._mapInfoWindow);
this.isMobileInfoWindow = false;
}
},

onSyncExtent: function(map){
if(this.map){
var extJson = map.extent;
var ext = new Extent(extJson);
this.map.setExtent(ext);
}
},

_visitConfigMapLayers: function(appConfig, cb) {
array.forEach(appConfig.map.basemaps, function(layerConfig, i) {
layerConfig.isOperationalLayer = false;
cb(layerConfig, i);
}, this);

array.forEach(appConfig.map.operationallayers, function(layerConfig, i) {
layerConfig.isOperationalLayer = true;
cb(layerConfig, i);
}, this);
},

_show3DLayersMap: function(appConfig) {
require(['esri3d/Map'], lang.hitch(this, function(Map) {
var initCamera = appConfig.map.mapOptions.camera,
map;
map = new Map(this.mapDivId, {
camera: initCamera
});
this._visitConfigMapLayers(appConfig, lang.hitch(this, function(layerConfig) {
this.createLayer(map, '3D', layerConfig);
}));
map.usePlugin = Map.usePlugin;
this._publishMapEvent(map);
}));
},

_show3DWebScene: function(appConfig) {
this._getWebsceneData(appConfig.map.itemId).then(lang.hitch(this, function(data) {
require(['esri3d/Map'], lang.hitch(this, function(Map) {
var map = new Map(this.mapDivId, appConfig.map.mapOptions);

array.forEach(data.itemData.operationalLayers, function(layerConfig) {
this.createLayer(map, '3D', layerConfig);
}, this);

array.forEach(data.itemData.baseMap.baseMapLayers, function(layerConfig) {
layerConfig.type = "tile";
this.createLayer(map, '3D', layerConfig);
}, this);

array.forEach(data.itemData.baseMap.elevationLayers, function(layerConfig) {
layerConfig.type = "elevation";
this.createLayer(map, '3D', layerConfig);
}, this);

map.toc = data.itemData.toc;
map.bookmarks = data.itemData.bookmarks;
map.tours = data.itemData.tours;
}));
}));
},




/* function PopupCenter(url, title, w, h) {
// Fixes dual-screen position Most browsers Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;

width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

// Puts focus on the newWindow
if (window.focus) {
newWindow.focus();
}
}
*/





_publishMapEvent: function(map) {


topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
if(visible && layer.title=='_M'||layer.title=='_M2'){
this.SERVICE_ID = layer.title;
}
}));



// create node for the tooltip
var tip = "Click on problem location";
var tooltip = dojo.create("div", { "class": "tooltip", "innerHTML": tip, "style": "color: red; font-size:22px;width:200px"}, map.container);
dojo.style(tooltip, "position", "fixed");

// update the tooltip as the mouse moves over the map
dojo.connect(map, "onMouseMove", function(evt) {
var px, py;
if (evt.clientX || evt.pageY) {
px = evt.clientX;
py = evt.clientY;
} else {
px = evt.clientX + dojo.body().scrollLeft - dojo.body().clientLeft;
py = evt.clientY + dojo.body().scrollTop - dojo.body().clientTop;
}

// dojo.style(tooltip, "display", "none");
tooltip.style.display = "none";
dojo.style(tooltip, { left: (px + 15) + "px", top: (py) + "px" });
// dojo.style(tooltip, "display", "");
tooltip.style.display = "";
// console.log("updated tooltip pos.");
});

// hide the tooltip the cursor isn't over the map
dojo.connect(map, "onMouseOut", function(evt){
tooltip.style.display = "none";
});



//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, 0.01,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_CIRCLE,
new Color([207, 16, 45, 0.9]),
1
),
new Color([207, 16, 45, 0.9])
);

map.on("click", lang.hitch(this, function(evt){
var gra = new Graphic(evt.mapPoint, symbol);
setTimeout(lang.hitch(this, function(){
var selFeats = map.infoWindow.features;
if(!selFeats){
map.graphics.clear();
map.graphics.add(gra);

//PopupCenter('http://www.xtf.dk','xtf','900','500');



map.infoWindow.setContent('<a href="https://survey123.arcgis.com/share/xyz123?center='+ evt.mapPoint.getLatitude().toString() + ','+ evt.mapPoint.getLongitude().toString() + '&field:Floor_Selection=' + this.SERVICE_ID.split('_')[1]+"_Floor " + '" target="_"><font size="4">Click here to submit a service request</font></a>');

SERVICE_ID: null;

map.infoWindow.show(evt.mapPoint);
}
}), 1000);
}));
}));
},








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

_show2DWebMap: function(appConfig) {
//should use appConfig instead of this.appConfig, because appConfig is new.
// if (appConfig.portalUrl) {
// var url = portalUrlUtils.getStandardPortalUrl(appConfig.portalUrl);
// agolUtils.arcgisUrl = url + "/sharing/content/items/";
// }
if(!appConfig.map.mapOptions){
appConfig.map.mapOptions = {};
}
var mapOptions = this._processMapOptions(appConfig.map.mapOptions) || {};
mapOptions.isZoomSlider = false;

var webMapPortalUrl = appConfig.map.portalUrl;
var webMapItemId = appConfig.map.itemId;
var webMapOptions = {
mapOptions: mapOptions,
bingMapsKey: appConfig.bingMapsKey,
usePopupManager: true
};

if(!window.isBuilder && !appConfig.mode && appConfig.map.appProxy &&
appConfig.map.appProxy.mapItemId === appConfig.map.itemId) {
var layerMixins = [];
array.forEach(appConfig.map.appProxy.proxyItems, function(proxyItem){
if (proxyItem.useProxy && proxyItem.proxyUrl) {
layerMixins.push({
url: proxyItem.sourceUrl,
mixin: {
url: proxyItem.proxyUrl
}
});
}
});

if(layerMixins.length > 0) {
webMapOptions.layerMixins = layerMixins;
}
}

var mapDeferred = this._createWebMapRaw(webMapPortalUrl, webMapItemId, this.mapDivId, webMapOptions);

mapDeferred.then(lang.hitch(this, function(response) {
var map = response.map;

//hide the default zoom slider
map.hideZoomSlider();

// set default size of infoWindow.
map.infoWindow.resize(270, 316);
//var extent;
map.itemId = appConfig.map.itemId;
map.itemInfo = response.itemInfo;
map.webMapResponse = response;
// enable snapping
var options = {
snapKey: keys.copyKey
};
map.enableSnapping(options);

html.setStyle(map.root, 'zIndex', 0);

map._initialExtent = map.extent;

this.layerInfosObj = LayerInfos.getInstanceSyncForInit(map, map.itemInfo);

//save layer's original refreshInterval
this.layerInfosObj.traversalLayerInfosOfWebmap(lang.hitch(this, function(layerInfo){
layerInfo.getLayerObject().then(lang.hitch(this, function(layerObject){
if(layerObject){
lang.setObject("_wabProperties.originalRefreshinterval", layerObject.refreshInterval, layerObject);
}
}), lang.hitch(this, function(err){
console.error("can't get layerObject", err);
}));
}));

if(appConfig.map.mapRefreshInterval && !appConfig.map.mapRefreshInterval.useWebMapRefreshInterval){
this._updateRefreshInterval(appConfig.map.mapRefreshInterval);
}

this._showUnreachableLayersTitleMessage();
this._publishMapEvent(map);
setTimeout(lang.hitch(this, this._checkAppState), 500);
this._addDataLoadingOnMapUpdate(map);
}), lang.hitch(this, function(error) {
console.error(error);
this._showError(error);
topic.publish('mapCreatedFailed');
}));
},

_handleRefreshLayer: function(featureLayer){
// var layerId = "Wildfire_5334";
//before refresh => update-start => after refresh => get data => graphic-remove => graphic-add => update-end
var _drawFeatures = featureLayer._mode._drawFeatures;
var _clearIf = featureLayer._mode._clearIIf;
var _cellMap = null;
featureLayer._mode._drawFeatures = function(response, cell) {
/*jshint unused: false*/
// console.log(response);
if (cell && typeof cell.row === 'number' && typeof cell.col === 'number') {
featureLayer._mode._removeCell(cell.row, cell.col);
}
_drawFeatures.apply(featureLayer._mode, arguments);
};
aspect.before(featureLayer, 'refresh', function() {
// console.log("before refresh");
_cellMap = featureLayer._mode._cellMap;
featureLayer._mode._clearIIf = function() {};
});
aspect.after(featureLayer, 'refresh', function() {
// console.log("after refresh");
featureLayer._mode._cellMap = _cellMap;
featureLayer._mode._clearIIf = _clearIf;
});

on(featureLayer, 'update-start', function(){
// console.log('update-start');
featureLayer.isUpdating = true;
});

on(featureLayer, 'update-end', function(){
// console.log('update-end');
featureLayer.isUpdating = false;
});

// on(featureLayer, 'graphic-add', function(){
// console.log('graphic-add');
// });

// on(featureLayer, 'graphic-remove', function(){
// console.log('graphic-remove');
// });

// on(featureLayer, 'graphics-clear', function(){
// console.log('graphics-clear');
// });
},

_showError: function(err){
if(err && err.message){
html.create('div', {
'class': 'app-error',
innerHTML: err.message
}, document.body);
}
},

_createWebMapRaw: function(webMapPortalUrl, webMapItemId, mapDivId, webMapOptions){
var mapDef = jimuUtils.createWebMap(webMapPortalUrl, webMapItemId, mapDivId, webMapOptions);
return mapDef.then(lang.hitch(this, function(response){
return response;
}), lang.hitch(this, function(error){
console.error(error);
if(error && error instanceof Error && error.message){
var cache = i18n.cache;
var key = "esri/nls/jsapi/" + dojoConfig.locale;
/*if(dojoConfig.locale !== 'en'){
key += "/" + dojoConfig.locale;
}*/

var esriLocaleNls = cache[key];
var str = lang.getObject("arcgis.utils.baseLayerError", false, esriLocaleNls);
if(str && error.message.indexOf(str) >= 0){
//The original basemap is not available. We can create the webmap with another basemap layer.
new Message({
message: window.jimuNls.map.basemapNotAvailable + window.jimuNls.map.displayDefaultBasemap
});
return arcgisUtils.getItem(webMapItemId).then(lang.hitch(this, function(itemInfo){
itemInfo.itemData.spatialReference = {
wkid: 102100,
latestWkid: 3857
};
itemInfo.itemData.baseMap = {
baseMapLayers: [{
url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
opacity: 1,
layerType: "ArcGISTiledMapServiceLayer",
visibility: true,
id: "defaultBasemap_0"
}],
title: "Topographic"
};
return jimuUtils.createWebMap(webMapPortalUrl, itemInfo, mapDivId, webMapOptions);
}));
}
}

throw error;
}));
},

_showUnreachableLayersTitleMessage: function() {
var unreachableLayersTitle = this.layerInfosObj.getUnreachableLayersTitle();
var layersTitleString = "";
var message = window.jimuNls.map.layerLoadedError ||
"The layer, ${layers} cannot be added to the map.";
if(message && unreachableLayersTitle && unreachableLayersTitle.length > 0) {
array.forEach(unreachableLayersTitle, lang.hitch(this, function(title) {
layersTitleString = layersTitleString + title + ", ";
}));

new Message({
message: message.replace("${layers}", layersTitleString)
});
}
},

_addDataLoadingOnMapUpdate: function(map) {
var loadHtml = '<div class="map-loading">Loading...</div>';
var loadContainer = html.toDom(loadHtml);
html.place(loadContainer, map.root);
if(map.updating){
html.addClass(loadContainer, 'loading');
}
on(map, 'update-start', lang.hitch(this, function() {
html.addClass(loadContainer, 'loading');
}));
on(map, 'update-end', lang.hitch(this, function() {
html.removeClass(loadContainer, 'loading');
}));
on(map, 'unload', lang.hitch(this, function() {
html.destroy(loadContainer);
loadContainer = null;
}));
},

_checkAppState: function() {
//URL parameters that affect map extent
var urlKeys = ['extent', 'center', 'marker', 'find', 'query', 'scale', 'level'];
var useAppState = this.appConfig.keepAppState;

if(useAppState) {
array.forEach(urlKeys, function(k){
if(k in this.urlParams){
useAppState = false;
}
}, this);
}

if(useAppState){
this.appStateManager.getWabAppState().then(lang.hitch(this, function(stateData) {
if (stateData.extent || stateData.layers) {
var appStatePopup = new AppStatePopup({
nls: {
title: this.nls.appState.title,
restoreMap: this.nls.appState.restoreMap
}
});
appStatePopup.placeAt('main-page');
on(appStatePopup, 'applyAppState', lang.hitch(this, function() {
this._applyAppState(stateData, this.map);
}));
appStatePopup.startup();
appStatePopup.show();
}
}));
}
},

_applyAppState: function(stateData, map) {
var layerOptions = stateData.layers;
this.layerInfosObj.restoreState({
layerOptions: layerOptions || null
});
if (stateData.extent) {
map.setExtent(stateData.extent);
}
},

_processMapOptions: function(mapOptions) {
if (!mapOptions) {
return;
}

if(!mapOptions.lods){
delete mapOptions.lods;
}
if(mapOptions.lods && mapOptions.lods.length === 0){
delete mapOptions.lods;
}

var ret = lang.clone(mapOptions);
if (ret.extent) {
ret.extent = new Extent(ret.extent);
}
if (ret.center && !lang.isArrayLike(ret.center)) {
ret.center = new Point(ret.center);
}
if (ret.infoWindow) {
ret.infoWindow = new InfoWindow(ret.infoWindow, html.create('div', {}, this.mapDivId));
}

return ret;
},

createLayer: function(map, maptype, layerConfig) {
var layMap = {
'2D_tiled': 'esri/layers/ArcGISTiledMapServiceLayer',
'2D_dynamic': 'esri/layers/ArcGISDynamicMapServiceLayer',
'2D_image': 'esri/layers/ArcGISImageServiceLayer',
'2D_feature': 'esri/layers/FeatureLayer',
'2D_rss': 'esri/layers/GeoRSSLayer',
'2D_kml': 'esri/layers/KMLLayer',
'2D_webTiled': 'esri/layers/WebTiledLayer',
'2D_wms': 'esri/layers/WMSLayer',
'2D_wmts': 'esri/layers/WMTSLayer',
'3D_tiled': 'esri3d/layers/ArcGISTiledMapServiceLayer',
'3D_dynamic': 'esri3d/layers/ArcGISDynamicMapServiceLayer',
'3D_image': 'esri3d/layers/ArcGISImageServiceLayer',
'3D_feature': 'esri3d/layers/FeatureLayer',
'3D_elevation': 'esri3d/layers/ArcGISElevationServiceLayer',
'3D_3dmodle': 'esri3d/layers/SceneLayer'
};

require([layMap[maptype + '_' + layerConfig.type]], lang.hitch(this, function(layerClass) {
var layer, infoTemplate, options = {},
keyProperties = ['label', 'url', 'type', 'icon', 'infoTemplate', 'isOperationalLayer'];
for (var p in layerConfig) {
if (keyProperties.indexOf(p) < 0) {
options[p] = layerConfig[p];
}
}
if (layerConfig.infoTemplate) {
infoTemplate = new InfoTemplate(layerConfig.infoTemplate.title,
layerConfig.infoTemplate.content);
options.infoTemplate = infoTemplate;

layer = new layerClass(layerConfig.url, options);

if (layerConfig.infoTemplate.width && layerConfig.infoTemplate.height) {
aspect.after(layer, 'onClick', lang.hitch(this, function() {
map.infoWindow.resize(layerConfig.infoTemplate.width,
layerConfig.infoTemplate.height);
}), true);
}
} else {
layer = new layerClass(layerConfig.url, options);
}

layer.isOperationalLayer = layerConfig.isOperationalLayer;
layer.label = layerConfig.label;
layer.icon = layerConfig.icon;
map.addLayer(layer);
}));
},

onAppConfigChanged: function(appConfig, reason, changedJson) {
// jshint unused:false
this.appConfig = appConfig;
if(reason === 'mapChange'){
this._recreateMap(appConfig);
}else if(reason === 'mapOptionsChange'){
if(changedJson.lods){
this._recreateMap(appConfig);
}
}else if(reason === 'mapRefreshIntervalChange'){
var itemData = this.map && this.map.itemInfo.itemData;
if (itemData && this.layerInfosObj) {
this._updateRefreshInterval(changedJson);
}
}
},

onMapContentModified: function() {
this._recreateMap(this.appConfig);
},

_updateRefreshInterval: function(refreshInterval){
var minutes = -1;

if (refreshInterval.useWebMapRefreshInterval) {
//Honor the individual interval of each layer
minutes = -1;
} else {
//Use a single interval for all layers
minutes = refreshInterval.minutes;
}

this.layerInfosObj.traversalLayerInfosOfWebmap(lang.hitch(this, function(layerInfo) {
layerInfo.getLayerObject().then(lang.hitch(this, function(layerObject) {
if(!layerObject){
return;
}
//only handle non-static layer
var originalRefreshinterval = lang.getObject("_wabProperties.originalRefreshinterval", false, layerObject);

if(originalRefreshinterval > 0){
if (typeof layerObject.setRefreshInterval === 'function') {
if (minutes < 0) {
//Honor the individual interval of each layer
layerObject.setRefreshInterval(originalRefreshinterval);
} else {
//Use a single interval for all layers
layerObject.setRefreshInterval(minutes);
}
}
}
}), lang.hitch(this, function(err) {
console.error("can't get layerObject", err);
}));
}));
},

_recreateMap: function(appConfig){
if(this.map){
topic.publish('beforeMapDestory', this.map);
this.map.destroy();
}
this._showMap(appConfig);
},

disableWebMapPopup: function() {
this.map.setInfoWindowOnClick(false);
},

enableWebMapPopup: function() {
this.map.setInfoWindowOnClick(true);
}

});

clazz.getInstance = function(options, mapDivId) {
if (instance === null) {
instance = new clazz(options, mapDivId);
}
return instance;
};

return clazz;
});
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Joe,

   So you start by getting the basic widgets template from the samples folder and adding your code to that (removing all the fluff that you will not need). I have done all that for you in the attached file. The widget is what you are after I think or it is almost complete.

View solution in original post

0 Kudos
joerodmey
MVP Regular Contributor

I've added the widget successfully and into my app. But when I click on the app to fire it up it just hangs on loading bubbles.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Worked for me when I was developing it...

0 Kudos
joerodmey
MVP Regular Contributor

I added it into my sitemap folder and shows properly in the app. But when I click to load the popup it shows the widget window with icon and textbox at top but rest of screen is blank

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

And errors in the browser say?

0 Kudos
joerodmey
MVP Regular Contributor

0 Kudos
joerodmey
MVP Regular Contributor

Error screenshot attached 

0 Kudos