ThinkGeo.com    |     Documentation    |     Premium Support

AJAX toolkit

#1







<object
classid="clsid:38481807-CA0E-42D2-BF39-B33AF135CC4D" id=ieooui>

st1\:*{behavior:url(#ieooui) }






Hi


 


I have been testing web edition control for a while.


Currently I’m using shape file with VE background. We have around 22 shape files data drawn on map at same time.


 


Recently I was asked to create collapsible panel using MS AjaxControlToolkit, which collapse panel horizontally. I have two panels. Left panel holds Map control, while right panel has shape data information. <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city> panel works fine. But problem arise when I expand left panel to it fullest by clicking on right panel. Shape layers on map control get dis-aligned with map. Shape layers get normal when I click on left panel which makes right panel visible again. Also when left panel expanded, map control does not expand to cover expanded shape layers.


 


The reason we need to use collapsible panel such way that when user want full view of map, he just click on right panel.. that allows left panel to extend horizontally it fullest, and when user want to see shape data.. They click on left panel, that allows right panel back in on map.


 


I’m using IE 7 on window XP.


I’ve attached screenshots and source code for better understanding.


Collapsible panel.GIF shows two panel with map on left and data on right panel


Collapsible panel-2.GIF shows one panel that shows blue layer expanded to fullest, but map control does not.


 


When ever panel gets expanded, layers gets refresh all time, how do I avoid this?


 


Is there anything missing here?


Or is there any better work around to this?


 


Thanks


Hiren



930-Collapsible_panel.GIF (102 KB)
931-Collapsible_panel-2.GIF (118 KB)
932-Collapsible_Panel.zip (6.36 KB)

#2

Hiren, 
  
 I guess it’s an issue of VE’s; I found the VE cannot resize correctly. I recommend changing the VE background to Google Map to see if it works fine. If it works fine in Google Map, so that’s the issue I mentioned. If it is, it’s the issue of VE’s issue which we cannot handle much. Even it causes when we use VE’s library directly to create the map. Sorry for the inconvenience. 
  
 If you have any questions please let me know. 
  
 Thanks, 
 Howard 
  


#3

Howard,






Thanks for reply.




I checked with google it works fine. So it’s issue with VE






Thanks




Hiren





#4

Hiren,



If it's possible; you can try the following JavaScript to fix this bug after the browser is resided.var veObj = map.layers[i].mapObject;
veObj.mapelement.style.width = newWidth;
veObj.mapelement.style.height = newHeight;
veObj.Resize();
Hope it helps.



Thanks,

Howard



#5



Howard,



What's 'i'  value? 

I copied above java script code inside function OnMapCreated(map) {...}, it errored out.. 'layers[...].mapObject is null or not an object



Thanks

Hiren



#6

Hiren,



This is one way to get the VELayer of OpenLayers; i is the index of the VE Overlay you added into the map. Also you can use the following script instead:var veObj = map.getLayer("Id").mapObject; 
One thing I want to point out is that this script is not pasted in the OnMapCreated; it's added into an resize event of your web browser.

For example.window.onresize = function(){
//...
}
please try to debug this method and feel free to change it.




Thanks,

Howard



#7

Howard,


Thankas for quick respoinse. I will try and update you.


Hiren



#8

Hiren, 
  
 You are welcome; please let me know if you have any questions. 
  
 Thanks, 
 Howard

#9












Hi Howard,


 


I tried both ways to get VE layer in java script. But no luck


I get 2 different errors in Java script on window resize.


First I tried var layer = map.getLayer("VirtualEarth Map");


Got error after alert(‘1’)  message: 'undefined' is null or not an object


 


Next I tried, var veObj = map.layers[1].mapObject; where 1 is VE layer on map1.


Got error after alert(‘1’)  message: 'layers' is null or not an object


 


Please find attached java script code.


 


Thanks


Hiren



951-JS_code.txt (2.49 KB)

#10

Hi Hiren, 



“map” is not an argument of the window.onresize event as well as “newWidth” and “newHeight”. We need to create these variables. Please try the following javascript which works fine in IE.var tgMap = null;
var OnMapCreated = function(map){
    tgMap = map;
    //...
}

window.onresize = function(){
    if(tgMap){
        var veLayer = tgMap.getLayer("VirtualEarth Map");
        if(veLayer){
            var veObj = veLayer.mapObject;
            var newWidth = parseInt($get('Map1').clientWidth);
            var newHeight = parseInt($get('Map1').clientHeight);
            veObj.mapelement.style.width = newWidth;
            veObj.mapelement.style.height = newHeight;
            veObj.Resize();
        } 
    }
}




Any questions please let me know.



Thanks,

Howard



#11






<object
classid="clsid:38481807-CA0E-42D2-BF39-B33AF135CC4D" id=ieooui>

st1\:*{behavior:url(#ieooui) }




Hi Howard,


 


That’s was really quick response.


It works great at first time at page load event.


 


But does not stretch map horizontally when right AJAX panel gets collapse, instead it centers map when right panel gets collapse. Also when right panel expands, map does not resize to center of left panel.


 


Also customer over lay layers doesn’t align with map when it expand/collapse in panel.


 


I have attached screen shot in following order for better understanding.


 



        
  1. AJAX-Pageload.JPG

    2.     
  2. <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city>-When right      panel collapsed.JPG

    3.     
  3. <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city>-When right      panel expand again.GIF



Thanks


Hiren




956-AJAX-Pageload.JPG (48.3 KB)
957-AJAX-When_right_panel_collapsed.JPG (42.2 KB)
958-AJAX-When_right_panel_expand_again.GIF (54.7 KB)
959-AJAX-Map.zip (6.58 KB)

#12

Hiren, 
  
 I’ve no idea to fix the issue you encountered currently; because VE has many confliction with OpenLayers. I changed the SingleTile of the LayerOverlay to MultipleTile, it works fine. Please have a try.  
  
 If I have any new ideas, I’ll let you know immediately. 
  
 Any questions please let me know. 
  
 Thanks, 
 Howard

#13

Howard,






I tried with multiple tile. No luck






thanks




Hiren



#14

Hiren,



Please try the attachment, and see if it works fine. I think it's the same case as yours. 



Hope it helps.



Thanks,

Howard



960-UseVirtualEarth.zip (2.54 KB)

#15

Howard,



Thanks for reply.

No luck



Thanks

Hiren



#16

Hiren,  
  
 It really works in our sample. We try to fix this issue for VE in our earlier version; but when we add these kind of fix, it takes a lot of side effects. So we remove the fix and leave this issue, we hope the VE’s new library can fix it.  
  
 Hope it make sense and sorry for the inconvenience. 
  
 Thanks, 
 Howard

#17









Howard,


 


I am using sliding panel that’s collapsible horizontally on left side. Projection of highlight feature does not align on top of map area. In attached screen shot, I was trying to highlight feature on “Seatle” but features were drawn far apart on left side. When sliding in collapse or gets collapse high light features align properly.


 


I’m using java script for sliding on DIV control. With sliding panel, by clicking on any search results inside list box sliding panel gets collapsed. Left panel should stay there unless user click to collapse


 


Do you know another easy way to create such sliding panel?


 


Please find attached code for your reference.


 


Thanks


Hiren




1057-Sliding_Panel.zip (106 KB)

#18

Hi Howard,






Any update on this post?






Thanks




Hiren



#19

Hi, Hiren 
  
 It seems like your highlight feature distort from the VirtualEarth layer. Is it always distort? Or just does some operation such as map resized? I cannot read your code clearly because it contains many interference factors. So could you let me know more information how does your issue happen. 
  
 Also the sliding panel is not quite difficult; I cannot see how yours works. 
  
 It better to send me a simple sample to recreate your two issues so that I don’t need to spend too much time on reading your code. 
  
 Hope you understand and sorry for the inconvenience. 
  
 Thanks, 
 Howard