Navigation in the IgbGeographicMap 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.
Blazor Navigating Map Content Example
EXAMPLE
MODULES
DATA
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbGeographicMapModule),
typeof(IgbDataChartInteractivityModule)
);
await builder.Build().RunAsync();
}
}
}cs
using IgniteUI.Blazor.Controls;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Threading.Tasks;
namespaceInfragistics.Samples
{
publicenum MapRegion
{
Caribbean,
UnitedStates,
UnitedKingdom,
European,
SouthAfrica,
Poland,
Australia,
Japan,
Uruguay,
Egypt,
Hawaii
}
publicclassMapUtils
{
publicstatic Dictionary<MapRegion, Rect> Regions;
publicstaticvoidNavigateTo(IgbGeographicMap map, MapRegion region)
{
Rect rect = Regions[region];
map.ZoomToGeographic(rect);
}
publicstaticstringToPixel(double number)
{
string s = Math.Abs(number).ToString("N0");
return s + " px";
}
publicstaticstringToLng(double number)
{
number = Clamp(number, -180, 180);
string s = Math.Abs(number).ToString("N1");
if (number < 100)
{
s = " " + s;
}
if (number > 0)
{
return s + "°E";
}
else
{
return s + "°W";
}
}
publicstaticstringToLat(double number)
{
number = Clamp(number, -90, 90);
string s = Math.Abs(number).ToString("N1");
if(number < 100)
{
s = " " + s;
}
if (number > 0)
{
return s + "°N";
}
else
{
return s + "°S";
}
}
publicstaticdoubleClamp(double number, double min, double max)
{
return Math.Max(min, Math.Min(max, number));
}
publicstaticdoublePad(double number, double places)
{
//TODOreturn0;
}
publicstaticstringGetBingKey()
{
return"Avlo7qsH1zZZI0XNpTwZ4XwvUJmCbd-mczMeUXVAW9kYYOKdmBIVRe8aoO02Xctq";
}
publicstatic Dictionary<MapRegion, Rect> GetRegions()
{
if(Regions == null || Regions.Count == 0)
{
CreateRegions();
}
return Regions;
}
privatestaticvoidAddRegion(MapRegion name, Rect geoRect)
{
Regions.Add(name, geoRect);
}
privatestaticvoidCreateRegions()
{
Regions = new Dictionary<MapRegion, Rect>();
AddRegion(MapRegion.Australia, new Rect() { Left= 81.5, Top= -52.0, Width= 98.0, Height= 56.0 });
AddRegion(MapRegion.Caribbean, new Rect() { Left= -92.9, Top= 5.4, Width= 35.1, Height= 25.8 });
AddRegion(MapRegion.Egypt, new Rect() { Left= 19.3, Top= 19.9, Width= 19.3, Height= 13.4 });
AddRegion(MapRegion.European, new Rect() { Left= -36.0, Top= 31.0, Width= 98.0, Height= 38.0 });
AddRegion(MapRegion.Japan, new Rect() { Left= 122.7, Top= 29.4, Width= 27.5, Height= 17.0 });
AddRegion(MapRegion.Hawaii, new Rect() { Left= -161.2, Top= 18.5, Width= 6.6, Height= 4.8 });
AddRegion(MapRegion.Poland, new Rect() { Left= 13.0, Top= 48.0, Width= 11.0, Height= 9.0 });
AddRegion(MapRegion.SouthAfrica, new Rect() { Left= 9.0, Top= -37.1, Width= 26.0, Height= 17.8 });
AddRegion(MapRegion.UnitedStates, new Rect() { Left= -134.5, Top= 16.0, Width= 70.0, Height= 37.0 });
AddRegion(MapRegion.UnitedKingdom, new Rect() { Left= -15.0, Top= 49.5, Width= 22.5, Height= 8.0 });
AddRegion(MapRegion.Uruguay, new Rect() { Left= -62.1, Top= -35.7, Width= 10.6, Height= 7.0 });
}
}
}cs
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.
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.
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.
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.
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
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.
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.