Map with pin point locations

[Michael]

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..

[Michael]

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);

 

}

}

}

}

[Andrey]

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

[Michael]

Thank you!