Radar Overview

Download a sample VB program that creates a radar overview of a map.

Instructions for Creating the Example:

  1. Start Visual Basic from the Start menu.
  2. Select Standard EXE, and click Open.
  3. Add a second form to your project by clicking on the new form icon:

  1. On the first form, draw one horizontal scroll bar , one vertical scroll bar , and a picture box .

  1. In the picture box, place a graphic using the Picture property in the Properties toolbar. Download the example Canmore map here.  
  2. Resize the picture box to show the entire map.
  3. On the second form, draw one image box and one shape .

  1. In the image box, place the same graphic using the Picture property in the Properties toolbar.
  2. Set the image box's Stretch property to True. The picture inside the image box will now always be the same dimensions as the image box.
  3. Change the Shape property of the Shape to be Rectangle and adjust its BorderWidth to 5.
  4. Here's the code that sets up the location of the objects and their appropriate sizes:

' place this line above your code
Dim ScaleFactor As Integer

Private Sub Form_Load()
    ' set the scale factor of our radar overview
    ScaleFactor = 2

    ' position map in top left corner
    Picture1.Left = 0
    Picture1.Top = 0

    ' resize the main form so not all of the map is shown (or we don't need the overview)
    ' note: Me refers to the current form (ie. Form1 in this case)
    ' note: the properties scalewidth and scaleheight don't include the bar around the window
    ' width includes the border, and height even includes the title bar at the top
 
   Me.ScaleWidth = Picture1.Width / 2
    Me.ScaleHeight = Picture1.Height / 2

    ' position the scroll bars on the outer edges of the window
    HScroll1.Left = 0
    HScroll1.Top = Me.ScaleHeight - HScroll1.Height
    VScroll1.Left = Me.ScaleWidth - VScroll1.Width
    VScroll1.Top = 0

    ' set the scrollable area
    HScroll1.Max = Picture1.Width - Me.ScaleWidth
    VScroll1.Max = Picture1.Height - Me.ScaleHeight

    ' display the second form and scale it
    Form2.Show
    Form2.ScaleWidth = Picture1.Width / ScaleFactor
    Form2.ScaleHeight = Picture1.Height / ScaleFactor
    Form2.Image1.Width = Picture1.Width / ScaleFactor
    Form2.Image1.Height = Picture1.Height / ScaleFactor

    ' size the rectangle to match the viewable area in form1
    Form2.Shape1.Width = Form2.ScaleWidth / ScaleFactor - VScroll1.Width
    Form2.Shape1.Height = Form2.ScaleHeight / ScaleFactor - HScroll1.Height

End Sub

  1. Add this code to the scroll bars so when they scroll, the picture will move:

Private Sub HScroll1_Scroll()
    ' move the picture
    Picture1.Left = -HScroll1.Value
    ' move the rectangle in the overview
    Form2.Shape1.Left = HScroll1.Value / ScaleFactor
    Form2.Shape1.Top = VScroll1.Value / ScaleFactor
End Sub

Private Sub VScroll1_Scroll()
    ' move the picture
    Picture1.Top = -VScroll1.Value
    ' move the rectangle in the overview
    Form2.Shape1.Left = HScroll1.Value / ScaleFactor
    Form2.Shape1.Top = VScroll1.Value / ScaleFactor
End Sub