Overlay transparent bg PNG on top of RadMap

[James]

How can I overlay a transparent PNG on top of a RadMap (ESRI shapefile source) and have the shape mouse events trigger while it is underneath the overlaid image?

(Hint: I am overlaying a transparent PNG with labels for a US state's counties, which need to be rotated and such to fit the county shapes - hard to do with normal layer labels - my map is not zoomable, it is of a fixed size, I disabled zooming)

As you can imagine, many of the odd county shapes have geo centers that are actually living within another county's shape...makes it tough, so I thought of this approach.

[Andrey]

Hi James,

It depends on what your goals are . If you want to simply have the same tooltip shown when the mouse is over the PNG image, then you can use the following technique:

private void ReassginTooltip()
{
    Location imageLocation = MapLayer.GetLocation(this.image);
    IEnumerable<object> items = this.informationLayer.GetItemsInLocation(imageLocation);
    foreach (object item in items)
    {
        MapShape shape = item as MapShape;
        if (shape != null)
        {
            object shapeTooltip = ToolTipService.GetToolTip(shape);
            if (shapeTooltip != null)
            {
                ToolTipService.SetToolTip(image, shapeTooltip);
            }
            break;
        }
    }
}

If you need specific mouse event handler operates on both map shape and image, then you should assign the same event handler to both map shape and image:

polygon.MouseLeftButtonUp += new MouseButtonEventHandler(this.PolygonMouseLeftButtonUp);
image.MouseLeftButtonUp += new MouseButtonEventHandler(this.PolygonMouseLeftButtonUp);

Greetings,
Andrey Murzov
the Telerik team

[James]

Thanks! The first method looks good. Will that show the tip for each shape as I roll over them even though the image is "above" the map? The image is just a way to show really clean, well-placed labels for the shapes.

[James]

Okay. That did not work. I'm probably not being clear at all about what my problem is. Here's the dilemma:

I have a shapefile of Pennsylvania and all its counties (all shapes). I have a single transparent background PNG, which I have placed in the same grid box as the map so that it overlays it. The PNG only contains text labels for the counties that I have placed  so that they are easily readable. What I want is for the normal shape (each county is a shape) mouseovers to keep working  even with the single image overlaid on the map.

[James]

Now, the other thought I had was to add an InformationLayer with the image as its background, but that also seems to grab all the mouse movement and block the county shapes tooltips from  working:

<telerik:InformationLayer x:Name="ImgLayer" Width="570" Height="373">
    <Image x:Name="imgLabels" Source="Data/PA-County-Labels.png" Grid.Row="2" OpacityMask="#FFFFFFFF" />
</telerik:InformationLayer>

[Andrey]

Hi James,

This is a kind of scenario which we didn't consider when developing our control. As you know the events aren’t routed to the sibling elements automatically in the WPF (in your case map shapes and image are sibling elements since they are children of one information layer). So it requires some additional internal functionality which our control has not in WPF version. We, actually, added necessary functionality already and it will be available in the nearest internal build.

Having in mind this additional functionality you will be able to use the following code to show tooltips for map shapes overlapped by image:

image.MouseMove += new MouseEventHandler(image_MouseMove);


private void image_MouseMove(object sender, MouseEventArgs e)
{
    Image image = sender as Image;
    MapShape shape = this.GetShapeAtMouseLocation(e);
    if (shape != null)
    {
        ToolTip tooltip = ToolTipService.GetToolTip(shape) as ToolTip;
        this.ShowTooltip(image, tooltip);
    }
    else
    {
        this.HideTootip(image);
    }
}

private MapShape GetShapeAtMouseLocation(MouseEventArgs e)
{
    MapShape shape = null;

    Point point = e.GetPosition(this.radMap);
    Location location = Location.GetCoordinates(this.radMap, point);

    IEnumerable<object> items = this.informationLayer.GetItemsInLocation(location);
    foreach (object item in items)
    {
        MapShape itemShape = item as MapShape;
        if (itemShape != null)
        {
            shape = itemShape;
            break;
        }
    }

    return shape;
}

private void ShowTooltip(FrameworkElement element, ToolTip tooltip)
{
    element.ToolTip = tooltip;
    if (tooltip != null)
    {
        tooltip.PlacementTarget = element;
        tooltip.IsOpen = true;
    }
}

private void HideTootip(FrameworkElement element)
{
    if (element.ToolTip != null)
    {
        ToolTip tooltip = element.ToolTip as ToolTip;
        if (tooltip != null)
        {
            tooltip.IsOpen = false;
            element.ToolTip = null;
        }
    }
}

All the best,
Andrey Murzov
the Telerik team