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
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];
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 {
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 ) {
const windowRect = e.newRect;
const geoRect: any = this .geoMap.getGeographicFromZoom(windowRect);
geoRect.bottom = geoRect.top + geoRect.height;
geoRect.right = geoRect.left + geoRect.width;
geoRect.latitude = geoRect.top + (geoRect.height / 2 );
geoRect.longitude = geoRect.left + (geoRect.width / 2 );
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);
const geoCoordinate: any = this .geoMap.getGeographicPoint(relativeCoordinate);
this .lblGeoLongitude.innerText = MapUtils.toLng(geoCoordinate.x);
this .lblGeoLatitudes.innerText = MapUtils.toLat(geoCoordinate.y);
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 >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
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