How to use CloudPopup like popup for marker?

ThinkGeo UI for Web WebForms
1

Hi Thinkgeo,


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


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


Regards,


Anil



2

 


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

3

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

4

 


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