Add Azure Maps road and satellite layers

Components/Pages/Home.razor

@@ -4,6 +4,7 @@
 @inject CadastralCatalogService CatalogService
 @inject OfficialCadastreService OfficialCadastreService
 @inject LocationSearchService LocationSearchService
+@inject AzureMapsService AzureMapsService
 @implements IAsyncDisposable
 
 <PageTitle>LME Mappe Catastali</PageTitle>
@@ -153,6 +154,8 @@
                                 <option value="topographic">Topografica - Esri World Topographic</option>
                                 <option value="terrain">Terreno - OpenTopoMap</option>
                                 <option value="carto">Strade chiare - CARTO Voyager</option>
+                                <option value="azure-road">Strade - Azure Maps</option>
+                                <option value="azure-satellite">Satellite - Azure Maps</option>
                                 <option value="google-satellite">Satellite - Google Maps</option>
                                 <option value="google-roadmap">Strade - Google Maps</option>
                             </select>
@@ -162,6 +165,15 @@
                             <input type="password" @bind="GoogleMapsApiKey" placeholder="API key" autocomplete="off" />
                         </label>
                         <button class="secondary-command" @onclick="SaveGoogleMapsApiKey">Salva chiave Google</button>
+                        <label>
+                            Chiave sottoscrizione Azure Maps Gen2
+                            <input type="password" @bind="AzureMapsSubscriptionKey" placeholder="Subscription key" autocomplete="off" />
+                        </label>
+                        <button class="secondary-command" @onclick="SaveAzureMapsKey">Salva chiave Azure Maps</button>
+                        <div class="service-note">
+                            <strong>Quota gratuita Azure Maps Gen2</strong>
+                            <p>Include ogni mese 5.000 transazioni per le mappe stradali e 1.000 per le immagini satellitari. Ogni transazione comprende fino a 15 tessere.</p>
+                        </div>
                         <label>
                             Trasparenza catasto
                             <input type="range" min="0" max="1" step="0.05" value="0.75" @onchange="ChangeCadastreOpacity" />
@@ -215,6 +227,7 @@
     private string Status { get; set; } = "online";
     private string SelectedBaseLayer { get; set; } = "satellite";
     private string GoogleMapsApiKey { get; set; } = string.Empty;
+    private string AzureMapsSubscriptionKey { get; set; } = string.Empty;
     private string SelectedRegionFile { get; set; } = string.Empty;
     private string SelectedMunicipalityCode { get; set; } = string.Empty;
     private string SelectedSheet { get; set; } = string.Empty;
@@ -278,6 +291,15 @@
             GoogleMapsApiKey = string.Empty;
         }
 
+        try
+        {
+            AzureMapsSubscriptionKey = await SecureStorage.Default.GetAsync("azure_maps_subscription_key") ?? string.Empty;
+        }
+        catch
+        {
+            AzureMapsSubscriptionKey = string.Empty;
+        }
+
         try
         {
             Regions = await CatalogService.GetRegionsAsync();
@@ -618,6 +640,18 @@
                 await JS.InvokeVoidAsync("lmeMap.configureGoogleMaps", GoogleMapsApiKey.Trim());
             }
 
+            if (requestedLayer.StartsWith("azure-", StringComparison.Ordinal))
+            {
+                if (string.IsNullOrWhiteSpace(AzureMapsSubscriptionKey))
+                {
+                    await JS.InvokeVoidAsync("lmeMap.showInfo", "Inserisci e salva la chiave della sottoscrizione Azure Maps.");
+                    return;
+                }
+
+                await AzureMapsService.ValidateKeyAsync(AzureMapsSubscriptionKey);
+                await JS.InvokeVoidAsync("lmeMap.configureAzureMaps", AzureMapsSubscriptionKey.Trim());
+            }
+
             await JS.InvokeVoidAsync("lmeMap.setBaseLayer", requestedLayer);
             SelectedBaseLayer = requestedLayer;
         }
@@ -648,6 +682,34 @@
             await JS.InvokeVoidAsync("lmeMap.showInfo", $"Chiave Google non salvata: {error.Message}");
         }
     }
+
+    private async Task SaveAzureMapsKey()
+    {
+        try
+        {
+            if (string.IsNullOrWhiteSpace(AzureMapsSubscriptionKey))
+            {
+                SecureStorage.Default.Remove("azure_maps_subscription_key");
+                await JS.InvokeVoidAsync("lmeMap.clearAzureMaps");
+                if (SelectedBaseLayer.StartsWith("azure-", StringComparison.Ordinal))
+                {
+                    SelectedBaseLayer = "satellite";
+                }
+                await JS.InvokeVoidAsync("lmeMap.showInfo", "Chiave Azure Maps rimossa.");
+                return;
+            }
+
+            AzureMapsSubscriptionKey = AzureMapsSubscriptionKey.Trim();
+            await AzureMapsService.ValidateKeyAsync(AzureMapsSubscriptionKey);
+            await SecureStorage.Default.SetAsync("azure_maps_subscription_key", AzureMapsSubscriptionKey);
+            await JS.InvokeVoidAsync("lmeMap.configureAzureMaps", AzureMapsSubscriptionKey);
+            await JS.InvokeVoidAsync("lmeMap.showInfo", "Chiave Azure Maps valida e salvata sul dispositivo.");
+        }
+        catch (Exception error)
+        {
+            await JS.InvokeVoidAsync("lmeMap.showInfo", $"Chiave Azure Maps non salvata: {error.GetBaseException().Message}");
+        }
+    }
     private Task ChangeCadastreOpacity(ChangeEventArgs args) => JS.InvokeVoidAsync("lmeMap.setCadastreOpacity", args.Value?.ToString()).AsTask();
     private Task ToggleCadastreLayer(string layer, ChangeEventArgs args) => JS.InvokeVoidAsync("lmeMap.toggleCadastreLayer", layer, (bool?)args.Value == true).AsTask();
     private Task ExportCadastralImage() => JS.InvokeVoidAsync("lmeMap.exportCadastreView").AsTask();

LMEMappeCatastaliApp.csproj

@@ -28,8 +28,8 @@
         <ApplicationId>com.companyname.lmemappecatastaliapp</ApplicationId>
 
         <!-- Versions -->
-        <ApplicationDisplayVersion>0.2.2</ApplicationDisplayVersion>
-        <ApplicationVersion>6</ApplicationVersion>
+        <ApplicationDisplayVersion>0.2.3</ApplicationDisplayVersion>
+        <ApplicationVersion>7</ApplicationVersion>
 
         <!-- To develop, package, and publish an app to the Microsoft Store, see: https://aka.ms/MauiTemplateUnpackaged -->
         <WindowsPackageType>None</WindowsPackageType>

MauiProgram.cs

@@ -20,6 +20,7 @@ public static class MauiProgram
         builder.Services.AddSingleton<CadastralCatalogService>();
         builder.Services.AddSingleton<OfficialCadastreService>();
         builder.Services.AddSingleton<LocationSearchService>();
+        builder.Services.AddSingleton<AzureMapsService>();
 
 #if DEBUG
         builder.Services.AddBlazorWebViewDeveloperTools();

README.md

@@ -4,7 +4,7 @@ App .NET MAUI Blazor Hybrid per Android, iOS, Mac Catalyst e Windows, pensata pe
 
 ## Funzioni gia implementate
 
-- Mappa interattiva Leaflet con sfondi Esri, OpenStreetMap, OpenTopoMap, CARTO Voyager e Google Maps configurabile tramite API key.
+- Mappa interattiva Leaflet con sfondi Esri, OpenStreetMap, OpenTopoMap, CARTO Voyager, Google Maps e Azure Maps configurabili tramite chiave.
 - Layer WMS ufficiale Agenzia delle Entrate: particelle, numeri particella, fogli, fabbricati, strade e acque.
 - Trasparenza configurabile del layer catastale.
 - Interrogazione WMS con click/tap sulla mappa.
@@ -38,6 +38,21 @@ Questo passaggio e' implementato nel tab `Catasto`. Regione e Comune sono dispon
 
 I layer cartografici pubblici WMS/WFS sono open data e non richiedono CAPTCHA. Il CAPTCHA o l'autenticazione SPID/CIE appartengono ai servizi web di consultazione e download documentale: l'app li apre nel sito ufficiale dell'Agenzia e non tenta di aggirarli.
 
+## Azure Maps Gen2
+
+Nel tab `Impostazioni` sono disponibili gli sfondi `Strade - Azure Maps` e `Satellite - Azure Maps`. Per usarli:
+
+1. crea una risorsa Azure Maps con piano Gen2 nel portale Azure;
+2. copia una delle chiavi di sottoscrizione della risorsa;
+3. inseriscila in `Chiave sottoscrizione Azure Maps Gen2` e premi `Salva chiave Azure Maps`.
+
+La chiave viene validata prima del salvataggio e rimane nel `SecureStorage` del dispositivo; non e' inclusa nel codice o nell'APK. Lasciando vuoto il campo e premendo il pulsante, la chiave viene rimossa.
+
+La quota gratuita mensile Gen2 indicata da Microsoft comprende 5.000 transazioni per le mappe di base e 1.000 per le immagini satellitari. Una transazione raggruppa fino a 15 richieste di tessere. Oltre la quota si applicano le condizioni economiche della sottoscrizione Azure, quindi e' opportuno configurare budget e avvisi nel portale.
+
+- Creazione account e autenticazione: https://learn.microsoft.com/azure/azure-maps/how-to-manage-account-keys
+- Prezzi e quota gratuita: https://azure.microsoft.com/pricing/details/azure-maps/
+
 ## Aprire in Visual Studio
 
 Apri `LMEMappeCatastaliApp.csproj` con Visual Studio 2022/2026 e seleziona:

Services/AzureMapsService.cs

@@ -0,0 +1,53 @@
+using System.Text.Json;
+
+namespace LMEMappeCatastaliApp.Services;
+
+public sealed class AzureMapsService
+{
+    private const string TilesetEndpoint = "https://atlas.microsoft.com/map/tileset";
+    private readonly HttpClient _httpClient = new()
+    {
+        Timeout = TimeSpan.FromSeconds(20)
+    };
+    private string? _validatedKey;
+
+    public AzureMapsService()
+    {
+        _httpClient.DefaultRequestHeaders.UserAgent.ParseAdd("LMEMappeCatastali/0.2.3");
+        _httpClient.DefaultRequestHeaders.Accept.ParseAdd("application/json");
+    }
+
+    public async Task ValidateKeyAsync(string subscriptionKey, CancellationToken cancellationToken = default)
+    {
+        var key = subscriptionKey.Trim();
+        if (string.IsNullOrWhiteSpace(key))
+        {
+            throw new ArgumentException("Chiave Azure Maps mancante.", nameof(subscriptionKey));
+        }
+
+        if (string.Equals(_validatedKey, key, StringComparison.Ordinal))
+        {
+            return;
+        }
+
+        var url = $"{TilesetEndpoint}?api-version=2024-04-01&tilesetId=microsoft.base.road";
+        using var request = new HttpRequestMessage(HttpMethod.Get, url);
+        request.Headers.Add("subscription-key", key);
+        using var response = await _httpClient.SendAsync(request, cancellationToken);
+        if (!response.IsSuccessStatusCode)
+        {
+            throw new InvalidOperationException(response.StatusCode is System.Net.HttpStatusCode.Unauthorized or System.Net.HttpStatusCode.Forbidden
+                ? "Chiave Azure Maps non valida o priva dei permessi Render."
+                : $"Azure Maps ha risposto {((int)response.StatusCode)}.");
+        }
+
+        await using var content = await response.Content.ReadAsStreamAsync(cancellationToken);
+        using var payload = await JsonDocument.ParseAsync(content, cancellationToken: cancellationToken);
+        if (!payload.RootElement.TryGetProperty("tiles", out _))
+        {
+            throw new InvalidDataException("Azure Maps ha restituito una configurazione non valida.");
+        }
+
+        _validatedKey = key;
+    }
+}

wwwroot/js/lme-map.js

@@ -2,6 +2,7 @@ const lmeState = {
     map: null,
     baseLayers: {},
     currentBase: null,
+    currentBaseName: "satellite",
     cadastre: null,
     cadastreLayers: ["CP.CadastralParcel", "codice_plla", "CP.CadastralZoning", "fabbricati"],
     cadastreOpacity: 0.75,
@@ -19,7 +20,9 @@ const lmeState = {
     lastPosition: null,
     fileImportBound: false,
     resizeBound: false,
-    googleMapsLoading: null
+    googleMapsLoading: null,
+    azureMapsKey: null,
+    azureAttribution: null
 };
 
 window.lmeMap = {
@@ -36,6 +39,8 @@ window.lmeMap = {
     loadWorkspace,
     setBaseLayer,
     configureGoogleMaps,
+    configureAzureMaps,
+    clearAzureMaps,
     setCadastreOpacity,
     toggleCadastreLayer,
     startGps,
@@ -117,6 +122,7 @@ function init() {
             L.popup().setLatLng(event.latlng).setContent(info).openOn(lmeState.map);
         }
     });
+    lmeState.map.on("moveend", () => void updateAzureAttribution());
 
     setInfo("Mappa pronta: satellite + catasto AdE");
 }
@@ -384,6 +390,7 @@ function setBaseLayer(name) {
         lmeState.map.removeLayer(lmeState.currentBase);
     }
     lmeState.currentBase = selected.addTo(lmeState.map);
+    lmeState.currentBaseName = selected === lmeState.baseLayers[name] ? name : "satellite";
     lmeState.currentBase.bringToBack();
     const labels = {
         satellite: "Satellite Esri",
@@ -392,10 +399,17 @@ function setBaseLayer(name) {
         topographic: "Topografica Esri",
         terrain: "OpenTopoMap",
         carto: "CARTO Voyager",
+        "azure-road": "Strade Azure Maps",
+        "azure-satellite": "Satellite Azure Maps",
         "google-satellite": "Satellite Google Maps",
         "google-roadmap": "Strade Google Maps"
     };
     setInfo(`Sfondo attivo: ${labels[name] || labels.satellite}. Il catasto AdE resta sovrapposto.`);
+    if (lmeState.currentBaseName.startsWith("azure-")) {
+        void updateAzureAttribution();
+    } else {
+        clearAzureAttribution();
+    }
 }
 
 function configureGoogleMaps(apiKey) {
@@ -443,6 +457,123 @@ function createGoogleLayers() {
     lmeState.baseLayers["google-roadmap"] ||= L.gridLayer.googleMutant({ type: "roadmap", maxZoom: 22 });
 }
 
+function configureAzureMaps(subscriptionKey) {
+    const key = (subscriptionKey || "").trim();
+    if (!key) {
+        throw new Error("Chiave Azure Maps mancante.");
+    }
+    if (lmeState.azureMapsKey === key
+        && lmeState.baseLayers["azure-road"]
+        && lmeState.baseLayers["azure-satellite"]) {
+        return;
+    }
+
+    const activeAzureLayer = lmeState.currentBaseName.startsWith("azure-")
+        ? lmeState.currentBaseName
+        : null;
+    if (activeAzureLayer && lmeState.currentBase) {
+        lmeState.map.removeLayer(lmeState.currentBase);
+    }
+
+    lmeState.azureMapsKey = key;
+    lmeState.baseLayers["azure-road"] = createAzureLayer(key, "microsoft.base.road", 22);
+    lmeState.baseLayers["azure-satellite"] = createAzureLayer(key, "microsoft.imagery", 19);
+
+    if (activeAzureLayer) {
+        lmeState.currentBase = lmeState.baseLayers[activeAzureLayer].addTo(lmeState.map);
+        lmeState.currentBase.bringToBack();
+        void updateAzureAttribution();
+    }
+}
+
+function clearAzureMaps() {
+    if (lmeState.currentBaseName.startsWith("azure-") && lmeState.currentBase) {
+        lmeState.map.removeLayer(lmeState.currentBase);
+        lmeState.currentBase = lmeState.baseLayers.satellite.addTo(lmeState.map);
+        lmeState.currentBase.bringToBack();
+        lmeState.currentBaseName = "satellite";
+    }
+
+    delete lmeState.baseLayers["azure-road"];
+    delete lmeState.baseLayers["azure-satellite"];
+    lmeState.azureMapsKey = null;
+    clearAzureAttribution();
+}
+
+function createAzureLayer(key, tilesetId, maxNativeZoom) {
+    const url = `https://atlas.microsoft.com/map/tile?api-version=2024-04-01&tilesetId=${tilesetId}&zoom={z}&x={x}&y={y}&tileSize=256&language=it-IT&view=Auto&subscription-key=${encodeURIComponent(key)}`;
+    const layer = L.tileLayer(url, {
+        minZoom: tilesetId === "microsoft.imagery" ? 1 : 0,
+        maxNativeZoom,
+        maxZoom: 22,
+        attribution: "Microsoft Azure Maps"
+    });
+    let errorShown = false;
+    layer.on("tileerror", () => {
+        if (!errorShown) {
+            errorShown = true;
+            setInfo("Azure Maps non ha restituito le tessere. Controlla quota e permessi Render della chiave.");
+        }
+    });
+    return layer;
+}
+
+async function updateAzureAttribution() {
+    if (!lmeState.azureMapsKey || !lmeState.currentBaseName.startsWith("azure-")) {
+        return;
+    }
+
+    const requestedLayer = lmeState.currentBaseName;
+    const tilesetId = requestedLayer === "azure-satellite" ? "microsoft.imagery" : "microsoft.base.road";
+    const bounds = lmeState.map.getBounds();
+    const zoom = Math.min(lmeState.map.getZoom(), tilesetId === "microsoft.imagery" ? 19 : 22);
+    const bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()].join(",");
+    const url = `https://atlas.microsoft.com/map/attribution?api-version=2024-04-01&tilesetId=${tilesetId}&zoom=${zoom}&bounds=${bbox}`;
+
+    try {
+        const response = await fetch(url, {
+            headers: {
+                Accept: "application/json",
+                "subscription-key": lmeState.azureMapsKey
+            }
+        });
+        if (!response.ok) {
+            return;
+        }
+        const payload = await response.json();
+        if (lmeState.currentBaseName !== requestedLayer) {
+            return;
+        }
+
+        const attribution = [...new Set((payload.copyrights || []).map(htmlToText).filter(Boolean))].join(" | ");
+        setAzureAttribution(attribution);
+    } catch {
+        clearAzureAttribution();
+    }
+}
+
+function setAzureAttribution(text) {
+    clearAzureAttribution();
+    if (!text) {
+        return;
+    }
+    lmeState.azureAttribution = escapeHtml(text);
+    lmeState.map.attributionControl.addAttribution(lmeState.azureAttribution);
+}
+
+function clearAzureAttribution() {
+    if (lmeState.azureAttribution) {
+        lmeState.map.attributionControl.removeAttribution(lmeState.azureAttribution);
+        lmeState.azureAttribution = null;
+    }
+}
+
+function htmlToText(value) {
+    const element = document.createElement("div");
+    element.innerHTML = String(value || "");
+    return element.textContent?.trim() || "";
+}
+
 function setCadastreOpacity(value) {
     lmeState.cadastreOpacity = Number(value || 0.75);
     if (lmeState.cadastre) {