ThinkGeo.com    |     Blog    |     Wiki    |     Support

Misplaced Marker Popup Tails

When the Marker.Popup content changes between two times that it appears, I sometimes get the popup tail in unexpected locations:
  and  
I am currently using only two markers, so my sample size is small, but when the problem first appears on one marker, it appears on both markers (but not always with the same manifestation). I haven’t been able to determine a particular sequence that causes this to occur other than a change in the height of the popup content. (The content is a Canvas containing a TextBox. I didn’t write that part, so don’t ask me why.) If I perform an action that causes the markers and popups to be recreated, the popup tails then appear as expected.

The popup content is refreshed each time it appears and I do a map refresh right after the popup content is created. Is there something else that is not getting refreshed properly? How do I fix this?

Hi JWhitmire,

It looks we had met this problem before and it should have been fixed this year. I am not sure whether your exception is the same as which we fixed, but it looks the same.

Could you please let us know your detail dll version, your simple test code and what’s the steps to reproduce it if you found the latest dll still have this problem?

Regards,

Don

Oh, yes, I forgot we are still using V6 in this application. There is a registration issue we haven’t yet fixed with Sales to use V9. I will try to re-test with V9.
In the meantime, is there a workaround I can use with V6?

Hi Jwhitmire,

Please let us know your test result. ’

I think we cannot find a workaround, because the 6.0 is so early version and for this bug it looks extension method is not helpful.

Regards,

Don

Well, I thought we were done with this after having upgraded to V9, but alas, we aren’t. The environment is Windows 10, IE 11, Silverlight edition V9.
Today, I happened to cause the marker popup to display when it had more lines of content than usual. A few seconds later, the conditions changed so that the content was the usual line count and I had the popup reappear. This time, the tail was below the balloon, separated from it by a distance equivalent to the difference in the line count.
Experimenting around, I noted these characteristics:
(1) I have never seen a separated tail extending from the top or left of the balloon, only from the bottom or right side.
(2) The popup appears to be “confused” about the location of its associated marker because the tail’s point is no longer on the marker. When the tail extends from the bottom of the balloon, the separation is vertical; when it extends from the right side, the separation is horizontal. Horizontal gaps are much larger than vertical ones.
(3) I have code to adjust the popup’s Offset when the marker is moved close to a map edge. It works great when the tail is correctly connected. When the tail gets misplaced, this code behaves in ways I can’t yet understand. When I move the marker to an edge, it sometimes puts the balloon where it should be, and sometimes doesn’t move the balloon at all.

I’m hoping there is something I can do it the code to reset whatever value is getting corrupted, but what could it be?

Hi Jwhitmire,

About silverlight edition, in fact we had stopped to support it after version 9, and you even cannot find this product in our version 10.

One reason is Microsoft had stopped to support it, the latest version is silverlight 5 (12/9/2011), microsoft suggest use HTML5 instead of it in their blog, here I found a topic posted in 2015 about it: https://blogs.windows.com/msedgedev/2015/07/02/moving-to-html5-premium-media/

But I also want to help you on it, today I tried to open a silverlight sample to reproduce it, it looks our IDE vs2017 cannot open the silverlight project. I think maybe I need to installer a older version IDE.

And I think if you can provide a really simple sample which can reproduce it easily, which should be helpful.

Our developer can look into it based on your sample and see whether we can provide a workaround about it.

Regards,

Ethan

For now, we are stuck with the Silverlight edition. VS 2015 will open a Silverlight project, but will not debug it as well as VS 2010 did. I don’t know if VS 2012 does. For our debug output, we created an IsolatedStorage file to store it and added a menu item to view its contents. Pitiful, but better than guessing.
Below is an excerpt of the code we use to create, position, and show the popup. As for reproducing the problem, I can usually (but not always) cause it by one of these methods, starting with the popup offset to the upper right from the associated marker:

  1. Display the popup with X lines, un-display it, display it with Y lines where Y < X-2. This will often move the tail 20-30 pixels below the popup.
  2. Position the marker to the right edge of the map so the popup positioning code moves it to the left of the marker. The tail is then more than 100 pixels to the right of the marker. I think this occurs only when the popup is below the marker, but that memory is uncertain.

In more careful observation of the behavior, I noticed that a popup offset of (-20,-20) puts the popup in the same location as an offset of (20,-20): to the upper right of the marker. However, larger negative values for the X offset will move it to the left of the marker.
I also noticed that the tail’s point is never coincident with the marker position. It is always offset a little to the opposite side (left/right) from the popup position. The huge horizontal offset mentioned above only occurs when the popup is on the left side; I haven’t seen it when the popup is on the right side.

Code excerpt:

private void newMarker_MouseEnter(object sender, MouseEventArgs e)
{
    var marker = sender as Marker;
    if (marker != null)
    {
        GeneratePopupContent(marker);
        NodeOverlay.Markers.MoveToTop(marker);
        map.Refresh();
    }
}

private void GeneratePopupContent(Marker marker)
{
    // Init the popup itself.
    var popup = marker.Popup;
    popup.Background = new SolidColorBrush(Colors.White);
    popup.HasCloseButton = false;
    // Create the popup's content string
    WcfNodeUnit unit = nodes[(int)marker.Tag]; 
    var content = new StringBuilder("Unit Name: " + unit.Name);
    content.Append("\nIpAddress: " + unit.IPAddress);
    content.Append("\nLAT: " + unit.Latitude.ToString());
    content.Append("\nLONG: " + unit.Longitude.ToString());
    foreach (var relay in unit.RelaySettings.Where(r => r.IsActivated))
        content.AppendFormat("\n{0}: Activated", relay.Name);
    // Put the content in the popup
    var text = new TextBlock();
    text.FontSize = 11d;
    text.Text = content.ToString();
    popup.Height = text.ActualHeight;
    popup.Width = Math.Max(140.0, text.ActualWidth);
    var container = new Canvas();
    container.Children.Add(text);
    popup.Content = container;
    // Determine new offset for the popup. Test its size against the current marker position and map edges.
    // Move the popup to the "other side" if the current setting would put it outside the map area.
    var position = map.ToScreenCoordinate(marker.Popup.Position);
    var y = popup.Offset.Y;
    var x = popup.Offset.X;
    if (position.Y + popup.Height > map.Height) //Check map bottom
        y = 0 - popup.Height; 
    else if (position.Y - (popup.Height + 10) < 0) //Check map top
        y = 20; 

    if (position.X + popup.Width > map.Width) //Check map right edge
        x = 0 - popup.Width; 
    else if (position.X - (popup.Width + 10) < 0) //Check map left edge
        x = 20; 
    popup.Offset = new Point(x, y); //Assign new offset
}

Hi JWhitmire,

We just created the development environment in a new machine, it looks many browsers cannot make Silverlight works again.

We just run our HowDoISamples, and it looks the popup works well even when we drag the map to edge:

Because we cannot reproduce it, so I think the code related with the tail should be helpful.

It looks the tail in the class GeoPopup (marker.Popup) is named popupArrow, and here is how it rendered:

Offset.Y < 0

                popupArrow.Points[0] = new Point(Width * 1 / 3, Height - BorderThickness.Left);
                popupArrow.Points[1] = new Point(Offset.X * -1, Offset.Y * -1);
                popupArrow.Points[2] = new Point(Width * 1 / 2, Height - BorderThickness.Left);

Offset.Y > 0

                popupArrow.Points[0] = new Point(Width * 1 / 3, Offset.Y + BorderThickness.Left);
                popupArrow.Points[1] = new Point(Offset.X * -1, 0);
                popupArrow.Points[2] = new Point(Width * 1 / 2, Offset.Y + BorderThickness.Left);

Which means the position of it related with Width, Height, Offset.X and Offset.Y.

You can adjust the values and call Redraw function to refresh it.

You can also view your ticket to get further information about it.

Regards,

Ethan

Thank you. I got the code sample from the ticket and will work with it.
You say you can’t reproduce it, but the picture you provided shows part of the problem. I assume that the marker icon is positioned such that its point is the Marker.Position. I would expect, then, that the point of the tail would be that same position, not slightly below and to the left of that position. Do you see the tail’s point swap sides when the popup changes sides?

Hi JWhitmire,

Thanks for point that. Because my browser is higher version than our latest version tested it, so I think it should have some problem in original logic, but you can modify them in the class I provided. I think maybe you can try to remove the tail, it looks the mainly problem is from the tail.

Regards,

Ethan

I can’t get that derived class to work. It fails to do things that GeoPopup does correctly. Perhaps Redraw is not the right method to replace since it is only called once and never again.
I need to have the popup redraw every time it appears, because both its Content and its Offset may have changed since the last time it was displayed. The base GeoPopup does. My MouseEnter event handler for the Marker recomputes the Content and the Offset, calls the map’s Refresh method, and the popup displays in its new Offset position with the new Content. I need that behavior to continue. The derived class only needs to give me the ability to correctly recompute the popupArrow points each time the Offset changes.
Since the derived class fails to perform things that the base GeoPopup does correctly, it hints strongly that the derived class is omitting or removing something that should be retained. Maybe the derived class is missing a needed event connection for when the Offset changes. I can’t see inside GeoPopup to know what got left out.

Hi JWhitmire,

Thanks for your update, I think our support will discuss with you in your ticket.

In fact if you are testing the custom class, for make it works well we suggest you try to not draw the tail and it should get better result.

Regards,

Ethan

After a few more exchanges with Don, I was able to fix the tail placement in a derived class. A lot more was required in the derived class than would be expected at first, but it works now. Whew! Problem solved.

Hi JWhitmire,

Thanks for your update, any question please let us know.

Regards,

Ethan