WorldPinsMap — Controllo PCF per Mappa Interattiva |

Panoramica

WorldPinsMap è un controllo PowerApps Component Framework (PCF) che porta funzionalità di mappatura interattiva nelle tue applicazioni Power Apps Canvas. Costruito con D3.js e TopoJSON, questo controllo ti permette di visualizzare una mappa del mondo completamente interattiva con pin personalizzabili che funziona completamente offline — nessuna API key esterna richiesta!

✨ Caratteristiche Principali

🌍 Mappa del mondo interattiva con zoom, pan e controlli di navigazione
📍 Pin personalizzabili con etichette, tooltip e popup sempre visibili
📊 Input dati: Proprietà Table per i dati dei pin
🎯 Funzionalità auto-fit: zoom automatico per adattarsi a tutti i pin
🗺️ Etichette e confini dei paesi per un migliore contesto geografico
⚙️ Dimensioni dei caratteri configurabili sia per pin che per etichette dei paesi
📱 Controlli touch-friendly ottimizzati per Power Apps mobile
📐 Completamente responsive: si adatta a qualsiasi dimensione del contenitore
🔌 Funziona offline: nessuna dipendenza esterna o API key necessaria

🔧 Proprietà

Il controllo espone le seguenti proprietà per una facile personalizzazione:

Proprietà	Tipo	Descrizione
`defaultLatitude`	Decimale	Latitudine del centro mappa predefinito
`defaultLongitude`	Decimale	Longitudine del centro mappa predefinito
`defaultZoom`	Numero Intero	Livello di zoom predefinito (1–18)
`countryFontSize`	Numero Intero	Dimensione carattere (pt) per etichette paesi (default: 10)
`pinFontSize`	Numero Intero	Dimensione carattere (pt) per etichette pin (default: 10)
`autoFitPins`	Due Opzioni	Zoom per adattare tutti i pin (`true`) o panoramica mondo (`false`). Default: `true`
`showAllLabels`	Due Opzioni	Mostra sempre etichette pin (`true`) o solo al passaggio mouse (`false`). Default: `true`
`pinsDataSet`	Dataset	Tabella di pin della mappa

📋 Formato Dati Pin

Usando Table (tramite `pinsDataSet`)

Passa una Table() di Power Apps con i dati dei tuoi pin:

Table(
    {Latitude: 40.7128, Longitude: -74.0060, Label: "TEST BUILDING 1 - New York", Description: "USA"},
    {Latitude: 48.8566, Longitude: 2.3522, Label: "TEST BUILDING 2 - Paris", Description: "France"},
    {Latitude: 51.5074, Longitude: -0.1278, Label: "TEST BUILDING 3 - London", Description: "UK"},
    {Latitude: 35.6762, Longitude: 139.6503, Label: "TEST BUILDING 4 - Tokyo", Description: "Japan"},
    {Latitude: -33.8650, Longitude: 151.2094, Label: "TEST BUILDING 5 - Sydney", Description: "Australia"},
    {Latitude: 55.7558, Longitude: 37.6176, Label: "TEST BUILDING 6 - Moscow", Description: "Russia"},
    {Latitude: 39.9042, Longitude: 116.4074, Label: "TEST BUILDING 7 - Beijing", Description: "China"},
    {Latitude: -15.7942, Longitude: -47.8825, Label: "TEST BUILDING 8 - Brasilia", Description: "Brazil"},
    {Latitude: 19.4326, Longitude: -99.1332, Label: "TEST BUILDING 9 - Mexico City", Description: "Mexico"},
    {Latitude: -34.6037, Longitude: -58.3816, Label: "TEST BUILDING 10 - Buenos Aires", Description: "Argentina"}
)

Nomi dei campi supportati (case-insensitive con alias):

Latitude: Latitude, latitude, lat
Longitude: Longitude, longitude, lng, lon
Label: Label, label, Name, name
Description: Description, description
ShowPopup: ShowPopup, showPopup — mantiene il popup sempre visibile
ShowLabel: ShowLabel, showLabel — mostra l’etichetta sulla mappa

️ Stack Tecnologico

TypeScript — Sviluppo type-safe
D3.js v7 — Rendering mappa, proiezioni, capacità zoom/pan
TopoJSON — Geometria del mondo leggera (funziona offline!)
PCF (PowerApps Component Framework) — Integrazione con Power Platform

💡 Casi d’Uso

Mappatura territori vendita: Visualizza team vendite regionali e territori
Tracciamento eventi: Mostra location di conferenze, uffici
Pianificazione viaggi: Mappa i tuoi viaggi, luoghi visitati
Tracciamento asset: Mostra posizioni di attrezzature o inventario nel mondo
Mappatura clienti: Visualizza location clienti con dettagli
Siti di progetto: Traccia location di progetti globali