Sistema di mappa

Creare impressionanti visualizzazioni geografiche con mappe interattive, coloritura dei dati di choropleth, e rivela animati.

Panoramica

Il sistema di mappa fornisce:

• Mappe mondiali e regionali — Mappe precaricate da CDN (mondo, USA, Europa, ecc.)
• Multiple Projections — Mercator, Terra naturale, Ortografico (globo), Albers, e altro ancora
• Regione Highlighting — Paesi, stati o province
• Visualizzazione dati — Mappe di Choropleth con scale di colore
• Marker & Labels — Aggiungi punti di interesse
• Qualità professionale — Supporto multipoligono per i paesi complessi

Caricamento di una mappa

Dai modelli

Il modo più semplice per iniziare è utilizzare un modello di mappa:

1. Aprire il pannello Templates
2. Trova la categoria “Maps”
3. Scegliere un modello come “Global Expansion Map” o “US Data Visualization”

Dal pannello del generatore

1. Aprire il pannello Generator
2. Selezionare Map come tipo di sfondo
3. Scegliere una mappa (World, USA, Europa, ecc.)
4. Configurare proiezione e styling

Tipi di mappa

Proiezioni

Scegli la proiezione giusta per la visualizzazione:

Terra naturale (Default)

Il meglio per le mappe mondiali. Distorsione bilanciata, sembra naturale.

Mercato

Conserva angoli, aspetto familiare. Buon per le mappe di navigazione.

Ortografico (Globe)

Mostra la Terra come una sfera 3D. Grande per le viste della regione concentrata.

Stati Uniti d’America

Proiezione speciale per le mappe statunitensi che include Alaska e Hawaii riposizionate.

Altre proiezioni

• Robinson — Proiezione completa, buona per le mappe mondiali
• Winkel Tripel — Proiezione mondiale a bassa distorsione
• Area paritetica minica — Buona per le regioni di mezza latitudine

Regioni in evidenza

Paese unico/Stato

Clicca su qualsiasi regione per selezionarlo , quindi utilizzare il pannello Proprietà per cambiare il suo colore.

Regioni multiple

Utilizzare i modelli API o per evidenziare più regioni:

// Highlight North American countries
app.mapSystem.highlightRegions(
  ['United States of America', 'Canada', 'Mexico'],
  { fillColor: '#22c55e', strokeColor: '#16a34a' }
);

Riveli animati

I modelli possono animare i punti salienti della regione con tempistiche esagerate per gli effetti narrativi.

Formati ID Regione

Diverse mappe utilizzano diversi formati ID:

Visualizzazione dei dati (Choropleth)

Regioni a colori basate sui valori di dati:

app.mapSystem.applyDataColors({
  'California': 39538223,
  'Texas': 29145505,
  'Florida': 21538187
}, {
  colorScale: 'blues',
  showLegend: true,
  legendTitle: 'Population'
});

Scale di colore

Marcatori

Aggiungi marcatori a coordinate specifiche:

app.mapSystem.addMarker({
  lat: 37.7749,
  lon: -122.4194,
  label: 'San Francisco',
  color: '#ef4444',
  pulse: true  // Animated pulse effect
});

Impostazioni di qualità

**Importante. Utilizzare la qualità professional per i paesi con forme complesse (Russia, Francia, USA) per garantire che tutte le parti del territorio rendano correttamente.

Paesi multipoligoni

Alcuni paesi sono costituiti da più parti scollegate:

• Russia — Mainland + Kaliningrad + isole
• Francia - Mainland + Corsica + territori d’oltremare
• USA — Mainland + Alaska + Hawaii (in mappe mondiali)
• Indonesia — Migliaia di isole
• Fiji — Isole multiple

Il sistema di mappa utilizza automaticamente Paper.js CompoundPath per questi paesi quando la qualità è impostata a professional.

Interattività

Effetti Hover

Abilitare l’evidenziatore:

app.mapSystem.loadMap('world', {
  enableHover: true,
  hoverFill: '#93c5fd'
});

Fare clic su Eventi

Rispondere ai clic della regione:

app.mapSystem.on('regionClick', (event) => {
  console.log('Clicked:', event.regionId);
  // Show info panel, highlight related regions, etc.
});

Modelli sulla mappa

Mappa globale di espansione

Mostra espansione aziendale in tutte le regioni con evidenziazione a fase animata.

Visualizzazione dei dati USA

Visualizza i dati negli Stati Uniti con la colorazione del choropleth.

Importazione della mappa personalizzata

Per le mappe regionali dettagliate non incluse, utilizzare importCustomMap():

// Load from GeoJSON
await app.mapSystem.importCustomMap(geoJsonData, {
  projection: 'mercator',
  idProperty: 'name'
});

Fonti di dati:

• Terra Naturale — Dati sulla mappa del dominio pubblico
• GADM — Limiti amministrativi dettagliati
• Mapshaper — Semplifica file GeoJSON

Consigli

1. Utilizzare worldHighRes per le esportazioni professionali con paesi multipoligoni
2. Proiezione naturale della terra funziona meglio per la maggior parte delle mappe mondiali
3. Albers USA è specificamente progettato per le mappe americane
4. L’ortografico crea una visione drammatica del globo per presentazioni
5. Qualità professionale previene la corruzione della forma in paesi complessi

Tastiera Scorciatoie

Mappa Regione Animazione

Animare le regioni della mappa con cambiamenti di colore integrati nel timeline. Perfetto per mostrare i cambiamenti di dati nel tempo, sequenze di espansione globali, o la creazione di visualizzazioni di dati coinvolgenti.

Animazione della regione di base

Animare regioni specifiche con transizioni di colore basate su keyframe:

// Load a world map first
await app.loadMap('world', {
  projection: 'naturalEarth',
  fillColor: '#e2e8f0'
});

// Animate specific regions
app.animateMapRegions({
  duration: 5,
  loop: true,
  regions: {
    'USA': [
      { time: 0, fillColor: '#ef4444' },      // Red at start
      { time: 2.5, fillColor: '#22c55e' },    // Green at midpoint
      { time: 5, fillColor: '#ef4444' }       // Red at end (loops)
    ],
    'France': [
      { time: 0, fillColor: '#3b82f6' },      // Blue at start
      { time: 5, fillColor: '#fbbf24' }       // Yellow at end
    ]
  }
});

Animazione d’onda

Creare un’onda di colore in tutte le regioni in base alla posizione geografica:

app.animateMapWave({
  duration: 10,
  loop: true,
  colors: ['#ef4444', '#fbbf24', '#22c55e', '#3b82f6'],
  waveDirection: 'horizontal'  // 'horizontal', 'vertical', 'radial'
});

Integrazione timeline

Le regioni animate si integrano con l’interfaccia utente Timeline:

• Le regioni animate appaiono nel pannello Timeline
• Scrub nel tempo per visualizzare in anteprima i cambiamenti di colore
• Animazioni di riproduzione/pausa con i controlli di timeline
• Esportazione di animazioni in video o GIF

Stoccaggio di animazioni

// Stop all region animations
app.stopMapAnimations();

// Stop specific regions
app.stopMapAnimations({ regions: ['USA', 'Canada'] });

// Stop but preserve current colors
app.stopMapAnimations({ resetColors: false });

Ottenere Regioni Animate

const animated = app.getAnimatedMapRegions();
// Returns: [{ regionId, keyframes, duration, loop }, ...]

CSV Esportazione e Importazione

Esporta e importa i dati della regione, compresi i colori, lo stato di evidenziazione e lo stato di selezione per le visualizzazioni basate sui dati.

Esportazione dei dati della Regione

// Export all regions with current state
const csv = app.exportMapRegionDataCSV();

// Export with custom options
const csv = app.exportMapRegionDataCSV({
  includeHighlighted: true,  // Include highlight status column
  includeSelected: true,     // Include selection status column
  includeColors: true        // Include fill/stroke colors
});

// Download directly as CSV file
app.downloadMapRegionDataCSV('my-map-data.csv');

Formato CSV:

regionId,name,highlighted,selected,fillColor,strokeColor
USA,United States of America,1,0,#22c55e,#16a34a
CAN,Canada,0,0,#e5e7eb,#9ca3af
FRA,France,1,1,#3b82f6,#2563eb

Importazione dei dati della Regione

Importa i dati CSV per aggiornare gli stati della regione:

// Import from CSV text
app.importMapRegionDataCSV(csvText, {
  applyColors: true,      // Apply fill/stroke colors from CSV
  applyHighlight: true,   // Update highlight status
  applySelection: true    // Update selection status
});

Selezione programmatica

// Select regions programmatically
app.selectMapRegions(['USA', 'Canada', 'Mexico']);

// Deselect regions
app.deselectMapRegions(['Mexico']);

// Get highlighted regions
const highlighted = app.getHighlightedMapRegions();
// Returns: ['USA', 'France', ...]

Flusso di lavoro: Modifica della mappa basata su fogli di calcolo

1. Carica una mappa e evidenzia alcune regioni
2. Esportazione a CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Modifica in Excel/Google Sheets (cambia colori, set evidenziato=1)
4. Importa indietro: app.importMapRegionDataCSV(updatedCsv)

Questo flusso di lavoro è ideale per:

• Gli utenti non tecnici che modificano i dati della mappa
• Aggiornamenti Bulk a molte regioni
• Integrazione dei datadotti
• Configurazioni di mappe controllate dalla versione

GeoJSON Esportazione e Importazione

Esporta mappe come GeoJSON per la modifica in strumenti esterni come QGIS o Mapshaper, quindi ri-import con le modifiche.

Esportazione Mappa modificata

Esportare la mappa con colori e stili attuali:

// Export as GeoJSON (includes current colors/styles)
const geoJson = app.exportMapGeoJSON();

// Download directly
app.downloadMapGeoJSON('my-styled-map.geojson');

Esportazione Fonte originale

Scarica l’esatta GeoJSON utilizzata per caricare la mappa (limiti non modificati):

// Get original source data
const original = app.getOriginalMapGeoJSON();

// Download for external editing
app.downloadOriginalMapGeoJSON('world-source.geojson');

Importare mappe personalizzate

Importa i tuoi dati di mappe GeoJSON modificati o esterni:

// Import from URL
await app.importCustomMap('https://example.com/my-map.geojson');

// Import from object
await app.importCustomMap(editedGeoJson, {
  projection: 'naturalEarth'
});

Flusso di lavoro completo: Modifica → Re-import → Animate

1. Carico ed esportazione la mappa originale:

   await app.loadMap('world');
   app.downloadOriginalMapGeoJSON('world-source.geojson');
   

2. Confini in strumenti esterni:

   • QGIS - Editor GIS completo
   • Mapshaper - semplificazione e modifica online
   • geojson.io - Editor online veloce

3. Re-import la mappa modificata:

   await app.importCustomMap(editedGeoJson, { projection: 'naturalEarth' });
   

4. Animate la tua mappa personalizzata:

   app.animateMapRegions({
     duration: 5,
     regions: { 'MyRegion': [{ time: 0, fillColor: '#ef4444' }, ...] }
   });
   

Mappa Informazioni sulla sorgente

Ottieni informazioni sulla mappa attualmente caricata:

const info = app.getMapSourceInfo();
// {
//   source: 'world',
//   projection: 'naturalEarth',
//   quality: 'standard',
//   regionCount: 177,
//   hasOriginalGeoJSON: true,
//   isCustomImport: false
// }

Risorse esterne

Mappa Fonti dati

Strumenti di conversione e modifica

Formato Conversion Workflow

Shapefile → GeoJSON (utilizzando Mapshaper):

1. Vai a mapshaper.org
2. Trascina e rilascia il tuo file .shp (insieme ai file .dbf e .prj)
3. Fare clic su Semplificare per ridurre la dimensione del file (uso 10-20% per web)
4. Clicca su Esporta → scegli GeoJSON
5. Importa in PinePaper con app.importCustomMap()

TopoJSON → GeoJSON:

I file TopoJSON vengono convertiti automaticamente quando vengono importati in PinePaper.

Suggerimenti sulla dimensione del file

API Riferimento

Per il controllo della mappa programmatica, vedere il Map System API Documentation.