topic Re: Popups and Fullscreen Issue... in ArcGIS JavaScript Maps SDK Questions

Popups and Fullscreen Issue...

kapalczynski — Thu, 11 Jul 2024 16:28:39 GMT

I have a .net app that I am working from that has an inset map that allows users to identify features etc. The map is not that large so I created a new DIV and used the code below to populate the popup into this new DIV OUTSIDE the map view. This works Great...

BUT the problem arises as I have a FULLSCREEN button in this map... When the user clicks the full screen button the map fills the screen as it should.... BUT when I click a feature the popup does not show because I am full screen...

Looking for a solution...

Is there a way that I can make the map popup show again when the user is in full screen? Some sort of alert that when the users goes to full screen the identify no longer goes to the new DIV but pops up the map? And when its not in Fullscreen it shows up in the new DIV?
Can I track when the FULLSCREEN button is clicked and push the results to a popup in the map view and when the button is unchecked and it goes back to SMALLSCREEN that the data is pushed to the new DIV

Or some version of this? Or maybe some other way? Any help would be greatly appreciated.

Re: Popups and Fullscreen Issue...

kapalczynski — Fri, 12 Jul 2024 15:48:29 GMT

Is there a way that I can determine when the button to fullscreen is clicked or activated? Maybe I can make the popup in the map active when its been clicked? And then push the popup to the DIV when its not active?

for starters write the console.log when its clicked and get its status?

Re: Popups and Fullscreen Issue...

kapalczynski — Fri, 12 Jul 2024 16:34:42 GMT

Im trying this but getting error

// FullScreen Widget fullscreen = new Fullscreen({ view: view }); view.ui.add(fullscreen, "top-right"); reactiveUtils.on(fullscreenWidget.viewModel, "state", (value) => { if (value === "active") { console.log("========================Entered Fullscreen mode"); } })

Re: Popups and Fullscreen Issue...

kapalczynski — Fri, 12 Jul 2024 16:47:15 GMT

BUT I am at 4.29 and think I should be using watchUtils ???? Can I get the status of FULLSCREEN from watchUtils?

Re: Popups and Fullscreen Issue...

kapalczynski — Fri, 12 Jul 2024 17:18:08 GMT

Side issue I updated my 4.29 reference to 4.6 and get all these errors... thoughts?

Re: Popups and Fullscreen Issue...

kapalczynski — Tue, 16 Jul 2024 12:54:21 GMT

Any thoughts?

Re: Popups and Fullscreen Issue...

kapalczynski — Tue, 16 Jul 2024 16:35:06 GMT

I think I have what I need to push the attributes to a popup and alternatively push the results to a DIV.

My issue is I need to catch when the user goes Fullscreen or visa versa...

I am using 4.29:

I dont see a way with reactUtils to catch the Fullscreen mode
If I add watchUtils to my app I get errors
- require(["esri/core/watchUtils"], function(watchUtils) { /* code goes here */ });
fullscreenWidget.viewModel is 4.6 and above I think... when I set my project to 4.6 I get the errors above.. are those no longer supported in 4.6 or do I have to change them?

Any help would be most appreciated.

If I can capture when the status of the Fullscreen widget I can turn popups on or if its off I can push the values to the new DIV

Re: Popups and Fullscreen Issue...

kapalczynski — Thu, 18 Jul 2024 12:56:55 GMT

Is this possible in 4.29 or 4.30 api? Can I determine when the FullScreen Button is active?

Re: Popups and Fullscreen Issue...

JeffreyThompson2 — Thu, 18 Jul 2024 14:18:14 GMT

You are getting a not defined error because you named your variable fullscreen, but used fullscreenWidget in your reactiveUtils function.

You may also need to wrap the reactiveUtils function in a setTimeout function so the widget will be loaded to the ui before calling the reactiveUtils function.

Re: Popups and Fullscreen Issue...

kapalczynski — Thu, 18 Jul 2024 15:44:50 GMT

@JeffreyThompson2 thank you for your response...MOST Appreciated... this is what I have

How would I do this: You may also need to wrap the reactiveUtils function in a setTimeout function so the widget will be loaded to the ui before calling the reactiveUtils function.

If I add lines 14-18 I get the error below...

rendermap: function (codeBlock, gisInputs) { require([ .... SNIP .... "esri/PopupTemplate", "esri/core/reactiveUtils", "esri/widgets/Fullscreen/FullscreenViewModel", "esri/widgets/Fullscreen" ], function ( .... SNIP .... reactiveUtils, FullscreenVM, Fullscreen) { // FullScreen Widget fullscreen = new Fullscreen({ view: view }); view.ui.add(fullscreen, "top-right"); reactiveUtils.on(fullscreen.viewModel, "state", (value) => { if (value === "active") { console.log("========================Entered Fullscreen mode"); } })

ERROR:

4.30/:179 Uncaught TypeError: z.call is not a function
at Module.n [as runTracked] (4.30/:179:389)
at g (4.30/:222:459)
at a.reactionDeferred (4.30/:223:13)
at r (4.30/:189:40)
at a.watchTracked (4.30/:192:156)
at l (4.30/:705:417)
at k (4.30/:705:290)
at Module.w [as on] (4.30/:706:157)
at gis.js:810:27
at Ta (4.30/:23:484)

Re: Popups and Fullscreen Issue...

JeffreyThompson2 — Thu, 18 Jul 2024 15:58:04 GMT

https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

setTimeout is a built-in JavaScript function that delays a block of code by a given amount of milliseconds.

setTimeout(() => { reactiveUtils.on(fullscreen.viewModel, "state", (value) => { if (value === "active") { console.log("========================Entered Fullscreen mode"); } }) },500)

This modification should delay creating the reactiveUtils function by half a second which should be enough time for the fullscreen widget to be loaded to memory. It will probably clear the new error.

Re: Popups and Fullscreen Issue...

kapalczynski — Tue, 23 Jul 2024 12:46:59 GMT

@JeffreyThompson2 for some reason I still get this error... It gives me the error when the page loads... not when I click the full screen button... I can still click the fullscreen and it works... its just the timeout and code throws the error and does not alert the console.

4.29/:178 Uncaught TypeError: z.call is not a function
at Module.n [as runTracked] (4.29/:178:485)
at h (4.29/:222:12)
at a.reactionDeferred (4.29/:222:88)
at x (4.29/:188:163)
at a.watchTracked (4.29/:191:295)
at m (4.29/:1492:495)
at l (4.29/:1492:368)
at Module.w [as on] (4.29/:1493:228)
at gis.js:107:35

I am using this in my script to open a DIV and populate it with the contents of the popup so I know its not the actual reactiveUtils.on but rather whats inside the .on statement

Other example in my script of using reactiveUtils

reactiveUtils.on( () => view, "click", (event) => { featuresWidget.open({ location: event.mapPoint, fetchFeatures: true }); } );

Re: Popups and Fullscreen Issue...

kapalczynski — Fri, 26 Jul 2024 17:30:37 GMT

@JeffreyThompson2 any more thoughts about this error I am getting... its so well defined like all ESRI errors...

Re: Popups and Fullscreen Issue...

JeremyLyman — Mon, 29 Sep 2025 13:25:30 GMT

I was also getting the "call is not a function" using your snippet.

But I just got this working by using the reactiveUtils.watch() method rather than on().

https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html

reactiveUtils.watch(()=>fullscreenWidget.viewModel.state,(value)=>{

console.log(value);

});