Popups and Fullscreen Issue...

kapalczynski

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.

<div class="mapStyle">
    <div id="permitView" class="mainapplicationMapStyle"></div>
    <div id="features-widget" class="calcite-match-height"></div>
</div>

                const featuresWidget = new Features({
                  container: "features-widget",
                  viewModel: {
                    // Add a custom action to the widget that will open a
                    // website when it's selected.
                    actions: [
                      {
                        type: "button",
                        title: "Visitation Highlights (2022)",
                        id: "more-info",
                        icon: "information-letter"
                      }
                    ],
                    view: view
                  }
                });

                // Open the Features widget with features fetched from
                // the view click event location.
                reactiveUtils.on(
                  () => view,
                  "click",
                  (event) => {
                    featuresWidget.open({
                      location: event.mapPoint,
                      fetchFeatures: true
                    });
                  }
                );

kapalczynski

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?

kapalczynski

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

kapalczynski

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

kapalczynski

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

kapalczynski

Any thoughts?

kapalczynski

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

kapalczynski

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

JeffreyThompson2

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.

GIS Developer
City of Arlington, Texas

kapalczynski

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