I need to show a map display that has simple scroll & zoom with some pushpins I set on it. So pretty basic.
I am looking at Tile Layer using X, Y and Z and at AzureMapControl.Components. Both seem to be built around Imagery Tiles. Imagery Tiles are used everywhere, but I can't find any discussion that explains what they are and how to use them. And explains how to build up a map from them.
Tile Layer using X, Y and Z shows it all as very simple to create what I want. I think. But I don't understand how it all works. And I'm using Blazor server so I have to adapt that code.
AzureMapControl.Components looks like it would drop right in to my Blazor app. But clearly is a very complex library capable of much more than my needs, so I need to understand if that additional functionality would get in my way.
And to figure all that out, I need to understand what Imagery Tiles are and how they are used to build up the displayed map. The samples show what to do, but they don't explain why - that's what I want to understand.
The library you referenced is a simple wrapper around the Azure Maps Web SDK. Only use that library if you are developing a Blazor app. If you are just using basic HTML and JavaScript to create a web app, then use the Azure Maps Web SDK directly:
You don't really need to know much about Azure Maps Imagery tiles, other than they are images from planes/satellite of the world, chopped up into the tiling system used by the map control that this library wraps.
Here is documentation on how the tiling system works (mainly just for education, you don't normally need to understand this to create an app): https://learn.microsoft.com/en-us/azure/azure-maps/zoom-levels-and-tile-grid?tabs=csharp
If you are only planning to show a single pushpin, use the HTML marker object as it's simple. If you plan on showing a lot of pushpins, then use a data source and connect it to either a bubble layer (colored circles) or a symbol layer (image icon and text). This second approach renders your data using WebGL and is capable of rendering 500K+ pushpins on the map depending on your system, where as HTML markers use traditional DOM elements for rendering and start to become noticeable slow after a few hundred.
Looking at that library, the following docs / samples are most relevant to your scenario:
Map:
HTML markers:
Symbol / Bubble Layers: