ThinkGeo.com    |     Documentation    |     Premium Support

Popup / tooltip

#1

Hi,

I have a code where i get the location from a server and also some information. I used to use a pointstyle and textstyle to display it. but my requirement is to display a point and when hovered on that point i need the information on the popup. I am new to mvc and mapsuite. 

The code i have for placing point is as follows: 




[MapActionFilter]
public void RefreshMarkerOverlayss(Map map, Collection<object> args)
        {
            List<incident> positions = new List<incident>();
            if (map != null)
            {
                TextStyle txtStyle = new TextStyle("Name", new GeoFont("Arial", 9), new GeoSolidBrush(new GeoColor(51, 155, 51)));
                txtStyle.SuppressPartialLabels = false;
                PointStyle ps = new PointStyle(PointSymbolType.Circle, new GeoSolidBrush(new GeoColor(255, 0, 0)), 10);
 
 
                //List<double> position = new List<double>();
                using (WebClient webClient = new WebClient())
                {
                    string dwml;
                    dwml = webClient.DownloadString(ServiceUri + "GetAllOpenIncidents/");
                    // position = JsonConvert.DeserializeObjectAsync
<list<double>>(dwml).Result;

                    positions = JsonConvert.DeserializeObjectAsync
<list<incident>>(dwml).Result;

 
                }
 
                int sizes = positions.Count;
                int j;
 
                var overLay = map.CustomOverlays["TOverLay"] as LayerOverlay;
                InMemoryFeatureLayer inMemoryLayer2 = overLay.Layers[1] as InMemoryFeatureLayer;
 
 
                inMemoryLayer2.InternalFeatures.Clear();
                for (j = 0; j < sizes; j++)
                {
 
                    double x = positions[j].incidentPointLocationX;
                    double y = positions[j].incidentPointLocationY;
                    //double y = Double.Parse(positions[j + 3].ToString());
                    string z = positions[j].incidentPointName;
                    //string a = ". " + (string)positions[j+ 1];
 
 
                 
                    PointShape Radarpoints = new PointShape(x, y);
                    Feature f2 = new Feature(new PointShape(x, y));
                    f2.ColumnValues["Name"] = z;
                    inMemoryLayer2.InternalFeatures.Add(f2);
 
                }

I want a similar code for popup.





Thanks

#2

Hi Vidz, 
  
 Here we have a code as below shows how to add popup when you click on map, you just need add a special InMemoryMarkerOverlay in map and put all your popup into it. 
  
 

 InMemoryMarkerOverlay markerOverlay = new InMemoryMarkerOverlay(“MarkerOverlay”);
            markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage.ImageWidth = 21;
            markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage.ImageHeight = 25;
            markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage.ImageOffsetX = -10.5f;
            markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage.ImageOffsetY = -25f;
            markerOverlay.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
            map.CustomOverlays.Add(markerOverlay);

 
  
 
[MapActionFilter]
        public void ClickEvent(Map map, GeoCollection<object> args)
        {
            PointShape position = new PointShape(Convert.ToDouble(args[0]), Convert.ToDouble(args[1]));

            InMemoryMarkerOverlay markerOverlay = (InMemoryMarkerOverlay)map.CustomOverlays[“MarkerOverlay”];
            markerOverlay.FeatureSource.InternalFeatures.Add(“marker” + Guid.NewGuid().ToString(), new Feature(position));

            CloudPopup samplePopup = new CloudPopup(“samplePopup” + args[0].ToString(), position, “abc”, 50, 50);
            samplePopup.AutoSize = true;
            samplePopup.AutoPan = true;
            samplePopup.HasCloseButton = true;            
            map.Popups.Add(samplePopup);            
        }
 
  
 Wish that’s helpful. 
  
 Regards, 
  
 Don

#3

Hi Vidz,  
  
 Here we have a code as below shows how to add popup when you click on map, you just need add a special InMemoryMarkerOverlay in map and put all your popup into it.  
  
 InMemoryMarkerOverlay markerOverlay = new InMemoryMarkerOverlay(“MarkerOverlay”); 
             markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage.ImageWidth = 21; 
             markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage.ImageHeight = 25; 
             markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage.ImageOffsetX = -10.5f; 
             markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage.ImageOffsetY = -25f; 
             markerOverlay.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; 
             map.CustomOverlays.Add(markerOverlay); 
  
 
[MapActionFilter]
        public void ClickEvent(Map map, GeoCollection<object> args)
        {
            PointShape position = new PointShape(Convert.ToDouble(args[0]), Convert.ToDouble(args[1]));

            InMemoryMarkerOverlay markerOverlay = (InMemoryMarkerOverlay)map.CustomOverlays[“MarkerOverlay”];
            markerOverlay.FeatureSource.InternalFeatures.Add(“marker” + Guid.NewGuid().ToString(), new Feature(position));

            CloudPopup samplePopup = new CloudPopup(“samplePopup” + args[0].ToString(), position, “abc”, 50, 50);
            samplePopup.AutoSize = true;
            samplePopup.AutoPan = true;
            samplePopup.HasCloseButton = true;            
            map.Popups.Add(samplePopup);            
        }

  
 Wish that’s helpful.  
  
 Regards,  
  
 Don

#4

Hi, 
  
 In the sample code, we pass coordinate back from client side, but in your scenario, you will get them from your service. 
  
 So please modify the code for make it works for your project. 
  
 Regards, 
  
 Don

#5

Hi Vidz,  
  
 Here we have a code as below shows how to add popup when you click on map, you just need add a special InMemoryMarkerOverlay in map and put all your popup into it.  
  
  
InMemoryMarkerOverlay markerOverlay = new InMemoryMarkerOverlay(“MarkerOverlay”); 
markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage.ImageWidth = 21; 
markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage.ImageHeight = 25; 
markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage.ImageOffsetX = -10.5f; 
markerOverlay.ZoomLevelSet.ZoomLevel01.DefaultMarkerStyle.WebImage.ImageOffsetY = -25f; 
markerOverlay.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20; 
map.CustomOverlays.Add(markerOverlay); 


[MapActionFilter]
        public void ClickEvent(Map map, GeoCollection<object> args)
        {
            PointShape position = new PointShape(Convert.ToDouble(args[0]), Convert.ToDouble(args[1]));

            InMemoryMarkerOverlay markerOverlay = (InMemoryMarkerOverlay)map.CustomOverlays[“MarkerOverlay”];
            markerOverlay.FeatureSource.InternalFeatures.Add(“marker” + Guid.NewGuid().ToString(), new Feature(position));

            CloudPopup samplePopup = new CloudPopup(“samplePopup” + args[0].ToString(), position, “abc”, 50, 50);
            samplePopup.AutoSize = true;
            samplePopup.AutoPan = true;
            samplePopup.HasCloseButton = true;            
            map.Popups.Add(samplePopup);            
        }
 
   
 In the sample code, we pass coordinate back from client side, but in your scenario, you should want to get them from your web service.  
  
 So please modify the code for make it works for your project. Wish it’s helpful.  
  
 Regards,  
  
 Don

#6







Thanks for the reply Don.

I added the code you mentioned. popups were not being displayed. But when I debug, all the lines of the code are being hit. Is something in the client code missing? I mean anything else to be added specially to make popup appear apart from the code added below?



Map1.ajaxCallAction('@ViewContext.RouteData.Values["Controller"].ToString()', 'ClickEvent', {}, function (result) {
           Map1.redrawLayer("TargetOverLay");





Thanks.

#7

Hi Vidz, 
  
 Please download our HowDoISamples and find the sample AddAClickEvent, I think that’s should be very helpful for your scenario. 
  
 Regards, 
  
 Don

#8

Hi Don, 

I could load a popup on click. I have used CloudPopup. I wanted to change the background color of the popup and also need to change the font style. Can you let me know where can I add these things… Right now background is somewhat white







Thanks

#9

Hi Vidz, 
  
 For the background color I think this topic should be helpful: thinkgeo.com/forums/MapSuite/tabid/143/aft/8421/Default.aspx 
  
 For the font, I think that should related with ContentHtml, the code sample as below should be helpful: 
  
  
   CloudPopup popup = new CloudPopup();
            popup.HasCloseButton = true;            
            popup.AutoPan = true;            
            popup.AutoSize = true;
            popup.Position = map.CurrentExtent.GetCenterPoint();
            popup.ContentHtml = “<font size=‘16’ face=‘Verdana’>This is a sample.</font>”;

            map.Popups.Add(popup);
 
  
 Regards, 
  
 Don