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
});
}
);
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.
@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
});
}
);
@JeffreyThompson2 any more thoughts about this error I am getting... its so well defined like all ESRI errors...