This is a migrated thread and some comments may be shown as answers.

InformationLayer Redesign

6 Answers 98 Views
Map
This is a migrated thread and some comments may be shown as answers.
invDev
Top achievements
Rank 1
invDev asked on 24 Nov 2010, 04:38 PM
Hey,

as I saw in the Changelog, the map information layer was redesigned. I've been using the map control by adding a custom user control to the information layer and setting its MapLayer.LocationProperty to a Location object. I also tried to use the InformationLay.LocationProperty. None of both work after updating the Controls. 

This is the simple code snippet, 

Location actLoc = new Location(lat, lon);
 
PosMapPin actPin = new PosMapPin(actPos);
 
this.PosLayer.Items.Add(actPin);



Is there any possibility to use a technique like this with the new version? Kind regards and thanks for your help, Jonas

6 Answers, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 29 Nov 2010, 07:25 AM
Hi Jonas,

You can use the same technique to position elements over the map. You didn’t provide any information about PosMapPin control and its code, so I couldn’t test it. But I’ve created a simple application which positions a user control over the map. Here it is a code for my MapPinControl and MainPage (it works fine):

<UserControl x:Class="AddUserControlToInfoLayer.MapPinControl"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Width="50" Height="50">
      
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Path Fill="Red">
            <Path.Data>
                <GeometryGroup>
                    <EllipseGeometry Center="25,25" RadiusX="25" RadiusY="25" />
                    <EllipseGeometry Center="25,25" RadiusX="12" RadiusY="12" />
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls.Map;
  
namespace AddUserControlToInfoLayer
{
    public partial class MapPinControl : UserControl
    {
        public MapPinControl(Location location)
        {
            InitializeComponent();
  
            HotSpot hotspot = new HotSpot()
            {
                X = 0.5,
                Y = 0.5
            };
  
            MapLayer.SetHotSpot(this, hotspot);
            MapLayer.SetLocation(this, location);
        }
    }
}

<UserControl x:Class="AddUserControlToInfoLayer.MainPage"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="500" d:DesignWidth="600">
  
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMap x:Name="radMap" 
                        Center="0,0"
                        ZoomLevel="1">
            <telerik:RadMap.Provider>
                <telerik:OpenStreetMapProvider />
            </telerik:RadMap.Provider>
            <telerik:InformationLayer x:Name="informationLayer" />
        </telerik:RadMap>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls.Map;
  
namespace AddUserControlToInfoLayer
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
  
            Location pinLocation = new Location(0, 0);
            MapPinControl pin = new MapPinControl(pinLocation);
            this.informationLayer.Items.Add(pin);
        }
    }
}


Greetings,
Andrey Murzov
the Telerik team
Browse the videos here>> to help you get started with RadControls for Silverlight
0
invDev
Top achievements
Rank 1
answered on 01 Dec 2010, 01:05 PM
Hi, 

your example is really close to our scenario. I just forgott to post one crucial line of code in which I set the Location Property of the custom Pin like this:

actPin.SetValue(MapLayer.LocationProperty, actLoc);

I tried your example as well and with both techniques all pin points are located in the top left corner of the map (which I did not see at first). 

This is how the map control is implemented in xaml:

<telerik:RadMap
Visibility="Visible"
Canvas.ZIndex="100"
x:Name="PosMap"
CommandBarVisibility="Visible"
DistanceUnit="Kilometer"
NavigationVisibility="Visible"
ScaleVisibility="Visible"
UseSpringAnimations="True"
ZoomBarVisibility="Visible"
ZoomBarPresetsVisibility="Collapsed"
MouseLocationIndicatorVisibility="Collapsed"
Center="50.7871,9.6814"
ZoomLevel="5">
    <telerik:RadMap.Provider>
        <telerikMapping:BingMapProvider x:Name="PosMapProvider"></telerikMapping:BingMapProvider>
    </telerik:RadMap.Provider>               
    <telerik:InformationLayer Name="PosLayer" Canvas.ZIndex="110"></telerik:InformationLayer>
</telerik:RadMap>

So, all PinPoint are rendered, but all in the same place. 

Greeting, Jonas
0
Accepted
Andrey
Telerik team
answered on 03 Dec 2010, 03:18 PM
Hi,

The code I've posted there is from a working solution. It works fine on our side, so we can't reproduce the problem. Could you, please, create and provide us with small solution which we could use to reproduce your problem?

Greetings,
Andrey Murzov
the Telerik team
Browse the videos here>> to help you get started with RadControls for Silverlight
0
invDev
Top achievements
Rank 1
answered on 14 Dec 2010, 12:01 PM
Hey,

I was able to figure our problem with your sample code. Our XAML code of the pintpoint is using a canvas inside the outer grid, which i need for proper positioning of the pin elements. This is the code: 

<UserControl x:Class="PV.UI.Controls.PosMapPin"
    mc:Ignorable="d">
 
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Canvas Width="20.4183" Height="33.3333" Clip="F1 M 0,0L 20.4183,0L 20.4183,33.3333L 0,33.3333L 0,0" Margin="-10,-33,0,0">
            <Path Width="20.4183" Height="33.3333" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" Fill="#FF878787" Data="F1 M 0,10.2092C 0,13.9067 1.973,17.1362 4.91693,18.9268L 10.2092,33.3333L 15.5022,18.9268C 18.4446,17.1362 20.4183,13.9067 20.4183,10.2092L 20.4183,10.2092C 20.4183,4.57056 15.8471,0 10.2092,0L 10.2092,0C 4.57128,0 0,4.57056 0,10.2092 Z "/>
            <Path Width="19.1537" Height="31.0429" Canvas.Left="0.63269" Canvas.Top="0.630493" Stretch="Fill" Fill="#FFF9F9F9" Data="F1 M 0.63269,10.2092C 0.63269,13.5721 2.35574,16.6296 5.24477,18.3875L 5.45245,18.5151L 5.5207,18.7479L 10.2092,31.6734L 14.8976,18.7479L 14.9651,18.5151L 15.1728,18.3875C 18.0633,16.6296 19.7864,13.5721 19.7864,10.2092L 19.7864,10.2092C 19.7864,4.92731 15.4918,0.630493 10.2092,0.630493L 10.2092,0.630493C 4.92805,0.630493 0.63269,4.92731 0.63269,10.2092 Z "/>
            <Path Width="13.4083" Height="13.4067" Canvas.Left="3.50541" Canvas.Top="3.50543" Stretch="Fill" Fill="#FF9F9F9F" Data="F1 M 3.50541,10.2092C 3.50541,13.9119 6.50719,16.9122 10.2092,16.9122L 10.2092,16.9122C 13.9119,16.9122 16.9137,13.9119 16.9137,10.2092L 16.9137,10.2092C 16.9137,6.50647 13.9119,3.50543 10.2092,3.50543L 10.2092,3.50543C 6.50719,3.50543 3.50541,6.50647 3.50541,10.2092 Z "/>
            <Path Width="11.9619" Height="11.9619" Canvas.Left="4.2286" Canvas.Top="4.22784" Stretch="Fill" Data="F1 M 4.2286,10.2092C 4.2286,13.5128 6.90625,16.1898 10.2092,16.1898L 10.2092,16.1898C 13.5121,16.1898 16.1905,13.5128 16.1905,10.2092L 16.1905,10.2092C 16.1905,6.90558 13.5121,4.22784 10.2092,4.22784L 10.2092,4.22784C 6.90625,4.22784 4.2286,6.90558 4.2286,10.2092 Z ">
                <Path.Fill>
                    <LinearGradientBrush StartPoint="0.499974,1.00001" EndPoint="0.499974,1.53074e-005">
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Color="#FFA70465" Offset="0"/>
                            <GradientStop Color="#FFFF009A" Offset="1"/>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
        </Canvas>
    </Grid>
</UserControl>

This worked well with the previous release. Perhaps, there is an internal problem addind the margins to the pin? What would be the best way to use a bit more complex pinpoint like this?

Thanks for all your help! Jonas

0
invDev
Top achievements
Rank 1
answered on 14 Dec 2010, 12:06 PM
... adding Width and Height to the LayoutRoot Grid instead to the Canvas workes well...
0
Andrey
Telerik team
answered on 17 Dec 2010, 10:34 AM
Hello Jonas,

This is the expected behaviour. To get user control right positioned it must be able to provide its size to the information layer. The Canvas don't force parent container to change its size somehow. So in your first variant user control have been resized to fill whole information layer (according to the common Silverlight rules). When you set precise dimensions on the Grid user control pass right size to the information layer, and control is positioned well.

Greetings,
Andrey Murzov
the Telerik team
Browse the videos here>> to help you get started with RadControls for Silverlight
Tags
Map
Asked by
invDev
Top achievements
Rank 1
Answers by
Andrey
Telerik team
invDev
Top achievements
Rank 1
Share this question
or