Map with pin point locations

4 posts, 0 answers
  1. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 24 Oct 2011 Link to this post

    Hello, can someone provide me a sample with a map of the USA with pinpoints, and when clicking on a pinpoint, it will display information?

    Thanks..
  2. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 26 Oct 2011 Link to this post

    I am using the open street map provider.  I can display the map, but I want to display a push pin on a location (for example, new jersey) and when the push pin is pressed, display some information.

    My code is below.  If someone can tell me how to add that logic to my existing code, that would be great.

    My XAML:

    <

     

     

    UserControl x:Class="AdmMap.MainPage"

     

     

     

     

     

     

     

     

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

     

     

     

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

     

     

     

     

     

     

     

     

    xmlns:example="clr-namespace:AdmMap.Shapefile"

     

     

     

     

     

     

     

     

    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

     

     

     

     

     

     

     

     

    HorizontalAlignment="Center" VerticalAlignment="Center">

     

     

     

     

     

     

     

     

    <UserControl.Resources>

     

     

     

     

     

     

     

     

    <example:ShapefileViewModel x:Key="DataContext" Region="USA/usa_states" />

     

     

     

     

     

     

     

     

    <DataTemplate x:Key="PointOfInterestTemplate">

     

     

     

     

     

     

     

     

    <Grid x:Name="TopLevelGrid" Width="Auto" Height="Auto" telerik:MapLayer.Location="{Binding Path=Location}">

     

     

     

     

     

     

     

     

    <ToolTipService.ToolTip>

     

     

     

     

     

     

     

     

    <ToolTip>

     

     

     

     

     

     

     

     

    <ToolTip.Content>

     

     

     

     

     

     

     

     

    <Grid x:Name="PopupGrid">

     

     

     

     

     

     

     

     

    <Grid.RowDefinitions>

     

     

     

     

     

     

     

     

    <RowDefinition Height="Auto" />

     

     

     

     

     

     

     

     

    <RowDefinition Height="Auto" />

     

     

     

     

     

     

     

     

    <RowDefinition Height="Auto" />

     

     

     

     

     

     

     

     

    </Grid.RowDefinitions>

     

     

     

     

     

     

     

     

    <TextBlock Grid.Row="0" FontFamily="Tahoma" FontSize="12" FontWeight="Bold"

     

     

     

     

     

     

     

     

    Text="{Binding Path=Title}" />

     

     

     

     

     

     

     

     

    <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="10,10,10,10">

     

     

     

     

     

     

     

     

    <Image x:Name="ImagePortion1" Height="Auto" Width="Auto" Source="{Binding Path=ImageSource1}" />

     

     

     

     

     

     

     

     

    <TextBlock x:Name="TextPortion1" VerticalAlignment="Center" Text="{Binding Path=ImageLabel1}" Padding="5,5,5,5" />

     

     

     

     

     

     

     

     

    </StackPanel>

     

     

     

     

     

     

     

     

    <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="10,10,10,10">

     

     

     

     

     

     

     

     

    <Image x:Name="ImagePortion2" Height="Auto" Width="Auto" Source="{Binding Path=ImageSource2}" />

     

     

     

     

     

     

     

     

    <TextBlock x:Name="TextPortion2" VerticalAlignment="Center" Text="{Binding Path=ImageLabel2}" Padding="5,5,5,5" />

     

     

     

     

     

     

     

     

    </StackPanel>

     

     

     

     

     

     

     

     

    </Grid>

     

     

     

     

     

     

     

     

    </ToolTip.Content>

     

     

     

     

     

     

     

     

    </ToolTip>

     

     

     

     

     

     

     

     

    </ToolTipService.ToolTip>

     

     

     

     

     

     

     

     

    <Image x:Name="MapIcon" Stretch="Fill" Source="{Binding Path=MapIconSource}" />

     

     

     

     

     

     

     

     

    </Grid>

     

     

     

     

     

     

     

     

    </DataTemplate>

     

     

     

     

     

     

     

     

    </UserControl.Resources>

     

     

     

     

     

     

     

     

    <Grid x:Name="LayoutRoot" Width="784" Height="484">

     

     

     

     

     

     

     

     

    <telerik:RadMap x:Name="RadMap1"

     

     

     

     

     

     

     

     

    Background="#D9E1FF"

     

     

     

     

     

     

     

     

    BorderBrush="Black"

     

     

     

     

     

     

     

     

    BorderThickness="1"

     

     

     

     

     

     

     

     

    UseDefaultLayout="False"

     

     

     

     

     

     

     

     

    MouseClickMode="None"

     

     

     

    MouseDoubleClickMode="None"

     

     

     

     

     

     

     

     

    ZoomLevel="4"

     

     

     

     

     

     

     

     

    Center="36.8174363084084, -97.3212482126264"

     

     

     

     

     

     

     

     

    MinZoomLevel="4"

     

     

     

    MaxZoomLevel="5">

     

     

     

     

     

     

     

     

    <telerik:RadMap.Provider>

     

     

     

     

     

     

     

     

    <telerik:OpenStreetMapProvider/>

     

     

     

     

     

     

     

     

    </telerik:RadMap.Provider>

     

     

     

     

     

     

     

     

    <telerik:InformationLayer x:Name="InformationLayer" ItemTemplate="{StaticResource PointOfInterestTemplate}" Loaded="InformationLayer_Loaded">

     

     

     

     

     

     

     

     

    <telerik:InformationLayer.Reader>

     

     

     

     

     

     

     

     

    <telerik:MapShapeReader Source="{Binding Source={StaticResource DataContext}, Path=ShapefileSourceUri}"

     

     

     

    DataSource="{Binding Source={StaticResource DataContext}, Path=ShapefileDataSourceUri}"

     

     

     

     

     

     

     

     

    ToolTipFormat="STATE_NAME" />

     

     

     

     

     

     

     

     

    </telerik:InformationLayer.Reader>

     

     

     

     

     

     

     

     

    <telerik:InformationLayer.ShapeFill>

     

     

     

     

     

     

     

     

    <telerik:MapShapeFill Fill="#FFF7DE" Stroke="#5A636B" StrokeThickness="1" />

     

     

     

     

     

     

     

     

    </telerik:InformationLayer.ShapeFill>

     

     

     

     

     

     

     

     

    <telerik:InformationLayer.HighlightFill>

     

     

     

     

     

     

     

     

    <telerik:MapShapeFill Fill="#F7E7BD" Stroke="#5A636B" StrokeThickness="1" />

     

     

     

     

     

     

     

     

    </telerik:InformationLayer.HighlightFill>

     

     

     

     

     

     

     

     

    </telerik:InformationLayer>

     

     

     

     

     

     

     

     

    </telerik:RadMap>

     

     

     

     

     

     

     

     

    </Grid>

     

    </

     

     

    UserControl>

     


    My Code Behind:

     

     

     

    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;

     

     

     

     

     

    using

     

     

    System.Windows.Media.Imaging;

     

     

     

     

     

    using

     

     

    System.Collections.ObjectModel;

     

     

     

     

     

    namespace

     

     

    AdmMap

     

    {

     

     

    public partial class MainPage : UserControl

     

     

     

     

     

     

    {

     

     

    private void InformationLayer_Loaded(object sender, RoutedEventArgs e)

     

    {

    }

     

     

    public MainPage()

     

    {

    InitializeComponent();

    }

     

     

    private ObservableCollection<MapItem> GetMapData()

     

    {

     

     

    ObservableCollection<MapItem> data = new ObservableCollection<MapItem>();

     

    data.Add(

     

    new MapItem("New Jersey", new Location(39.9348, -75.0307), 5, new ZoomRange(5, 12)));

     

     

     

    return data;

     

    }

     

     

    private void Pushpin_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

     

    {

    }

     

     

    private void radMap_InitializeCompleted(object sender, EventArgs e)

     

    {

     

     

    this.InformationLayer.ItemsSource = GetMapData();

     

    }

     

     

    private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

     

    {

    }

     

    }

    }


    MapItem Class:

    using

     

     

    System.Windows;

     

    using

     

     

    System.Windows.Controls;

     

    using

     

     

    System.Windows.Documents;

     

    using

     

     

    System.Windows.Ink;

     

    using

     

     

    System.Windows.Input;

     

    using

     

     

    System.Windows.Media;

     

    using

     

     

    System.Windows.Media.Animation;

     

    using

     

     

    System.Windows.Shapes;

     

    using

     

     

    Telerik.Windows.Controls.Map;

     

    namespace

     

     

    AdmMap

     

    {

     

     

    public class MapItem

     

    {

     

     

    public MapItem(string caption, Location location, double baseZoomLevel, ZoomRange zoomRange)

     

    {

     

     

    this.Caption = caption;

     

     

     

    this.Location = location;

     

     

     

    this.BaseZoomLevel = baseZoomLevel;

     

     

     

    this.ZoomRange = zoomRange;

     

    }

     

     

    public string Caption

     

    {

     

     

    get;

     

     

     

    set;

     

    }

     

     

    public Location Location

     

    {

     

     

    get;

     

     

     

    set;

     

    }

     

     

    public double BaseZoomLevel

     

    {

     

     

    get;

     

     

     

    set;

     

    }

     

     

    public ZoomRange ZoomRange

     

    {

     

     

    get;

     

     

     

    set;

     

    }

    }

    }




    My ShapefileViewModel class:

    using

     

     

    System;

     

    using

     

     

    Telerik.Windows.Controls;

     

    namespace

     

     

    AdmMap.Shapefile

     

    {

     

     

    public class ShapefileViewModel : ViewModelBase

     

    {

    #if

     

     

    SILVERLIGHT

     

     

     

    protected const string ShapeRelativeUriFormat = "DataSources/Geospatial/{0}.{1}";

     

    #else

    protected const string ShapeRelativeUriFormat = "/Map;component/Resources/{0}.{1}";

    #endif

     

     

    protected const string ShapeExtension = "shp";

     

     

     

    protected const string DbfExtension = "dbf";

     

     

     

    private string _region;

     

     

     

    private Uri _shapefileSourceUri;

     

     

     

    private Uri _shapefileDataSourceUri;

     

     

     

    public ShapefileViewModel()

     

    {

     

     

    this.PropertyChanged += this.ShapefileViewModelPropertyChanged;

     

    }

     

     

    public string Region

     

    {

     

     

    get

     

    {

     

     

    return this._region;

     

    }

     

     

    set

     

    {

     

     

    if (this._region != value)

     

    {

     

     

    this._region = value;

     

     

     

    this.OnPropertyChanged("Region");

     

    }

    }

    }

     

     

    public Uri ShapefileSourceUri

     

    {

     

     

    get

     

    {

     

     

    return this._shapefileSourceUri;

     

    }

     

     

    set

     

    {

     

     

    if (this._shapefileSourceUri != value)

     

    {

     

     

    this._shapefileSourceUri = value;

     

     

     

    this.OnPropertyChanged("ShapefileSourceUri");

     

    }

    }

    }

     

     

    public Uri ShapefileDataSourceUri

     

    {

     

     

    get

     

    {

     

     

    return this._shapefileDataSourceUri;

     

    }

     

     

    set

     

    {

     

     

    if (this._shapefileDataSourceUri != value)

     

    {

     

     

    this._shapefileDataSourceUri = value;

     

     

     

    this.OnPropertyChanged("ShapefileDataSourceUri");

     

    }

    }

    }

     

     

    private void ShapefileViewModelPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)

     

    {

     

     

    if (e.PropertyName == "Region")

     

    {

     

     

    this.ShapefileSourceUri = new Uri(string.Format(ShapeRelativeUriFormat, this.Region, ShapeExtension), UriKind.Relative);

     

     

     

    this.ShapefileDataSourceUri = new Uri(string.Format(ShapeRelativeUriFormat, this.Region, DbfExtension), UriKind.Relative);

     

    }

    }

    }

    }

  3. DevCraft banner
  4. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 27 Oct 2011 Link to this post

    Hello Michael,

    I have attached a sample solution which displays additional information when clicking the point. I hope it helps.

    Best wishes,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  5. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 27 Oct 2011 Link to this post

    Thank you!
Back to Top