InformationLayer Redesign

7 posts, 1 answers
  1. invDev
    invDev avatar
    22 posts
    Member since:
    Dec 2009

    Posted 24 Nov 2010 Link to this post

    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
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 29 Nov 2010 Link to this post

    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
  3. DevCraft banner
  4. invDev
    invDev avatar
    22 posts
    Member since:
    Dec 2009

    Posted 01 Dec 2010 Link to this post

    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
  5. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 03 Dec 2010 Link to this post

    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
  6. invDev
    invDev avatar
    22 posts
    Member since:
    Dec 2009

    Posted 14 Dec 2010 Link to this post

    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

  7. invDev
    invDev avatar
    22 posts
    Member since:
    Dec 2009

    Posted 14 Dec 2010 Link to this post

    ... adding Width and Height to the LayoutRoot Grid instead to the Canvas workes well...
  8. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 17 Dec 2010 Link to this post

    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
Back to Top
DevCraft banner