Systém map

Vytvořit ohromující geografické vizualizace s interaktivními mapami, choropleth data zbarvení, a animované odhaluje.

! [Mapa světa přírodní země] (…/images/map-world-natural-earth.png)

Přehled

Mapový systém poskytuje:

• • • World & Regional Maps * * - Předložené mapy z CDN (svět, USA, Evropa atd.)
• • • Multiple Projections * * - Mercator, Natural Earth, Orthographic (global), Albers, and more
• • • Region Highlighting * * - Zvýrazněné země, státy nebo provincie
• • • Data Visualization * * - Choropleth mapy s barevnými měřítky
• • • Markers & Labels * * - Přidat body zájmu
• • • Profesionální kvalita * * - Multi- polygonová podpora pro složité země

Načítání mapy

Z šablon

Nejjednodušší způsob, jak začít, je použít šablonu mapy:

1. Otevřít panel * * šablon * *
2. Najděte kategorii * * Maps * *
3. Vyberte si šablonu jako “Global Expansion Map” nebo “US Data Visualization”

Z panelu generátoru

1. Otevřít panel * * Generátor * *
2. Vyberte * * Mapa * * jako typ pozadí
3. Vyberte si mapu (Svět, USA, Evropa atd.)
4. Nastavit projekci a styl

Typy mapy

Projekce

Vyberte si správnou projekci pro vaši vizualizaci:

Přírodní země (výchozí)

Nejlepší pro mapy světa. Vyvážené zkreslení, vypadá přirozeně.

Mercator

Úhly, povědomý vzhled. Dobré pro navigační mapy.

! [Mercator projekce] (…/images/map-mercator-projection.png)

Ortografické (Globe)

Ukazuje Zemi jako 3D kouli. Skvělé pro cílené regionální názory.

! [Ortografický glóbus] (…/images/map-orthographic-globe.png)

Albers USA

Speciální projekce pro americké mapy, včetně Aljašky a Havaje přemístěné.

! [USA Albers] (…/images/map-usa-albers.png)

Ostatní projekce

• • • Robinson * * - Kompromisní projekce, dobrá pro mapy světa
• • • Winkel Tripel * * - Nízké zkreslení světové projekce
• • • Conic Equal Area * * - Dobré pro regiony střední šířky

Zvýraznění regionů

Jednotná země / stát

Kliknutím na libovolnou oblast ji vyberte, pak použít panel Vlastnosti změnit barvu.

Více regionů

Pomocí API nebo šablon zvýrazněte více regionů:

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

Animované reveals

Šablony mohou animovat zvýraznění regionu s rozvrženým časovým rozvržením pro vyprávění příběhů efektů.

Formuláře totožnosti regionu

Různé mapy používají různé formáty ID:

Vizualizace dat (Choropleth)

Barevné oblasti založené na hodnotách dat:

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

Barevné váhy

Značky

Přidat bodové značky na konkrétní souřadnice:

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

Nastavení kvality

• • Důležité: * * Použijte kvalitu professional pro země se složitými tvary (Rusko, Francie, USA), aby se zajistilo, že všechny územně-právní části budou správně provedeny.

Země s mnohočetným polygonem

Některé země se skládají z více odpojených částí:

• • • Rusko * * - Mainland + Kaliningrad + ostrovy
• • • Francie * * - Mainland + Korsika + zámořská území
• • • USA * * - Mainland + Aljaška + Havaj (ve světových mapách)
• • • Indonésie * * - Tisíce ostrovů
• • • Fidži * * - Vícenásobné ostrovy

Mapový systém automaticky používá Paper.js CompoundPath pro tyto země při nastavení kvality na professional.

Interakce

Hover Effects

Povolit zvýraznění vznášedla:

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

Klikněte na Události

Odpověď na kliknutí regionu:

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

Šablony mapy

Globální mapa rozšíření

Ukazuje obchodní expanzi po celém regionu s animovaným phase- based zvýraznění.

Vizualizace dat USA

Zobrazuje data napříč americkými státy se zbarvení choroplethu.

Vlastní import mapy

Pro podrobné regionální mapy nejsou zahrnuty, použijte importCustomMap():

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

Zdroje dat:

• [Natural Earth] (https://naturalearthdata.com) - Data mapy veřejných domén
• [GADM] (https://gadm.org) - Podrobné správní hranice
• [Mapshaper] (https://mapshaper.org) - Zjednodušit soubory GeoJSON

Tipy

1. • • Použijte World HighRes * * pro profesionální export s multipolygonovými zeměmi
2. • • Natural Earth projektion * * funguje nejlépe pro většinu světových map
3. • • Albers USA * * je speciálně navržen pro americké mapy
4. • • Ortografický * * vytváří dramatický pohled na svět pro prezentace
5. • • Profesionální kvalita * * zabraňuje poškozování tvarů ve složitých zemích

Klávesové zkratky

Animace mapy regionu

Animujte oblasti mapy s časovou integrovanou změnou barev. Ideální pro zobrazování změn dat v čase, globálních rozšiřujících sekvencí, nebo vytváření zapojení vizualizace dat.

Animace základního regionu

Animujte specifické regiony s barevnými přechody na bázi kláves:

// 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
    ]
  }
});

Vlnová animace

Vytvořit vlnu barev ve všech regionech na základě zeměpisné polohy:

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

Časová integrace

Animované regiony se integrují do časové řady UI:

• Animované regiony se objeví v panelu Časování
• Scrub v čase na náhled změny barvy
• Přehrát / zastavit animace s časovými kontrolami
• Exportní animace na video nebo GIF

! [Časová osa s animací mapy] (…/images/timeline-with-keyframes.png)

Zastavit animace

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

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

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

Získání animovaných regionů

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

Vývoz a dovoz CSV

Údaje o exportních a importních regionech včetně barev, zvýraznění stavu a stavu výběru pro vizualizace založené na datech.

Údaje o regionu vývozu

// 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');

CSV Format:

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

Údaje o dovážející oblasti

Importovat data CSV pro aktualizaci stavů regionu:

// 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
});

Výběr programu

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

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

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

Workflow: Editace map založených na skel

1. Nahrát mapu a zvýraznit některé regiony
2. Export do CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Upravit v Excel / Prostěradla Google (změna barev, sada zvýrazněna = 1)
4. Importovat zpět: app.importMapRegionDataCSV(updatedCsv)

Tento pracovní postup je ideální pro:

• Non- technical users editing map data
• Bulk aktualizace do mnoha regionů
• Integrace datového potrubí
• Konfigurace map ovládaná verzí

Vývoz a dovoz GeoJSON

Exportovat mapy jako GeoJSON pro editaci v externích nástrojích, jako je QGIS nebo Mapshaper, pak znovu importovat s vašimi úpravami.

Exportovat modifikovanou mapu

Exportovat mapu s aktuálními barvami a styly:

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

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

Exportovat původní zdroj

Stáhněte si přesný GeoJSON, který byl použit k načtení mapy (nezměněné hranice):

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

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

Importovat vlastní mapy

Importujte editovaná data GeoJSON nebo externí mapová data:

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

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

Full Workflow: Upravit → Re- import → Animace

1. • • Load and export * * původní mapa:

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

2. • • Upravit hranice * * ve vnějších nástrojích:
   • [QGIS] (https://qgis.org) - Full- Featured GIS editor
   • [Mapshaper] (https://mapshaper.org) - Online zjednodušení a úprava
   • [geojson.io] (https://geojson.io) - Rychlý online editor
3. • • Re-import * * vaše upravená mapa:

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

4. • • Animate * * Vaše vlastní mapa:

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

Informace o zdroji mapy

Získejte informace o aktuálně načtené mapě:

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

Vnější zdroje

Zdroje map dat

Převod a úprava nástrojů

Formát konverze Workflow

Tvar → GeoJSON (pomocí Mapshaper):

1. Přejít na [mapshaper.org] (https://mapshaper.org)
2. Přetáhněte a upusťte soubor s .shp (spolu se soubory .dbf a .prj)
3. Klikněte * * Zjednodušit * * pro snížení velikosti souboru (použijte 10-20% pro web)
4. Klikněte na * * Export * * → vyberte * * GeoJSON * *
5. Importovat do PinePaper s app.importCustomMap()

TopoJSON → GeoJSON:

Soubory TopoJSON se automaticky převádějí při dovozu na PinePaper.

Tipy velikosti souboru

Odkaz na API

Pro programovou kontrolu mapy viz [Mapový systém API dokumentace] (/api/features/maps).