React Navigating Map Content

    Navigation in the IgrGeographicMap control is enabled by default and it allows zooming and panning of the map content. However, this behavior can be changed using the zoomable property. It is important to know that the map allows only synchronized zooming - scaling the map content with preserved aspect ratio. As result, it is not possible to scale the map content vertically without scaling it also horizontally and vice versa.

    React Navigating Map Content Example

    Geographic Coordinates

    You navigate map content within geographic region bound by these coordinates:

    • horizontally from 180°E (negative) to 180°W (positive) longitudes
    • vertically from 85°S (negative) to 85°N (positive) latitudes

    This code snippet shows how navigate the map using geographic coordinates:

    const geoMap = new IgrGeographicMap({ name: "geoMap" });

geoMap.zoomToGeographic({ left: -134.5, top: 16.5, width: 70.0, height: 37.0 });

    Window Coordinates

    Also, you can navigate map content within window rectangle bound by these relative coordinates:

    • horizontally from 0.0 to 1.0 values
    • vertically from 0.0 to 1.0 values

    This code snippet shows how navigate the map using relative window coordinates:

    const geoMap = new IgrGeographicMap({ name: "geoMap" });

geoMap.windowRect = { left: 0.1, top: 0.1, width: 0.5, height: 0.5 };
// or
geoMap.windowPositionHorizontal = 0.1;
geoMap.windowPositionVertical = 0.1;
geoMap.windowScale = 0.5;

    Properties

    The following table summarizes properties that can be used in navigation of the IgrGeographicMap control:

    Property Name Property Type Description
    windowRect Rect Sets new position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values will zoom out the entire map content in the navigation window.
    windowScale number Sets new size of the navigation window in of the map control. It is equivalent smallest value of Width or Height stored in the windowRect property
    windowPositionHorizontal number Sets new horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the windowRect property.
    windowPositionVertical number Sets new vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the windowRect property.
    actualWindowRect Rect Indicates current position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values displays the entire map content in the navigation window.
    actualWindowScale number Indicates current size of the navigation window in of the map control. It is equivalent to smallest value of Width or Height stored in the actualWindowRect property
    actualWindowPositionHorizontal number Indicates current horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the actualWindowRect property.
    actualWindowPositionVertical number Indicates vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the actualWindowRect property.

    API References