Select to view content in your preferred language

Popups and Fullscreen Issue...

655
12
07-11-2024 09:27 AM
kapalczynski
Frequent Contributor

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_0-1720715312626.png

 

 

0 Kudos
12 Replies
JeffreyThompson2
MVP Regular Contributor

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.

GIS Developer
City of Arlington, Texas
0 Kudos
kapalczynski
Frequent Contributor

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

 

 

 

0 Kudos
kapalczynski
Frequent Contributor

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

0 Kudos