416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
This is the support page for the legacy Dundas Dashboard application. For assistance with the current Dundas BI application please click here.
Dashboard v5.0

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Center the map viewport on a clicked element

Hide navigation
RSS
Modified on Fri, 31 Aug 2012 04:42 PM Categorized as Script Library
&dw; Script LibraryPrevious


This article shows how to center the viewport on a map element (⪚ shape) that is clicked. The zoom level of the map may be adjusted so that the bounds of the map element fits just within the viewport.

Setup

Design a dashboard as follows:

  1. Add a map control to the canvas that displays a world map, for example.
  2. Add a button control to the canvas and set its Text property to Reset.
  3. Add a second button control to the canvas and set its Text property to Canada.
  4. Add a Click interaction script to the map control using Script 1 below.
  5. Add a Click interaction script to the Reset button control using Script 2 below.
  6. Add a Click interaction script to the Canada button control using Script 3 below.
  7. Save, then preview your dashboard.
  8. Test the dashboard:
    • Click on any map shape to center the viewport on that shape.
    • Click the Reset button to reset the viewport back to its default setting, which is to center over all map elements.
    • Click the Canada button to center on the corresponding shape.

Centering the map viewport.

Centering the map viewport.


Script 1 - Map control

Add this script to the map control's Click interaction.

if (e.VisualElementArgs != null) { // Center on the clicked element (e.g. shape). MapControl1.Viewport.Center(e.VisualElementArgs); }

Note: Passing in null to the viewport's Center() method will cause the viewport to be centered over all elements in the map.

Script 2 - Reset button

Add this script to the Reset button control's Click interaction.

// Center over all map elements. MapControl1.Viewport.Center();

Script 3 - Canada button

Add this script to the Canada button control's Click interaction.

// Center on the Canada shape. MapControl1.Viewport.Center(MapControl1.Shapes["Canada"]);

Notes

With the above example, there is a limitation to be aware of. You'll notice that if you click on a country such as the United States or Russia, the map control reverts back to the default view (which shows the entire map). The reason is that these countries have portions of their land mass (possibly islands) that exist on both sides of the International Date Line. The map control does not support displaying both sides of the date line, so it shows the entire width of the map instead.

As an alternative, you can use a helper function to retrieve the extents (similar to a bounding box) of the largest figure in a map shape. This will allow you to center the viewport on just that shape. For example, in the case of the United States, this technique lets you center the viewport on just the continental US (even if you click on Alaska).

To apply this technique, simply replace the Map control script above (Script 1) with the following code instead:

if (e.VisualElementArgs is DashboardMapShape) { MapControl1.Viewport.SetExtents(e.VisualElementArgs.GetLargestFigureExtents()); }

Here is the set of related helper functions which you may find useful:

  • DashboardMapViewport.GetExtents()
  • DashboardMapViewport.SetExtents(Rect) - Used in the above script
  • DashboardMapShape.GetExtents()
  • DashboardMapShape.GetLargestFigureBounds() - Used in the above script

Related topics


About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2014 Dundas Data Visualization, Inc.