Web Components Navigating Map Content

Navigation in the IgcGeographicMapComponent 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.

Web Components Navigating Map Content Example

EXAMPLE

DATA

TS

HTML

CSS

import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';

export enum MapRegion {
    Caribbean = "Caribbean",
    UnitedStates = "United States",
    UnitedKingdom = "United Kingdom",
    European = "European",
    SouthAfrica = "South Africa",
    Poland = "Poland",
    Australia = "Australia",
    Japan = "Japan",
    Uruguay = "Uruguay",
    Egypt = "Egypt",
    Hawaii = "Hawaii",
}

export class MapUtils {

    public static navigateTo(geoMap: IgcGeographicMapComponent, name: MapRegion): void {

        const geoRect = this.getRegions()[name];
        // console.log("MapUtils " + name) ;
        geoMap.zoomToGeographic(geoRect);
    }

    public static toPixel(num: number): string {
        const s = Math.abs(num).toFixed(0);
        return s + " px";
    }

    public static toLng(num: number): string {
        num = this.clamp(num, -180, 180);

        let s = Math.abs(num).toFixed(1);
        if (num < 100) {
            s = "  " + s
        }

        if (num > 0) {
            return s + "°E";
        } else  {
            return s + "°W";
        }
    }

    public static toLat(num: number): string {
        num = this.clamp(num, -90, 90);

        let s = Math.abs(num).toFixed(1);
        if (num < 100) {
            s = "  " + s
        }

        if (num > 0) {
            return s + "°N";
        } else  {
            return s + "°S";
        }
    }

    public static clamp(num: number, min: number, max: number): number {
        return Math.max(min, Math.min(max, num));
    }

    public static pad(num: number, places?: number): string {
        places = places || 20;
        let s = num.toFixed(1).toString();
        while (s.length < places) {s = " " + s};
        return s;
    }

    public static getBingKey(): string {
        return "Avlo7qsH1zZZI0XNpTwZ4XwvUJmCbd-mczMeUXVAW9kYYOKdmBIVRe8aoO02Xctq";
    }

    public static getRegions(): any {
        // create regions only once
        if (this.Regions === undefined) {
            this.createRegions();
        }
        return this.Regions;
    }

    private static Regions: any;

    private static addRegion(name: string, geoRect: any): void {
        geoRect.name = name;
        geoRect.longitude = geoRect.left + (geoRect.width / 2);
        geoRect.latitude = geoRect.top + (geoRect.height / 2);

        this.Regions[name] = geoRect;
    }

    private static createRegions(): void {
        this.Regions = {};
        this.addRegion(MapRegion.Australia, { left: 81.5, top: -52.0, width: 98.0, height: 56.0 });
        this.addRegion(MapRegion.Caribbean, { left: -92.9, top: 5.4, width: 35.1, height: 25.8 });
        this.addRegion(MapRegion.Egypt, { left: 19.3, top: 19.9, width: 19.3, height: 13.4 });
        this.addRegion(MapRegion.European, { left: -36.0, top: 31.0, width: 98.0, height: 38.0 });
        this.addRegion(MapRegion.Japan, { left: 122.7, top: 29.4, width: 27.5, height: 17.0 });
        this.addRegion(MapRegion.Hawaii, { left: -161.2, top: 18.5, width: 6.6, height: 4.8 });
        this.addRegion(MapRegion.Poland, { left: 13.0, top: 48.0, width: 11.0, height: 9.0 });
        this.addRegion(MapRegion.SouthAfrica, { left: 9.0, top: -37.1, width: 26.0, height: 17.8 });
        this.addRegion(MapRegion.UnitedStates, { left: -134.5, top: 16.0, width: 70.0, height: 37.0 });
        this.addRegion(MapRegion.UnitedKingdom, { left: -15.0, top: 49.5, width: 22.5, height: 8.0 });
        this.addRegion(MapRegion.Uruguay, { left: -62.1, top: -35.7, width: 10.6, height: 7.0 });
    }

}
tsコピー

import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcRectChangedEventArgs } from 'igniteui-webcomponents-core'
import { IgcSeriesViewerComponent } from 'igniteui-webcomponents-charts'
import { ModuleManager } from 'igniteui-webcomponents-core';
import { MapUtils } from './MapUtils';

ModuleManager.register(
    IgcDataChartInteractivityModule,
    IgcGeographicMapModule
);

export class MapNavigation {

    private geoMap: IgcGeographicMapComponent;

    constructor() {
        this.lblGeoTop = document.getElementById('lblGeoTop') as HTMLLabelElement;
        this.lblGeoLeft = document.getElementById('lblGeoLeft') as HTMLLabelElement;
        this.lblGeoHeight = document.getElementById('lblGeoHeight') as HTMLLabelElement;
        this.lblGeoWidth = document.getElementById('lblGeoWidth') as HTMLLabelElement;
        this.lblGeoLongitude = document.getElementById('lblGeoLongitude') as HTMLLabelElement;
        this.lblGeoLatitudes = document.getElementById('lblGeoLatitudes') as HTMLLabelElement;

        this.lblWindowTop = document.getElementById('lblWindowTop') as HTMLLabelElement;
        this.lblWindowLeft = document.getElementById('lblWindowLeft') as HTMLLabelElement;
        this.lblWindowHeight = document.getElementById('lblWindowHeight') as HTMLLabelElement;
        this.lblWindowWidth = document.getElementById('lblWindowWidth') as HTMLLabelElement;
        this.lblWindowScale = document.getElementById('lblWindowScale') as HTMLLabelElement;
        this.lblWindowPositionX = document.getElementById('lblWindowPositionX') as HTMLLabelElement;
        this.lblWindowPositionY = document.getElementById('lblWindowPositionY') as HTMLLabelElement;
        this.lblWindowHoverX = document.getElementById('lblWindowHoverX') as HTMLLabelElement;
        this.lblWindowHoverY = document.getElementById('lblWindowHoverY') as HTMLLabelElement;

        this.lblPixelX = document.getElementById('lblPixelX') as HTMLLabelElement;
        this.lblPixelY = document.getElementById('lblPixelY') as HTMLLabelElement;

        const selectMapRegion = document.getElementById("selectMapRegion") as HTMLSelectElement;
        selectMapRegion!.addEventListener("change", this.onMapRegionChanged );

        this.onMapWindowChanged = this.onMapWindowChanged.bind(this);
        this.onMapMouseMove = this.onMapMouseMove.bind(this);
        this.onMapRegionChanged = this.onMapRegionChanged.bind(this);

        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
        this.geoMap.actualWindowRectChanged = this.onMapWindowChanged;
        this.geoMap.zoomable = true;
        this.geoMap.addEventListener('mousemove', this.onMapMouseMove, false);
        const usaRegion = { left: -134.5, top: 16.0, width: 70.0, height: 37.0 };
        this.geoMap.zoomToGeographic(usaRegion);
    }

    public onMapRegionChanged = (e: any) => {
        let name = e.target.value as String;
        const regions =  MapUtils.getRegions();
        for (const key in regions) {
            if (key === name && regions.hasOwnProperty(key)) {
                const region = regions[key];
                this.geoMap.zoomToGeographic(region);
                break;
            }
        }
    }

    public onMapWindowChanged(map: IgcSeriesViewerComponent, e: IgcRectChangedEventArgs) {
        // storing window location and size (values between 0.0 and 1.0)
        const windowRect = e.newRect;

        // converting window rect to geographic rect/region:
        const geoRect: any = this.geoMap.getGeographicFromZoom(windowRect);
        geoRect.bottom = geoRect.top  + geoRect.height;
        geoRect.right  = geoRect.left + geoRect.width;
        // calculating center of geographic region
        geoRect.latitude  = geoRect.top  + (geoRect.height / 2);
        geoRect.longitude = geoRect.left + (geoRect.width / 2);

        //console.log("onWindowRectChange " + windowRect.left.toString());
        this.lblGeoTop.innerText    = "T: " + MapUtils.toLat(geoRect.top);
        this.lblGeoLeft.innerText   = "L: " + MapUtils.toLng(geoRect.left);
        this.lblGeoHeight.innerText = "H: " + MapUtils.toLng(geoRect.height);
        this.lblGeoWidth.innerText  = "W: " + MapUtils.toLng(geoRect.width);

        this.lblWindowTop.innerText    = "T: " + windowRect.top.toFixed(4);
        this.lblWindowLeft.innerText   = "L: " + windowRect.left.toFixed(4);
        this.lblWindowHeight.innerText = "H: " + windowRect.height.toFixed(4);
        this.lblWindowWidth.innerText  = "W: " + windowRect.width.toFixed(4);
        this.lblWindowScale.innerText = this.geoMap.actualWindowScale.toFixed(4);
        this.lblWindowPositionX.innerText = windowRect.left.toFixed(4);
        this.lblWindowPositionY.innerText = windowRect.top.toFixed(4);
    }

    public onMapMouseMove(e: any) {
        const bounds = e.target.getBoundingClientRect();
        const relativeCoordinate = {
            x: e.clientX - bounds.left,
            y: e.clientY - bounds.top
        };

        this.lblPixelX.innerText = MapUtils.toPixel(relativeCoordinate.x);
        this.lblPixelY.innerText = MapUtils.toPixel(relativeCoordinate.y);

        // converting mouse pixel coordinate to geographic coordinate:
        const geoCoordinate: any = this.geoMap.getGeographicPoint(relativeCoordinate);
        this.lblGeoLongitude.innerText = MapUtils.toLng(geoCoordinate.x);
        this.lblGeoLatitudes.innerText = MapUtils.toLat(geoCoordinate.y);

        // converting mouse pixel coordinate to window coordinate:
        const windowCoordinateX = (e.clientX - bounds.left) / bounds.width;
        const windowCoordinateY = (e.clientY - bounds.top) / bounds.height;
        this.lblWindowHoverX.innerText = windowCoordinateX.toFixed(4);
        this.lblWindowHoverY.innerText = windowCoordinateY.toFixed(4);
    }

    private lblGeoTop: HTMLLabelElement;
    private lblGeoLeft: HTMLLabelElement;
    private lblGeoHeight: HTMLLabelElement;
    private lblGeoWidth: HTMLLabelElement;
    private lblGeoLongitude: HTMLLabelElement;
    private lblGeoLatitudes: HTMLLabelElement;

    private lblWindowTop: HTMLLabelElement;
    private lblWindowLeft: HTMLLabelElement;
    private lblWindowHeight: HTMLLabelElement;
    private lblWindowWidth: HTMLLabelElement;
    private lblWindowScale: HTMLLabelElement;
    private lblWindowHoverX: HTMLLabelElement;
    private lblWindowHoverY: HTMLLabelElement;
    private lblWindowPositionX: HTMLLabelElement;
    private lblWindowPositionY: HTMLLabelElement;

    private lblPixelX: HTMLLabelElement;
    private lblPixelY: HTMLLabelElement;
}

new MapNavigation();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>MapNavigation</title>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>
  <body>
    <div id="root">

<div class="container sample">
    <igc-geographic-map id="geoMap" width="100%" height="100%">
    </igc-geographic-map>

    <div class="overlay-left overlay-border vertical" style="background: rgba(217, 217, 217, 0.5)">
      <label style="font-weight: 600">Zoom to Map Region</label>
      <select id="selectMapRegion">
        <option>United States</option>
        <option>United Kingdom</option>
        <option>South Africa</option>
        <option>Poland</option>
      </select>
      <label style="font-weight: 600">Map Geographic Rect</label>
      <div  class="horizontal">
          <div  class="vertical"  style="margin-right: 1rem">
              <label id="lblGeoTop"></label>
              <label id="lblGeoLeft"></label>
          </div>
          <div  class="vertical">
              <label id="lblGeoHeight"></label>
              <label id="lblGeoWidth"></label>
          </div>
      </div>

      <label style="font-weight: 600">Map Window Rect</label>
      <div  class="horizontal">
          <div  class="vertical"  style="margin-right: 1rem">
              <label id="lblWindowTop"></label>
              <label id="lblWindowLeft"></label>
          </div>
          <div  class="vertical">
              <label id="lblWindowHeight"></label>
              <label id="lblWindowWidth"></label>
          </div>
      </div>

      <label style="font-weight: 600">Map Window Position</label>
      <div  class="horizontal">
          <div  class="vertical"  style="margin-right: 1rem">
              <label>Horizontal:</label>
              <label>Vertical:</label>
              <label>Scale:</label>
          </div>
          <div  class="vertical">
              <label id="lblWindowPositionX"> </label>
              <label id="lblWindowPositionY"> </label>
              <label id="lblWindowScale"> </label>
          </div>
      </div>

      <label style="font-weight: 600">Map Hover Coordinates</label>
      <div  class="horizontal">
          <div  class="vertical" style="margin-right: 1rem">
              <label>Window X: </label>
              <label>Window Y: </label>
              <label>Longitude: </label>
              <label>Latitude: </label>
              <label>Pixel X: </label>
              <label>Pixel Y: </label>
          </div>
          <div  class="vertical">
              <label id="lblWindowHoverX"></label>
              <label id="lblWindowHoverY"></label>
              <label id="lblGeoLongitude"> </label>
              <label id="lblGeoLatitudes"> </label>
              <label id="lblPixelX"> </label>
              <label id="lblPixelY"> </label>
          </div>
      </div>
  </div>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

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:

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:

Properties

The following table summarizes properties that can be used in navigation of the IgcGeographicMapComponent 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

• actualWindowRect
• windowRect
• IgcGeographicMapComponent
• zoomable