Skip to content

Feature/multiple map support #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: develop
Choose a base branch
from
Open

Feature/multiple map support #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5a3b814
Use dictionary approach to use multiple multiple maps at once.
mtech-rherpio Oct 27, 2025
995dc12
Fix moving dashed line sample link.
mtech-rherpio Oct 28, 2025
28bb97a
Fix missing map id in dropped markers.
mtech-rherpio Oct 28, 2025
29bcc64
Update tests to use the map ids
mtech-rherpio Oct 29, 2025
2d2b134
Make samples more resilient on timing issues.
mtech-rherpio Oct 29, 2025
ca50148
Add sample pages and components for multiple simultaneous maps.
mtech-rherpio Oct 29, 2025
96a401e
Fix map height turning 0.
mtech-rherpio Nov 3, 2025
34956f0
Fix issue with overviewmap sometimes not changing style with the map.
mtech-rherpio Nov 3, 2025
c229466
Undo unnecessary edits.
mtech-rherpio Nov 4, 2025
d5b13f6
Clean up map tests.
mtech-rherpio Nov 4, 2025
18fd8e6
Add test cases for multiple maps.
mtech-rherpio Nov 4, 2025
6dd8bc6
Minor cleanup.
mtech-rherpio Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions samples/AzureMapsControl.Sample/Components/Layout/NavMenu.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary">
@using AzureMapsControl.Sample.Components.Shared

<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Samples</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
Expand Down Expand Up @@ -34,7 +36,7 @@
<NavLink class="dropdown-item" href="/Animations/MoveMarkerAlongPath"> Move marker along path </NavLink>
</li>
<li>
<NavLink class="dropdown-item" href="/Animations/MavingDashedLine"> Moving dashed line </NavLink>
<NavLink class="dropdown-item" href="/Animations/MovingDashedLine"> Moving dashed line </NavLink>
</li>
<li>
<NavLink class="dropdown-item" href="/Animations/SetCoordinates">Set coordinates</NavLink>
Expand Down Expand Up @@ -240,6 +242,10 @@
</li>
</ul>
</li>
<NavLink class="nav-link" href="/MultipleMaps"> Multiple Maps </NavLink>
<li class="nav-item">
<MapPopupButton></MapPopupButton>
</li>
</ul>
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions samples/AzureMapsControl.Sample/Components/Pages/Animations/Drop.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@

public async Task OnMapReady(MapEventArgs eventArgs)
{
var dummyDataSourceId = "_empty";
var dummyDataSource = new AzureMapsControl.Components.Data.DataSource(dummyDataSourceId);
await eventArgs.Map.AddSourceAsync(dummyDataSource);

_dataSource = new AzureMapsControl.Components.Data.DataSource();
await eventArgs.Map.AddSourceAsync(_dataSource);

Expand Down
4 changes: 4 additions & 0 deletions samples/AzureMapsControl.Sample/Components/Pages/Animations/Morph.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,10 @@
{
_map = eventArgs.Map;

var dummyDataSourceId = "_empty";
var dummyDataSource = new AzureMapsControl.Components.Data.DataSource(dummyDataSourceId);
await eventArgs.Map.AddSourceAsync(dummyDataSource);

_datasource = new AzureMapsControl.Components.Data.DataSource();
await _map.AddSourceAsync(_datasource);
await _datasource.AddAsync(_geometry1);
Expand Down
2 changes: 1 addition & 1 deletion samples/AzureMapsControl.Sample/Components/Pages/Controls/Basic.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
CameraOptions="new CameraOptions { Type = AzureMapsControl.Components.Map.CameraType.Fly }"
Controls="new AzureMapsControl.Components.Controls.Control[]
{
new AzureMapsControl.Components.Controls.ZoomControl(new AzureMapsControl.Components.Controls.ZoomControlOptions { Style = AzureMapsControl.Components.Controls.ControlStyle.Dark }, AzureMapsControl.Components.Controls.ControlPosition.TopLeft),
new AzureMapsControl.Components.Controls.ZoomControl(new AzureMapsControl.Components.Controls.ZoomControlOptions { Style = AzureMapsControl.Components.Controls.ControlStyle.Dark }, AzureMapsControl.Components.Controls.ControlPosition.TopLeft),
new AzureMapsControl.Components.Controls.PitchControl(new AzureMapsControl.Components.Controls.PitchControlOptions { Style = AzureMapsControl.Components.Controls.ControlStyle.Dark }, AzureMapsControl.Components.Controls.ControlPosition.TopRight),
new AzureMapsControl.Components.Controls.CompassControl(new AzureMapsControl.Components.Controls.CompassControlOptions { Style = AzureMapsControl.Components.Controls.ControlStyle.Dark }, AzureMapsControl.Components.Controls.ControlPosition.BottomLeft),
new AzureMapsControl.Components.Controls.StyleControl(new AzureMapsControl.Components.Controls.StyleControlOptions { Style = AzureMapsControl.Components.Controls.ControlStyle.Dark, MapStyles = MapStyle.All() }, AzureMapsControl.Components.Controls.ControlPosition.BottomRight)
Expand Down
28 changes: 23 additions & 5 deletions samples/AzureMapsControl.Sample/Components/Pages/Controls/OverviewMap.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@page "/Controls/OverviewMap"
@rendermode InteractiveServer

@using AzureMapsControl.Components.Controls
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Controls="new AzureMapsControl.Components.Controls.Control[]
Expand All @@ -13,16 +14,33 @@
AzureMapsControl.Components.Controls.ControlPosition.TopLeft),
new AzureMapsControl.Components.Controls.StyleControl(position: AzureMapsControl.Components.Controls.ControlPosition.TopRight)
}"
EventActivationFlags="MapEventActivationFlags.None().Enable(MapEventType.StyleData)"
OnStyleData="OnStyleData"/>
EventActivationFlags="MapEventActivationFlags.None().Enable(MapEventType.StyleData).Enable(MapEventType.Ready)"
OnStyleData="OnStyleData"
OnReady="OnMapReady"/>

@code {
private bool _mapReady = false;
private MapStyle? _style;
private OverviewMapControl? _overviewControl;

public async void OnMapReady(MapEventArgs eventArgs)
{
_mapReady = true;
SetStyle();
}

public async void OnStyleData(MapStyleDataEventArgs eventArgs)
{
var overviewControl = eventArgs.Map.Controls?.OfType<AzureMapsControl.Components.Controls.OverviewMapControl>()?.FirstOrDefault();
if(overviewControl is not null)
_overviewControl = eventArgs.Map.Controls?.OfType<AzureMapsControl.Components.Controls.OverviewMapControl>()?.FirstOrDefault();
_style = eventArgs.Style;
SetStyle();
}

private async void SetStyle()
{
if (_mapReady && _overviewControl != null && _style.HasValue)
{
await overviewControl.SetOptionsAsync(options => options.MapStyle = eventArgs.Style);
await _overviewControl.SetOptionsAsync(options => options.MapStyle = _style.Value);
}
}
}
2 changes: 1 addition & 1 deletion samples/AzureMapsControl.Sample/Components/Pages/Indoor/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
TilesetId = Configuration["Indoor:TilesetId"]
};

var indoorManager = await IndoorService.CreateIndoorManagerAsync(options, AzureMapsControl.Components.Indoor.IndoorManagerEventActivationFlags.All());
var indoorManager = await IndoorService.CreateIndoorManagerAsync(eventArgs.Map.Id, options, AzureMapsControl.Components.Indoor.IndoorManagerEventActivationFlags.All());

indoorManager.OnFacilityChanged += eventArgs =>
{
Expand Down
4 changes: 4 additions & 0 deletions samples/AzureMapsControl.Sample/Components/Pages/Layers/BubbleLayerOnReady.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@

public async Task OnMapReady(MapEventArgs eventArgs)
{
var dummyDataSourceId = "_empty";
var dummyDataSource = new AzureMapsControl.Components.Data.DataSource(dummyDataSourceId);
await eventArgs.Map.AddSourceAsync(dummyDataSource);

var dataSource = new AzureMapsControl.Components.Data.DataSource(_datasourceId)
{
EventActivationFlags = AzureMapsControl.Components.Data.DataSourceEventActivationFlags.None()
Expand Down
9 changes: 9 additions & 0 deletions samples/AzureMapsControl.Sample/Components/Pages/Layers/HeatmapLayerOnReady.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,22 @@

public async Task OnMapReady(MapEventArgs eventArgs)
{
var dummyDataSourceId = "_empty";
var dummyDataSource = new AzureMapsControl.Components.Data.DataSource(dummyDataSourceId);
await eventArgs.Map.AddSourceAsync(dummyDataSource);

var dataSource = new AzureMapsControl.Components.Data.DataSource(_datasourceId);
await eventArgs.Map.AddSourceAsync(dataSource);
await dataSource.ImportDataFromUrlAsync("https://services1.arcgis.com/0MSEUqKaxRlEPj5g/arcgis/rest/services/ncov_cases/FeatureServer/1/query?where=1%3D1&f=geojson&outFields=*");
}

public async Task OnDatasourceAdded(MapSourceEventArgs eventArgs)
{
if( eventArgs.Source.Id != _datasourceId)
{
return;
}

var weightExpressionJsonString = "[\"get\", \"Confirmed\"]";

var layer = new AzureMapsControl.Components.Layers.HeatmapLayer
Expand Down
4 changes: 4 additions & 0 deletions samples/AzureMapsControl.Sample/Components/Pages/Layers/ImageLayerOnReady.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
@code {
public async Task OnMapReady(MapEventArgs events)
{
var dummyDataSourceId = "_empty";
var dummyDataSource = new AzureMapsControl.Components.Data.DataSource(dummyDataSourceId);
await events.Map.AddSourceAsync(dummyDataSource);

var layer = new AzureMapsControl.Components.Layers.ImageLayer
{
Options = new AzureMapsControl.Components.Layers.ImageLayerOptions("https://ngazuremaps.blob.core.windows.net/images/munich_1858.jpg", new AzureMapsControl.Components.Atlas.Position[] {
Expand Down
4 changes: 4 additions & 0 deletions samples/AzureMapsControl.Sample/Components/Pages/Layers/LayerRemove.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
@code {
public async Task OnMapReady(MapEventArgs events)
{
var dummyDataSourceId = "_empty";
var dummyDataSource = new AzureMapsControl.Components.Data.DataSource(dummyDataSourceId);
await events.Map.AddSourceAsync(dummyDataSource);

var layer = new AzureMapsControl.Components.Layers.TileLayer
{
Options = new AzureMapsControl.Components.Layers.TileLayerOptions("https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png"),
Expand Down
111 changes: 62 additions & 49 deletions samples/AzureMapsControl.Sample/Components/Pages/Layers/LineLayerOnReady.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@

public async Task OnMapReady(MapEventArgs eventArgs)
{
var dummyDataSourceId = "_empty";
var dummyDataSource = new AzureMapsControl.Components.Data.DataSource(dummyDataSourceId);
await eventArgs.Map.AddSourceAsync(dummyDataSource);

var dataSource = new AzureMapsControl.Components.Data.DataSource(_dataSourceId)
{
Options = new AzureMapsControl.Components.Data.DataSourceOptions
Expand All @@ -31,62 +35,71 @@
}
};
await eventArgs.Map.AddSourceAsync(dataSource);

await dataSource.AddAsync(new AzureMapsControl.Components.Atlas.Shape<AzureMapsControl.Components.Atlas.LineString>(
new AzureMapsControl.Components.Atlas.LineString(new[] {
new AzureMapsControl.Components.Atlas.Position(11.575454, 48.137392),
new AzureMapsControl.Components.Atlas.Position(11.576029, 48.137094),
new AzureMapsControl.Components.Atlas.Position(11.577248, 48.138912),
new AzureMapsControl.Components.Atlas.Position(11.578434, 48.138737),
new AzureMapsControl.Components.Atlas.Position(11.578826, 48.139409),
new AzureMapsControl.Components.Atlas.Position(11.580140, 48.139179),
new AzureMapsControl.Components.Atlas.Position(11.581237, 48.141555),
new AzureMapsControl.Components.Atlas.Position(11.581155, 48.141852),
new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534),
new AzureMapsControl.Components.Atlas.Position(11.583355, 48.143896),
new AzureMapsControl.Components.Atlas.Position(11.583662, 48.144258)
}),
new Dictionary<string, object>()
{
{ "Color", "#00FF00" }
}));

await dataSource.AddAsync(new AzureMapsControl.Components.Atlas.Shape<AzureMapsControl.Components.Atlas.LineString>(
new AzureMapsControl.Components.Atlas.LineString(new[] {
new AzureMapsControl.Components.Atlas.Position(11.585458, 48.145596),
new AzureMapsControl.Components.Atlas.Position(11.587910, 48.145779),
new AzureMapsControl.Components.Atlas.Position(11.589632, 48.146608),
new AzureMapsControl.Components.Atlas.Position(11.590771, 48.148219),
new AzureMapsControl.Components.Atlas.Position(11.591979, 48.150743),
new AzureMapsControl.Components.Atlas.Position(11.592885, 48.150611),
new AzureMapsControl.Components.Atlas.Position(11.593161, 48.150874),
new AzureMapsControl.Components.Atlas.Position(11.593594, 48.151084),
new AzureMapsControl.Components.Atlas.Position(11.594028, 48.151803),
new AzureMapsControl.Components.Atlas.Position(11.592281, 48.152074)
}),
new Dictionary<string, object>()
{
{ "Color", "#FF0000" }
}));
}

public async Task OnDatasourceAdded(MapSourceEventArgs eventArgs)
{
var layer = new AzureMapsControl.Components.Layers.LineLayer
if (eventArgs.Source.Id == _dataSourceId)
{
Options = new AzureMapsControl.Components.Layers.LineLayerOptions
var dataSource = eventArgs.Map.Sources.OfType<AzureMapsControl.Components.Data.DataSource>()
.FirstOrDefault(s => s.Id == _dataSourceId);

if (dataSource != null)
{
Source = _dataSourceId,
StrokeWidth = new AzureMapsControl.Components.Atlas.ExpressionOrNumber(6),
StrokeColor = new AzureMapsControl.Components.Atlas.ExpressionOrString(
new AzureMapsControl.Components.Atlas.Expression[]
await dataSource.AddAsync(new AzureMapsControl.Components.Atlas.Shape<AzureMapsControl.Components.Atlas.LineString>(
new AzureMapsControl.Components.Atlas.LineString(new[] {
new AzureMapsControl.Components.Atlas.Position(11.575454, 48.137392),
new AzureMapsControl.Components.Atlas.Position(11.576029, 48.137094),
new AzureMapsControl.Components.Atlas.Position(11.577248, 48.138912),
new AzureMapsControl.Components.Atlas.Position(11.578434, 48.138737),
new AzureMapsControl.Components.Atlas.Position(11.578826, 48.139409),
new AzureMapsControl.Components.Atlas.Position(11.580140, 48.139179),
new AzureMapsControl.Components.Atlas.Position(11.581237, 48.141555),
new AzureMapsControl.Components.Atlas.Position(11.581155, 48.141852),
new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534),
new AzureMapsControl.Components.Atlas.Position(11.583355, 48.143896),
new AzureMapsControl.Components.Atlas.Position(11.583662, 48.144258)
}),
new Dictionary<string, object>()
{
{ "Color", "#00FF00" }
}));

await dataSource.AddAsync(new AzureMapsControl.Components.Atlas.Shape<AzureMapsControl.Components.Atlas.LineString>(
new AzureMapsControl.Components.Atlas.LineString(new[] {
new AzureMapsControl.Components.Atlas.Position(11.585458, 48.145596),
new AzureMapsControl.Components.Atlas.Position(11.587910, 48.145779),
new AzureMapsControl.Components.Atlas.Position(11.589632, 48.146608),
new AzureMapsControl.Components.Atlas.Position(11.590771, 48.148219),
new AzureMapsControl.Components.Atlas.Position(11.591979, 48.150743),
new AzureMapsControl.Components.Atlas.Position(11.592885, 48.150611),
new AzureMapsControl.Components.Atlas.Position(11.593161, 48.150874),
new AzureMapsControl.Components.Atlas.Position(11.593594, 48.151084),
new AzureMapsControl.Components.Atlas.Position(11.594028, 48.151803),
new AzureMapsControl.Components.Atlas.Position(11.592281, 48.152074)
}),
new Dictionary<string, object>()
{
{ "Color", "#FF0000" }
}));

var layer = new AzureMapsControl.Components.Layers.LineLayer
{
Options = new AzureMapsControl.Components.Layers.LineLayerOptions
{
new AzureMapsControl.Components.Atlas.ExpressionOrString("get"),
new AzureMapsControl.Components.Atlas.ExpressionOrString("Color")
})
}
};
Source = _dataSourceId,
StrokeWidth = new AzureMapsControl.Components.Atlas.ExpressionOrNumber(6),
StrokeColor = new AzureMapsControl.Components.Atlas.ExpressionOrString(
new AzureMapsControl.Components.Atlas.Expression[]
{
new AzureMapsControl.Components.Atlas.ExpressionOrString("get"),
new AzureMapsControl.Components.Atlas.ExpressionOrString("Color")
})
}
};

await eventArgs.Map.AddLayerAsync(layer);
await eventArgs.Map.AddLayerAsync(layer);
}
}
}
}
9 changes: 9 additions & 0 deletions samples/AzureMapsControl.Sample/Components/Pages/Layers/PolygonExtrusionLayerOnReady.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@

public async Task OnMapReady(MapEventArgs eventArgs)
{
var dummyDataSourceId = "_empty";
var dummyDataSource = new AzureMapsControl.Components.Data.DataSource(dummyDataSourceId);
await eventArgs.Map.AddSourceAsync(dummyDataSource);

var dataSource = new AzureMapsControl.Components.Data.DataSource(_datasourceId);
await eventArgs.Map.AddSourceAsync(dataSource);

Expand All @@ -24,6 +28,11 @@

public async Task OnDatasourceAdded(MapSourceEventArgs eventArgs)
{
if (eventArgs.Source.Id != _datasourceId)
{
return;
}

var fillColorExpressionJsonString = "[\"step\", [\"get\", \"DENSITY\"], \"#00ff80\", 10, \"#09e076\", 20, \"#0bbf67\", 50, \"#f7e305\", 100, \"#f7c707\", 200, \"#f78205\", 500, \"#f75e05\", 1000, \"#f72505\", 10000, \"#6b0a05\"]";
var heightExpressionJsonString = "[\"interpolate\", [\"linear\"], [\"get\", \"DENSITY\"], 0, 100, 1200, 960000]";

Expand Down
11 changes: 10 additions & 1 deletion samples/AzureMapsControl.Sample/Components/Pages/Layers/PolygonLayerOnReady.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@

public async Task OnMapReady(MapEventArgs eventArgs)
{
var dummyDataSourceId = "_empty";
var dummyDataSource = new AzureMapsControl.Components.Data.DataSource(dummyDataSourceId);
await eventArgs.Map.AddSourceAsync(dummyDataSource);

var dataSource = new AzureMapsControl.Components.Data.DataSource(_dataSourceId);
await eventArgs.Map.AddSourceAsync(dataSource);

Expand All @@ -33,8 +37,13 @@
await dataSource.AddAsync(new AzureMapsControl.Components.Atlas.Shape<AzureMapsControl.Components.Atlas.Polygon>(polygon));
}

public async Task OnDatasourceAdded(MapEventArgs sourceEventArgs)
public async Task OnDatasourceAdded(MapSourceEventArgs sourceEventArgs)
{
if (sourceEventArgs.Source.Id != _dataSourceId)
{
return;
}

var layer = new AzureMapsControl.Components.Layers.PolygonLayer
{
EventActivationFlags = AzureMapsControl.Components.Layers.LayerEventActivationFlags.None().Enable(AzureMapsControl.Components.Layers.LayerEventType.Click),
Expand Down
Loading
Loading