none
how to visible complete UIElement on particular Location within map bounds in windows store app in c#?

    Question

  • how to visible complete UIElement on particular Location within map bounds in windows store app in c#?
    Friday, March 28, 2014 12:38 PM

Answers

  • Are you looking to place grid lines for latitude/longitude? If so take a look at this blog post: http://rbrundritt.wordpress.com/2012/04/04/drawing-grid-lines-in-bing-maps/

    http://rbrundritt.wordpress.com

    Monday, March 31, 2014 10:10 AM
  • If you simply want to place any UIElement above the map at specific location (not a coordinate on the map) then simply wrap the map with a Grid and then place your UIElement after it and position accordingly like so:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <m:Map Name="MyMap" Credentials="YOUR_BING_MAPS_KEY"/>
            
        <StackPanel HorizontalAlignment="Right" VerticalAlignment="Top" Margin="100">
            <Button Content="Sample Button"/>
        </StackPanel>
    </Grid>

    This will add a StackPanel that has a button in it over top the map a 100 pixels away from the top right corner.

    If you want to bind your UIElement to a coordinate on the map so it moves as you pan then add the UIElement to the MapLayer and set it's position using MapLayer.SetPosition


    http://rbrundritt.wordpress.com

    Monday, March 31, 2014 2:36 PM
  • In this scenario I wouldn't link the panel to the location. Instead simple display the panel centered over the map. You can then show and hide the panel using the visibility when a pushpin is clicked. Do something like this and set the content of the infobox based on the metadata for the selected pushpin and show/hide the infobox panel as needed. Do not use the MapLayer.SetPosition on it.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <m:Map Name="MyMap" Credentials="YOUR_BING_MAPS_KEY"/>
            
        <StackPanel Name="Infobox" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="100" Visibility="Collapsed">
            <!-- YOUR Custom Panel -->
        </StackPanel>
    </Grid>


    http://rbrundritt.wordpress.com

    Wednesday, April 02, 2014 9:06 AM
  • Well, if your map is smaller than your panel this simply won't work. The panel will overflow and will be clipped, making it useless. I recommend using a scrollbar for the content and having a fixed size for the panel. Once you have a fixed size for your panel you can do the following to calculate the best position of the map to view your panel:

    1. Take the coordinate (latitude/longitude) of the pushpin and convert it to a pixel using var p1 = map.TryLocationToPixel(coordinate).
    2. Calculate the other four corners of the panel:
      var p2 = new Point(p1.X, p1.Y+panelHeight);
      var p3 = new Point(p1.X + panelWidth, p1.Y+panelHeight);
      var p4 = new Point(p1.X + panelWidth, p1.Y);
    3. Convert these pixels into coordinates using the map.TryPixelsToLocations.
    4. Create a LocationRect from the coordinates.
    5. Use the LocationRect to set the view of the map. This should move the map so your panel is center in the map view while the top left corner is anchored to your pushpin.

    http://rbrundritt.wordpress.com

    Wednesday, April 02, 2014 11:42 AM

All replies

  • Can you provide more information about what you are asking. It's not clear. This sounds like almost every other question you asked about binding an Image to a bounding box. That same process can be used for any UIElement.

    http://rbrundritt.wordpress.com

    Friday, March 28, 2014 2:25 PM
  • thanks , but i need to place grid on map so that how can i visible full grid on map with specific location.
    Monday, March 31, 2014 4:22 AM
  • Are you looking to place grid lines for latitude/longitude? If so take a look at this blog post: http://rbrundritt.wordpress.com/2012/04/04/drawing-grid-lines-in-bing-maps/

    http://rbrundritt.wordpress.com

    Monday, March 31, 2014 10:10 AM

  • No i no need to draw Grid lines, But i want to place Grid / StackPanel UIElement on map with specific location So, which is the solution for how to visible complete Grid / StackPanel on map.
    Monday, March 31, 2014 12:55 PM
  • If you simply want to place any UIElement above the map at specific location (not a coordinate on the map) then simply wrap the map with a Grid and then place your UIElement after it and position accordingly like so:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <m:Map Name="MyMap" Credentials="YOUR_BING_MAPS_KEY"/>
            
        <StackPanel HorizontalAlignment="Right" VerticalAlignment="Top" Margin="100">
            <Button Content="Sample Button"/>
        </StackPanel>
    </Grid>

    This will add a StackPanel that has a button in it over top the map a 100 pixels away from the top right corner.

    If you want to bind your UIElement to a coordinate on the map so it moves as you pan then add the UIElement to the MapLayer and set it's position using MapLayer.SetPosition


    http://rbrundritt.wordpress.com

    Monday, March 31, 2014 2:36 PM
  • i set UIElement to the MapLayer and set it's position using MapLayer.SetPosition but i can not able to see complete UIElement on map so need to see complete UIelement on map with any coOrdinates.
    Tuesday, April 01, 2014 4:12 AM
  • What do you mean you can't see the complete UIElement on the map? Is it too big? By adding it to the map it will be clipped at the edges of the map just like any other item on the map. Can you provide a screenshot of your issue?

    http://rbrundritt.wordpress.com

    Tuesday, April 01, 2014 7:59 AM

  • Wednesday, April 02, 2014 4:24 AM
  • In this scenario I wouldn't link the panel to the location. Instead simple display the panel centered over the map. You can then show and hide the panel using the visibility when a pushpin is clicked. Do something like this and set the content of the infobox based on the metadata for the selected pushpin and show/hide the infobox panel as needed. Do not use the MapLayer.SetPosition on it.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <m:Map Name="MyMap" Credentials="YOUR_BING_MAPS_KEY"/>
            
        <StackPanel Name="Infobox" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="100" Visibility="Collapsed">
            <!-- YOUR Custom Panel -->
        </StackPanel>
    </Grid>


    http://rbrundritt.wordpress.com

    Wednesday, April 02, 2014 9:06 AM
  • thanks , i need to view stackpanel on specific longitude and latitude with complete UI on map.
    Wednesday, April 02, 2014 10:10 AM
  • Well, if your map is smaller than your panel this simply won't work. The panel will overflow and will be clipped, making it useless. I recommend using a scrollbar for the content and having a fixed size for the panel. Once you have a fixed size for your panel you can do the following to calculate the best position of the map to view your panel:

    1. Take the coordinate (latitude/longitude) of the pushpin and convert it to a pixel using var p1 = map.TryLocationToPixel(coordinate).
    2. Calculate the other four corners of the panel:
      var p2 = new Point(p1.X, p1.Y+panelHeight);
      var p3 = new Point(p1.X + panelWidth, p1.Y+panelHeight);
      var p4 = new Point(p1.X + panelWidth, p1.Y);
    3. Convert these pixels into coordinates using the map.TryPixelsToLocations.
    4. Create a LocationRect from the coordinates.
    5. Use the LocationRect to set the view of the map. This should move the map so your panel is center in the map view while the top left corner is anchored to your pushpin.

    http://rbrundritt.wordpress.com

    Wednesday, April 02, 2014 11:42 AM