Labels on a RadMap

3 posts, 0 answers
  1. James
    James avatar
    12 posts
    Member since:
    Jan 2012

    Posted 08 Aug 2014 Link to this post

    Hi,
      I am using a RadMap that depicts a number of physical area around the map that are drawn with MapPolygons.  This works great.  I am trying to put text inside each corner of each MapPolygon to tell users what area they are viewing.  I need the scale of this text to match the map's scale as the user zooms in and out.  I have added labels with a number of approaches, but I always find that they don't scale correctly  when you zoom in.  For example, in the attached file you will see how the text gets very small as you zoom in.  In that file you will also see the way I need the text to look.

     In this example the following code gets executed for each corner in a given MapPolygon that I am trying to label:

                    Grid grid = new Grid();
                    grid.Background = new SolidColorBrush(Colors.White);
                    TextBlock text = new TextBlock();
                    text.Foreground = new SolidColorBrush(Colors.Purple);
                    text.Text = "My Label Data";
                    grid.Children.Add(text);

                    Location newLocation = ... (based on MapPolygon corner)
                    MapLayer.SetLocation(grid, newLocation);
                    this.informationLayer.Items.Add(grid);

      Is there a way to add text to a RadMap and have it keep its location and scale correctly as a user zooms in/out?

    Thanks.

  2. Ludmila
    Ludmila avatar
    4 posts
    Member since:
    Jul 2010

    Posted 26 Aug 2014 in reply to James Link to this post

    Hi James,

    May be I’m a bit late but here it is an example of how we do it in our projects. We use VisualizationLayer instead of Information layer so my sample is based on it (I suppose that you can use the same approach with InformationLayer):

    <telerik:RadMap x:Name="radMap"
                    ZoomLevel="7"
                    Center="44.6957539183824, 25.3327663758679">
        <telerik:RadMap.Provider>
            <telerik:OpenStreetMapProvider />
        </telerik:RadMap.Provider>
        <telerik:VisualizationLayer x:Name="polygons" />
        <telerik:VisualizationLayer x:Name="labels" />
    </telerik:RadMap>

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
     
            PolylineData polyline = new PolylineData()
            {
                ShapeFill = new MapShapeFill()
                {
                    Stroke = new SolidColorBrush(Colors.Red),
                    StrokeThickness = 2
                }
            };
     
            LocationCollection points = new LocationCollection();
            points.Add(new Location(44.6957539183824, 23.3327663758679));
            points.Add(new Location(44.1429369264591, 24.7498095849434));
            points.Add(new Location(44.5131732087098, 27.4611884843576));
            points.Add(new Location(45.2073941930888, 27.9275176988258));
     
            polyline.Points = points;
     
            this.polygons.Items.Add(polyline);
     
            this.AddLabels(points);
        }
     
        private void AddLabels(LocationCollection points)
        {
            foreach (Location point in points)
            {
                Grid grid = new Grid();
                grid.Background = new SolidColorBrush(Colors.White);
                TextBlock text = new TextBlock();
                text.Foreground = new SolidColorBrush(Colors.Purple);
                text.Text = "My Label Data";
                grid.Children.Add(text);
     
                Location newLocation = point;
                MapLayer.SetLocation(grid, newLocation);
                MapLayer.SetBaseZoomLevel(grid, 7);
                this.labels.Items.Add(grid);
            }
        }
    }


    Pay attention, I’m using MapLayer.SetBaseZoomLevel attachable property to make labels resizable when zooming.

    Best Regards
    Ludmila Murzova
  3. UI for WPF is Visual Studio 2017 Ready
  4. James
    James avatar
    12 posts
    Member since:
    Jan 2012

    Posted 27 Aug 2014 in reply to Ludmila Link to this post

    Hi Ludmila,
      Thank you very much.  This is really helpful.

    James
Back to Top