ThinkGeo.com    |     Documentation    |     Premium Support

Adding popup with ajax

#1

 Hi, I try to add popup window using ajax call to server, but I dont see it on client side. Is it possible to do so? Do I need to refresh something? If thats not possible, what thinkgeo javascript functions do I need to use to add it manualy on client side?



#2

 Hi Hotter,


Actually I don’t recommend you creating popup using pure JavaScript on client side, because we need lots of properties to config, usually, I would like to create a popup with all properties configured on server side, but make it hidden. And then show it on client side when it’s required. Following is the code on client side about how to get the defined popup on server side:


               var map = Map1.GetOpenLayersMap();



                var popup = map.popups[“id”];


                popup.lonlat = new OpenLayers.LonLat(newLon, newLat);


                popup.show();


Of course, we can create the popup on client side with the help of client APIs and OpenLayers, please check here gis.thinkgeo.com/Support/Dis...x#HowToUse for more details.


 


Thanks,


Johnny



#3

Hi Johnny:



We have code to use a Cloud Popup and it works fine in ThinkGeo MVC Version 7.0 but when we upgrade to Version 9 and the following line of code stop working:



 var infoPopup = Map1.popups[0]; // pre-created popup window
      infoPopup.lonlat = e.worldXY;



Here is the error message: "Uncaught TypeError: Cannot set property ‘lonlat’ of undefined"



How to get the lat and lon for the Cloud popup in Version 9.  Please help.



Thanks,

Adrian

#4

Hi Arian,



For the new 9.0, we have some enhancement for the popup in MVC.



You have two solutions for your scenario.



1. Specified an correct position when you initialize your CloudPopup, this position should be inside current extent then you can use original client side script.



2. Follow the new logic, update popup position and text in server side, then refresh popup by Map1.sendPopupsRequest(); API in client side.



Please see my attached files, which should be helpful.



Regards,



Don

PopupSample.zip (3.62 KB)

#5

Hi Don:



It doesn’t work when I tried your approach.  Even I cannot run your sample code.  It has the same error as it is in my application.  Please see attached screenshot for details.



Please let me know what is the issue in Version 9.0.



Thanks.

CloudPopup_error1.jpg (42.8 KB)
CloudPopup_error2.jpg (40.6 KB)

#6

Hi Adrian, 
  
 I tested the sample again, it works well in an clean VM machine. 
  
 I opened your image, I think if you still get the same issue, that’s should because your browser cached some original JS. 
  
 Could you please try to clear everything and retry it with the latest dll package? And if possible please try to test it in an clean machine one more time. 
  
 And if you still met the same issue please let me know your detail test dlls version and your environment. 
  
 Regards, 
  
 Don

#7

Thanks Don for your reply.



I tried everything on my machine, clear cache and used Firefox, IE and Chrome and all of them get the same error as the screenshot I attached in last post.



Could you check your sample code to see if it has the latest code as you use?  If possible, could you attach the solution that works for you in your response and I can try that.



I tried a clean machine with Windows 8 but I cannot open the solution since it uses the IIS Express and I don’t have right to the IIS metabase.



Thanks,

Adrian

#8

Thanks Don.



Your sample code has the old code so it didn’t work.  However I used the code from your sample included in this post which is the latest one and it works now.



However we got another issue which is the legend box is cutoff.  Please see attached image for your information.  I am not sure if I should create a new thread or use his one since it is related to ThinkGeo Version 9 but not related to Cloud Popup.



Thanks,

Adrian


LegendError.jpg (21.4 KB)

#9

Hi Adrian, 
  
 I am glad to hear the sample works for you. 
  
 I think create a new thread is better because it looks another issue. 
  
 And please put some code on a sample file just like mine to show how to reproduce this legend issue, you can directly modify based on anyone of our HowDoISample. So I can look into this issue quickly. 
  
 Regards, 
  
 Don

#10

Thanks Don. 



I will create a new thread for the legend issue.  



But I would like to point out that your code attached on your post in this thread works but not the code in the HowDoSample which still has the old code that you guys need to fix it so everyone will get the new code. This just a friendly reminder for you guys.



Thanks again,

Adrian


#11

Hi Adrian, 
  
 Thanks for your reminder. I think our developer will update the sample project after we review all samples. 
  
 Regards, 
  
 Don

#12

Hi Don:



Thanks for your update on the sample project.

Our tester point out that the new  popup cannot close even it has a close button on the top right corner. 



Please help.



Thanks,

Adrian


#13

Hi Adrian,



I test the two solutions provided by Don and the close button can work, would you please try the codes from Don and compare it with yours to see if any differences?

Btw, which solution you are using? 



Thanks,

Troy

#14

Hi Troy:



I am using the Solution Two from Don since the Solution One doesn’t work for me.  The Solution One is almost the same as our old code.



Please let me know what is the next step that I need to take.



Thanks,

Adrian




#15

Adrian,



I created a sample including the two solutions. The two solution works fine and the popup can be closed. Would you please run it and point out what’s the difference between us?



Thanks,

Troy

005_004_003_002_001_DisplayASimpleMapForMvc.zip (118 KB)

#16

Thanks Troy for the sample application.  Both of your solution will close the button but I have tried both of them and in my application the popup will not close.  I am not sure if there is any jQuery or third party libraries that we need to make upgrade in order to make it work.



In our current production web application, the popup window can be closed, but we are using the ThinkGeo version of 7.0.  



Do you have any ideas which can help us to try?



Thanks again,

Adrian  

#17

Hi Adrian,



I don’t have much confidence that Jquery or other third party libraries caused the issue, but I think you can create a new page in your application firstly and then append the codes one by one to simulate your issue page.  Currently, I think the easy way is to compare the differences between yours and ours samples.



Thanks,

Troy

#18

Hi Troy:



It has been while since I get some time to look at this issue again.  I have tried both of your solutions but none of them works for me.  I double checked all the code and the only difference that I can see is the MapUnit.  In you example, you use the GeographyUnit.DecimalDegree but we use the GeographyUnit.Meter.  Is the CloudPopup only works for DecimalDegree?



Thanks,

Adrian

#19

Hi Adrian, 
  
 It should work for GeographyUnit.Meter, but one thing is that we need to convert the position of popups to the unit of map. If it still doesn’t work, would you please share your demo here? 
  
 Thanks, 
 Johnny

#20

Thanks Johnny for your reply.



We don’t have a demo and it will be difficult to create a demo.  Right now we are using the exactly code you send to me.  I am trying Solution 2 now.  Here are the code on the server side:

            double x = Convert.ToDouble(args[3]);
            double y = Convert.ToDouble(args[4]);



            PointShape location = new PointShape(x, y);
            CloudPopup popup = new CloudPopup(“Information”, location, inforText);
            popup.HasCloseButton = true;
            map.Popups.Clear();
            map.Popups.Add(popup);



It appears to me that we do get the right x,y coordinates and pupup is in the correct location but it seems to me that somehow we couldn’t get the correct “CloseButton” coordinates.



Please help us to point out how to convert the location to the GeographyUnit.Meter.

Thanks,

Adrian