Adding a Mini Map

In this topic we will link mapMini to mapMain so that the mini-map will follow the center of the main map (but at a wider zoom level). The user will also be able to re-center the main map by clicking on a location in the mini-map.

If the user clicks a point on the mini-map we will re-center the main map on that point. This lets the user quickly move the main map to the area that they want to look at without having to zoom out or pan it manually.

In the Designer add a MouseUp event to mapMini. Switch back to the Code view and add the following code to the MouseUp event:

private void mapMini_MouseUp(object sender, MouseEventArgs e) {
  if (e.Button == MouseButtons.Left) {
    mapMain.Center = mapMini.Center;
    mapMain.Invalidate();
  }
}

Now, when the left mouse button is released on the mini-map, the Center of the main map will be set to the center of the mini-map. We then invalidate the main map, which causes the main map to redraw itself (reflecting the change we just made to its center).

Although the mini-map is typically zoomed out quite a long way, sufficient panning of the main map could cause it to be displaying an area beyond the current view of the mini-map. The Contains(LatLon) method can be used to keep the two maps in sync.

In the Designer View, add a MouseUp event to mapMain. Now, return to the Code view and add the following code to the new event:

private void mapMain_MouseUp(object sender, MouseEventArgs e) {
  if (e.Button == MouseButtons.Left) {
    if (!mapMini.Contains(mapMain.Center)) {
      mapMini.Center = mapMain.Center;
      mapMini.Invalidate(); 
    } 
  }
}