# How to use CloudPopup like popup for marker?

**URL:** <https://community.thinkgeo.com/t/how-to-use-cloudpopup-like-popup-for-marker/5565>\
**Category:** WebForms\
**Created:** [November 19, 2010, 4:43am UTC](https://community.thinkgeo.com/t/how-to-use-cloudpopup-like-popup-for-marker/5565 "2010-11-19T04:43:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anil2](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/a/7feea3/32.png) [@Anil2](https://community.thinkgeo.com/u/Anil2)\
**Post date:** [November 19, 2010, 4:43am UTC](https://community.thinkgeo.com/t/how-to-use-cloudpopup-like-popup-for-marker/5565/1 "2010-11-19T04:43:28Z")

</div>

Hi&nbsp;Thinkgeo,

Marker&nbsp;has&nbsp;property&nbsp;CustomPopup&nbsp;which&nbsp;is&nbsp;very&nbsp;restrictive&nbsp;(it&nbsp;should&nbsp;be&nbsp;ideally&nbsp;of&nbsp;its&nbsp;base&nbsp;type&nbsp;Popup).&nbsp;We&nbsp;cannot&nbsp;use&nbsp;it&nbsp;&nbsp;to&nbsp;assign&nbsp;a&nbsp;CloudPopup&nbsp;object&nbsp;to&nbsp;CustomPopup&nbsp;type&nbsp;property.

Question:&nbsp;How&nbsp;do&nbsp;I&nbsp;use&nbsp;CloudPopup&nbsp;like&nbsp;popup&nbsp;when&nbsp;mose&nbsp;hovers&nbsp;overs&nbsp;the&nbsp;&nbsp;marker?&nbsp;Is&nbsp;there&nbsp;a&nbsp;simple&nbsp;way&nbsp;to&nbsp;derive&nbsp;from&nbsp;CustomPopup&nbsp;and&nbsp;still&nbsp;have&nbsp;look&nbsp;and&nbsp;feel&nbsp;of&nbsp;CloudPopup&nbsp;?

Regards,

Anil

---

<div class="post-metadata">

**Author:** ![Khalil](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/k/bc8723/32.png) [@Khalil](https://community.thinkgeo.com/u/Khalil)\
**Post date:** [November 21, 2010, 8:38pm UTC](https://community.thinkgeo.com/t/how-to-use-cloudpopup-like-popup-for-marker/5565/2 "2010-11-21T20:38:18Z")

</div>

&nbsp;

Hi,&nbsp;Anil  
It’s&nbsp;designed&nbsp;like&nbsp;this&nbsp;not&nbsp;a&nbsp;bug&nbsp;for&nbsp;some&nbsp;special&nbsp;reasons&nbsp;related&nbsp;with&nbsp;memory&nbsp;leak&nbsp;problems.  
Yes,&nbsp;you&nbsp;can&nbsp;let&nbsp;it&nbsp;have&nbsp;the&nbsp;same&nbsp;look&nbsp;and&nbsp;feel&nbsp;with&nbsp;CloudPopup&nbsp;through&nbsp;implementing&nbsp;your&nbsp;own&nbsp;custom&nbsp;popup.  
Please&nbsp;give&nbsp;a&nbsp;try&nbsp;with&nbsp;codes&nbsp;below.&nbsp;I&nbsp;have&nbsp;tested&nbsp;it&nbsp;and&nbsp;it&nbsp;works&nbsp;well.  
using&nbsp;System;  
using&nbsp;System.Configuration;  
using&nbsp;ThinkGeo.MapSuite.Core;  
using&nbsp;ThinkGeo.MapSuite.WebEdition;  
&nbsp;  
namespace&nbsp;CSSamples  
{  
&nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;partial&nbsp;class&nbsp;UseDraggableMarkers&nbsp;:&nbsp;System.Web.UI.Page  
&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;void&nbsp;Page\_Load(object&nbsp;sender,&nbsp;EventArgs&nbsp;e)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!Page.IsPostBack)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Map1.MapBackground.BackgroundBrush&nbsp;=&nbsp;new&nbsp;GeoSolidBrush(GeoColor.FromHtml("#E5E3DF"));  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Map1.CurrentExtent&nbsp;=&nbsp;new&nbsp;RectangleShape(-13939426.6371,&nbsp;6701997.4056,&nbsp;-7812401.86,&nbsp;2626987.386962);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Map1.MapTools.PanZoomBar.Enabled&nbsp;=&nbsp;true;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Map1.MapTools.MouseCoordinate.Enabled&nbsp;=&nbsp;true;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Map1.MapUnit&nbsp;=&nbsp;GeographyUnit.Meter;  
&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GoogleOverlay&nbsp;google&nbsp;=&nbsp;new&nbsp;GoogleOverlay("Google&nbsp;Map");  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;google.JavaScriptLibraryUri&nbsp;=&nbsp;new&nbsp;Uri(ConfigurationManager.AppSettings["GoogleUri"]);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;google.GoogleMapType&nbsp;=&nbsp;GoogleMapType.Normal;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Map1.CustomOverlays.Add(google);  
&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SimpleMarkerOverlay&nbsp;markerOverlay&nbsp;=&nbsp;new&nbsp;SimpleMarkerOverlay("MarkerOverlay");  
&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Marker&nbsp;marker&nbsp;=&nbsp;new&nbsp;Marker(-8922952.93266,&nbsp;2984101.58384,&nbsp;new&nbsp;WebImage(21,&nbsp;25,&nbsp;-10.5f,&nbsp;-25f));  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marker.Popup&nbsp;=&nbsp;new&nbsp;InheritedCustomPopup("id",&nbsp;marker.Position,&nbsp;"ContentHtml",&nbsp;512,&nbsp;512,&nbsp;true,&nbsp;true);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marker.Popup.AutoSize&nbsp;=&nbsp;true;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marker.IsVisible&nbsp;=&nbsp;false;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;markerOverlay.Markers.Add(marker);  
&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Map1.CustomOverlays.Add(markerOverlay);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;class&nbsp;InheritedCustomPopup&nbsp;:&nbsp;CustomPopup  
&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;InheritedCustomPopup(string&nbsp;id,&nbsp;PointShape&nbsp;position,&nbsp;string&nbsp;contentHtml,&nbsp;int&nbsp;width,&nbsp;int&nbsp;height,&nbsp;bool&nbsp;autoPan,&nbsp;bool&nbsp;hasCloseButton)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;base(id,&nbsp;position,&nbsp;contentHtml,&nbsp;width,&nbsp;height,&nbsp;autoPan,&nbsp;hasCloseButton)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[JsonMember(MemberName&nbsp;=&nbsp;"popupType")]  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;override&nbsp;string&nbsp;PopupType  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;get  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;"CloudPopup";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;  
}  
&nbsp;  
Thanks,  
Khalil

---

<div class="post-metadata">

**Author:** ![Anil2](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/a/7feea3/32.png) [@Anil2](https://community.thinkgeo.com/u/Anil2)\
**Post date:** [November 22, 2010, 11:32am UTC](https://community.thinkgeo.com/t/how-to-use-cloudpopup-like-popup-for-marker/5565/3 "2010-11-22T11:32:51Z")

</div>

Hi&nbsp;Khalil,&nbsp;  
&nbsp;&nbsp;  
&nbsp;Thanks.&nbsp;Custom&nbsp;CloudPopup&nbsp;works.&nbsp;&nbsp;  
&nbsp;However&nbsp;the&nbsp;settings&nbsp;for&nbsp;BackgroundColor&nbsp;and&nbsp;BorderColor&nbsp;etc&nbsp;do&nbsp;not&nbsp;work.&nbsp;  
&nbsp;&nbsp;  
&nbsp;Regards,&nbsp;  
&nbsp;Anil

---

<div class="post-metadata">

**Author:** ![Khalil](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/k/bc8723/32.png) [@Khalil](https://community.thinkgeo.com/u/Khalil)\
**Post date:** [November 22, 2010, 8:12pm UTC](https://community.thinkgeo.com/t/how-to-use-cloudpopup-like-popup-for-marker/5565/4 "2010-11-22T20:12:18Z")

</div>

&nbsp;

Hi,&nbsp;Anil  
Yes,&nbsp;the&nbsp;most&nbsp;of&nbsp;settings&nbsp;for&nbsp;CustomPopup&nbsp;can’t&nbsp;work,&nbsp;that’s&nbsp;why&nbsp;it’s&nbsp;called&nbsp;custom&nbsp;popup.  
As&nbsp;for&nbsp;CloudPopup,&nbsp;and&nbsp;we&nbsp;construct&nbsp;it&nbsp;with&nbsp;different&nbsp;portions&nbsp;of&nbsp;background&nbsp;image&nbsp;of&nbsp;cloud\_popup\_relative&nbsp;which&nbsp;you&nbsp;can&nbsp;find&nbsp;in&nbsp;the&nbsp;folder&nbsp;of&nbsp;“theme\default\img”.&nbsp;So&nbsp;the&nbsp;BackgroundColor&nbsp;and&nbsp;BorderColor&nbsp;properties&nbsp;don’t&nbsp;make&nbsp;sense&nbsp;for&nbsp;it.  
Thanks,  
Khalil