none
How to add a Infobox to a Pushpin from the code behind? RRS feed

Answers

  • I have a blog post on this which hasn't yet been released. (Hopefully will be pushed out  in the next month). In any case this is fairly easy to do. Here is a simple code sample:

    <m:Map Credentials="YOUR_BING_MAPS_KEY">
    	<m:Map.Children>
    		<!-- Data Layer-->
    		<m:MapLayer Name="DataLayer"/>
    
    		<!--Common Infobox-->
    		<m:MapLayer>
    			<Grid x:Name="Infobox" Visibility="Collapsed" Margin="0,-115,-15,0">                        
    				<Border Width="300" Height="110" Background="Black" Opacity="0.8" BorderBrush="White" BorderThickness="2" CornerRadius="5"/>
    
    				<StackPanel Height="100" Margin="5">
    					<Grid Height="40">
    						<TextBlock Text="{Binding Title}" FontSize="20" Width="250" TextWrapping="Wrap" HorizontalAlignment="Left" />
    						<Button Content="X" Tapped="CloseInfobox_Tapped" HorizontalAlignment="Right" VerticalAlignment="Top"/>
    					</Grid>
    					<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" MaxHeight="60">
    						<TextBlock Text="{Binding Description}" FontSize="16" Width="290" TextWrapping="Wrap" Height="Auto"/>
    					</ScrollViewer>
    				</StackPanel>
    			</Grid>
    		</m:MapLayer>
    	</m:Map.Children>
    </m:Map>
    

    And then add the following to the code behind:

    public MainPage()
    {
        this.InitializeComponent();
    
        AddPushpin(new Location(47.6035, -122.3294), "Seattle", "Seattle is in the state of Washington. ", DataLayer);
    
        AddPushpin(new Location(51.5063, -0.1271), "London", "London is the capital city of England and the United Kingdom, and the largest city in the United Kingdom.", DataLayer);
    }
    
    private void CloseInfobox_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
    {
        Infobox.Visibility = Visibility.Collapsed;
    }
    
    public void AddPushpin(Location latlong, string title, string description, MapLayer layer)
    {
        Pushpin p = new Pushpin()
        {
            Tag = new Metadata()
            {
                Title = title,
                Description = description
            }
        };
    
        MapLayer.SetPosition(p, latlong);
    
        p.Tapped += PinTapped;
    
        layer.Children.Add(p);
    }
    
    public class Metadata
    {
        public string Title { get; set; }
        public string Description { get; set; }
    }
    
    private void PinTapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
    {
        Pushpin p = sender as Pushpin;
        Metadata m = (Metadata)p.Tag;
    
        //Ensure there is content to be displayed before modifying the infobox control
        if (!String.IsNullOrEmpty(m.Title) || !String.IsNullOrEmpty(m.Description))
        {
            Infobox.DataContext = m;
    
            Infobox.Visibility = Visibility.Visible;
    
            MapLayer.SetPosition(Infobox, MapLayer.GetPosition(p));
        }
        else
        {
            Infobox.Visibility = Visibility.Collapsed;
        }
    }
    


    http://rbrundritt.wordpress.com

    Tuesday, May 14, 2013 2:02 PM

All replies

  • I have a blog post on this which hasn't yet been released. (Hopefully will be pushed out  in the next month). In any case this is fairly easy to do. Here is a simple code sample:

    <m:Map Credentials="YOUR_BING_MAPS_KEY">
    	<m:Map.Children>
    		<!-- Data Layer-->
    		<m:MapLayer Name="DataLayer"/>
    
    		<!--Common Infobox-->
    		<m:MapLayer>
    			<Grid x:Name="Infobox" Visibility="Collapsed" Margin="0,-115,-15,0">                        
    				<Border Width="300" Height="110" Background="Black" Opacity="0.8" BorderBrush="White" BorderThickness="2" CornerRadius="5"/>
    
    				<StackPanel Height="100" Margin="5">
    					<Grid Height="40">
    						<TextBlock Text="{Binding Title}" FontSize="20" Width="250" TextWrapping="Wrap" HorizontalAlignment="Left" />
    						<Button Content="X" Tapped="CloseInfobox_Tapped" HorizontalAlignment="Right" VerticalAlignment="Top"/>
    					</Grid>
    					<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" MaxHeight="60">
    						<TextBlock Text="{Binding Description}" FontSize="16" Width="290" TextWrapping="Wrap" Height="Auto"/>
    					</ScrollViewer>
    				</StackPanel>
    			</Grid>
    		</m:MapLayer>
    	</m:Map.Children>
    </m:Map>
    

    And then add the following to the code behind:

    public MainPage()
    {
        this.InitializeComponent();
    
        AddPushpin(new Location(47.6035, -122.3294), "Seattle", "Seattle is in the state of Washington. ", DataLayer);
    
        AddPushpin(new Location(51.5063, -0.1271), "London", "London is the capital city of England and the United Kingdom, and the largest city in the United Kingdom.", DataLayer);
    }
    
    private void CloseInfobox_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
    {
        Infobox.Visibility = Visibility.Collapsed;
    }
    
    public void AddPushpin(Location latlong, string title, string description, MapLayer layer)
    {
        Pushpin p = new Pushpin()
        {
            Tag = new Metadata()
            {
                Title = title,
                Description = description
            }
        };
    
        MapLayer.SetPosition(p, latlong);
    
        p.Tapped += PinTapped;
    
        layer.Children.Add(p);
    }
    
    public class Metadata
    {
        public string Title { get; set; }
        public string Description { get; set; }
    }
    
    private void PinTapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
    {
        Pushpin p = sender as Pushpin;
        Metadata m = (Metadata)p.Tag;
    
        //Ensure there is content to be displayed before modifying the infobox control
        if (!String.IsNullOrEmpty(m.Title) || !String.IsNullOrEmpty(m.Description))
        {
            Infobox.DataContext = m;
    
            Infobox.Visibility = Visibility.Visible;
    
            MapLayer.SetPosition(Infobox, MapLayer.GetPosition(p));
        }
        else
        {
            Infobox.Visibility = Visibility.Collapsed;
        }
    }
    


    http://rbrundritt.wordpress.com

    Tuesday, May 14, 2013 2:02 PM
  • Dear Richard,

    Your solution works like a charm.

    Many Thanks.

    Regards,

    Jaliya


    Jaliya Udagedara(MCPD,MCSD) http://www.jaliyaudagedara.blogspot.com

    Tuesday, May 14, 2013 3:27 PM