PDA

View Full Version : Maps set to fullscreen: true display over all panels



Rohall
19 Jul 2010, 6:40 AM
Hi!
Ok ok, so I've posting a lot about maps...sorry about the mess and thanks again for all of the help. I've noticed that when I created a new map like this:



// Map Object/Settings
this.directionsMap = new Ext.Map({
fullscreen: true,
centered: true,

mapOptions: {
center: new
google.maps.LatLng(this.practiceLocation.latitude,this.practiceLocation.longitude), zoom:11
}
});


this.panelMap = new Ext.Panel({
id: 'panelMap',
layout: {
type: 'fit'
},
items: [this.directionsMap],
});


the map will appear above all other panels, but any markers I create will be displayed. If I remove the fullscreen: true configuration option then the map will behave correctly except it will not render any markers. Furthermore, if I set the panelMap fullscreen option to true while the map's fullscreen option is set to true I get an odd glitch which appears to be a map overlaying another map (the markers will appear in this as well). The panelMap object is being contained by another basic panel which has fullscreen: true and a layout of type 'card'.

Has anyone had similar issues? Is this a bug or am I missing something?

Thanks again!

evant
19 Jul 2010, 6:42 AM
You can't have more than 1 fullscreen item.

A fit layout fits the child to the size of the parent. Make the container fullscreen, not the child.

Rohall
19 Jul 2010, 6:47 AM
Thanks for your super fast replies Evant!

I did what you said, that resolves the issue of the map displaying over all other content, however when i remove the fullscreen: true options from the map the markers disappear...Does the fullscreen configuration option have any side effects that might be causing the rendering of the markers to occur?

evant
19 Jul 2010, 6:56 AM
Not as far as I'm aware.

Can you post your new code?

Rohall
19 Jul 2010, 7:01 AM
Sure!

Object Setup:


// Map Object/Settings
this.directionsMap = new Ext.Map({
layout: {type: 'fit'}, // I have tried removing this as well
//fullscreen: true,
centered: true,

mapOptions: { center: new google.maps.LatLng(this.practiceLocation.latitude,this.practiceLocation.longitude), zoom:11 }
});



this.panelMap = new Ext.Panel({
id: 'panelMap',
layout: {
type: 'fit'
},
items: [this.directionsMap],
});



Parent Panel and Marker:


this.ui = new Ext.Panel({
title: "A2 Store UI",
layout: 'card',
fullscreen: true
});
var marker = new google.maps.Marker({
map: this.directionsMap.map,
position: new google.maps.LatLng(this.practiceLocation.latitude,this.practiceLocation.longitude)
});

// This seems to have no effect (Someone suggested it in another thread)
marker.setMap(this.directionsMap.map);



Thanks again!

evant
19 Jul 2010, 7:11 AM
In that case, shouldn't panelMap be fullscreen?

Rohall
19 Jul 2010, 7:23 AM
Yep, that would make sense, but when I do that I get the strangest error! Take a look, it appears as though there's a map overlaying another map. In my web browser, if I resize the image the overlaying map will take control of 90% of the screen, leaving only a small border of the map underneath. On the iphone, the maps stay as they're displayed in the attached image (although as you move around the glitching does get a bit worse).

Rohall
19 Jul 2010, 8:16 AM
Switching tabs appears to completely fix the map, eg:

Load webapp -> Click "Map" -> Panel loads with grey background / glitching -> switch tabs -> switch back to the webapp's tab -> map is displayed perfectly (albeit, slightly off of the actual center location, but still much better).

Is it possible I need to somehow force the panel to redraw once it has become active?