Looking to keep cached base map at full extent even when the browser is minimized

3232
7
Jump to solution
06-23-2015 12:05 PM
IanPeebles
Occasional Contributor III

I have an application that works well, yet I am trying to get the map to appear at full scale when the browser is opened in a minimized window.  When the browser is opened at a maximized browser window, the map does appear at full extent.

is there a way I can scale the map at full extent when the browser is minimized?  I understand that this may be a css issue.  Below are samples I am referring to?

Browser - Full Extent

MapFullExtentinMaximizedBrowser.jpg

Browser - Minimized Window

MapFullExtentinMinimizedBrowser.jpg

Notice the difference?

There are going to be users that open their browser in a minimized state, but I want them to be able to see the entire extent of the City.  Also, there is a cached base map used.

Anyone have any ideas?

0 Kudos
1 Solution

Accepted Solutions
IanPeebles
Occasional Contributor III

Ken,

I tried this out and I could not get it to work.  Here is the block of code I use for the map:

   // MAP START EXTENT

   var startExtent = new Extent(2080000, 216000, 2200000, 280000, new SpatialReference({wkid: 102724}));

   // MAP

      map = new esri.Map("map", {

          extent: startExtent,

          sliderPosition: "top-left",

          sliderOrientation: "horizontal",

          sliderStyle: "large",

          isZoomSlider: true

      });

How would I incorporate your suggestion?

View solution in original post

0 Kudos
7 Replies
RobertScheitlin__GISP
MVP Emeritus

Ian,

   In your "minimized state" what happen when someone clicks the home button (full extent button)?

0 Kudos
IanPeebles
Occasional Contributor III

Robert,

All it does is move the map to the max scale of 1:12000 and centers the current scale in the map.  I am just wondering if the map frame can some how adjust according to browser window size?

With a dynamic map service, this is not a problem

Ian

0 Kudos
KenBuja
MVP Esteemed Contributor

When you're using the tile map layer, you're going to run into the issue when the extent of the service won't exactly fit to the size of the browser window. It will either be too large or two small. The map's setExtent method does have a way around this, however. It has an optional parameter that makes sure the extent you use will fully fit in the window. It defaults to false, so you just have to set it to true.

map.setExtent(initialExtent, true);

IanPeebles
Occasional Contributor III

Ken,

I tried this out and I could not get it to work.  Here is the block of code I use for the map:

   // MAP START EXTENT

   var startExtent = new Extent(2080000, 216000, 2200000, 280000, new SpatialReference({wkid: 102724}));

   // MAP

      map = new esri.Map("map", {

          extent: startExtent,

          sliderPosition: "top-left",

          sliderOrientation: "horizontal",

          sliderStyle: "large",

          isZoomSlider: true

      });

How would I incorporate your suggestion?

0 Kudos
TimWitt2
MVP Alum

Ian,

when you create the map you can add the following, just put it below your extent: startExtent,

fitExtent: true

This does the same thing Ken is talking about, but on map creation.

But remember this will only work if the window is already minimized when they load your map.

Tim

KenBuja
MVP Esteemed Contributor

It's not necessarily due to the map being minimized or maximized. Someone using the site with a screen resolution that is different that what Ian is developing would see this problem even if the screen is maximized. It's all about the pixel size of the browser window.

0 Kudos
IanPeebles
Occasional Contributor III

Hey Tim, thanks for the response.  I tried your suggestion, but I still do not have the map at full extent when the browser is minimized.  Here is my code and a screen shot:

   var startExtent = new Extent(2080000, 216000, 2200000, 280000, new SpatialReference({wkid: 102724}));

  

   // MAP

      map = new esri.Map("map", {

          extent: startExtent,

          fitExtent: true,

          sliderPosition: "top-left",

          sliderOrientation: "horizontal",

          sliderStyle: "large",

    isZoomSlider: true

      });

Anything else I should try?

0 Kudos