System map

Tworzenie oszałamiających wizualizacji geograficznych z interaktywnych map, choropleth danych barwiących i animowanych ujawnia.

[Mapa Ziemi Naturalnej] (…/images/map-world-natural-earth.png)

Przegląd

System map zapewnia:

• • • World & Regional Maps * * - wcześniej załadowane mapy z CDN (świat, USA, Europa, itp.)
• • • Liczne projekcje * * - Mercator, Natural Earth, Orthographic (globus), Albers i więcej
• • • Podświetlanie regionu * * - Podświetlenie krajów, stanów lub prowincji
• • • Data Visualization * * - Choropleth mapy z skalami kolorów
• • • Markers & Labels * * - Dodaj punkty zainteresowania
• • • Jakość zawodowa * * - Wielofunkcyjne wsparcie dla złożonych krajów

Wczytywanie mapy

Z szablonów

Najprostszym sposobem rozpoczęcia jest użycie szablonu mapy:

1. Otwórz panel szablonów * *
2. Znajdź kategorię * * Mapy * *
3. Wybierz szablon taki jak “Global Expansion Map” lub “US Data Visualization”

Z panelu generatora

1. Otwórz panel * * Generator * *
2. Wybierz * * Mapa * * jako typ tła
3. Wybierz mapę (Świat, USA, Europa itp.)
4. Konfiguracja projekcji i stylizacji

Typy map

Prognozy

Wybierz odpowiednią projekcję do wizualizacji:

Ziemia naturalna (domyślnie)

Najlepsze dla map świata. Zbalansowane zniekształcenie, wygląda naturalnie.

[Natural Earth Projection] (…/images/map-world-natural-earth.png)

Mercator

Konserwy pod kątem, znajomy wygląd. Dobre na mapy w stylu nawigacyjnym.

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

Ortograficzne (Globe)

Pokazuje Ziemię jako sferę 3D. Idealny dla skupionych widoków regionu.

(…/images/map-orthographic-globe.png)

Albers USA

Specjalna projekcja amerykańskich map, która obejmuje Alaskę i Hawaje przestawione.

Inne prognozy

• • • Robinson * * - Projekcja kompromisowa, dobra dla map świata
• • • Winkel Tripel * * - Niskie zniekształcenie projekcji światowej
• • • Conic Equal Area * * - Dobre dla regionów o średniej szerokości geograficznej

Podświetlanie regionów

Pojedyncze państwo / państwo

Kliknij na dowolny region, aby go wybrać, następnie użyj panelu Właściwości, aby zmienić jego kolor.

Regiony wielonarodowe

Użyj API lub szablonów, aby podkreślić wiele regionów:

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

Animowane objawienia

Szablony mogą animować najważniejsze elementy regionu z opóźnionym czasem na opowiadanie o efektach.

[Zaznaczone regiony] (…/images/map-world-highlighted.png)

Formaty identyfikacyjne regionu

Różne mapy używają różnych formatów ID:

Wizualizacja danych (Choropleth)

Regiony kolorów oparte na wartościach danych:

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

Skale kolorów

Znaczniki

Dodać znaczniki punktów w określonych współrzędnych:

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

Ustawienia jakości

Ważne: Używać jakości professional dla krajów o złożonych kształtach (Rosja, Francja, USA) w celu zapewnienia prawidłowego renderowania wszystkich części terytorium.

Kraje wielonarodowe

Niektóre kraje składają się z wielu odłączonych części:

• • • Rosja * * - Mainland + Kaliningrad + wyspy
• • • Francja * * - Polska + Korsyka + terytoria zamorskie
• • • USA * * - Mainland + Alaska + Hawaje (na mapach świata)
• • • Indonezja * * - tysiące wysp
• • • Fidżi * * - wiele wysp

System map automatycznie wykorzystuje Paper.js CompoundPath dla tych krajów, gdy jakość jest ustawiona na professional.

Interakcja

Skutki dla hover

Włącz podświetlanie:

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

Kliknij Zdarzenia

Odpowiedź na kliknięcia w regionie:

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

Szablony map

Globalna mapa rozszerzeń

Pokazuje ekspansję biznesu w różnych regionach z animowanym fazeooparciem.

Wizualizacja danych USA

Wyświetla dane w Stanach Zjednoczonych z choropleth barwiących.

Własny import mapy

W przypadku nieuwzględnionych szczegółowych map regionalnych należy użyć importCustomMap():

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

Źródła danych:

• [Natural Earth] (https://naturalearthdata.com) - Public domain map data
• [GADM] (https://gadm.org) - Szczegółowe granice administracyjne
• [Mapshaper] (https://mapshaper.org) - Uproszczenie plików GeoJSON

Wskazówki

1. • • Use worldHighRes * * for professional export with multi- polygon countries
2. • • Natural Earth projection * * działa najlepiej dla większości map świata
3. • • Albers USA * * jest specjalnie zaprojektowany do amerykańskich map
4. • • Orthographic * * tworzy dramatyczne widoki globu na prezentacje
5. • • Jakość zawodowa * * zapobiega korupcji w złożonych krajach

Skróty klawiszowe

Mapa Region Animacja

Animować obszary map ze zintegrowanymi w czasie zmianami kolorów. Idealny do wyświetlania zmian danych w czasie, globalnych sekwencji rozszerzających lub tworzenia angażujących wizualizacji danych.

Podstawowa animacja regionu

Animować konkretne regiony z klawiszowymi zmianami kolorów:

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

Animacja fal

Utwórz falę kolorów we wszystkich regionach w oparciu o położenie geograficzne:

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

Integracja w czasie

Regiony animowane integrują się z UI Timeline:

• Regiony animowane pojawiają się w panelu czasowym
• Przepłukać w czasie, aby podgląd zmian kolorów
• Odtwarzanie / pauza animacji z kontrolą linii czasu
• Eksportuj animacje do wideo lub GIF

[Czas z animacjami map] (…/images/timeline-with-keyframes.png)

Zatrzymanie animacji

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

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

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

Uzyskanie animowanych regionów

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

CSV Eksportuj i importuj

Eksportuj i importuj dane regionu, w tym kolory, status podświetlenia i stan selekcji dla wizualizacji danych.

Dane dotyczące regionu wywozu

// 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

Dane dotyczące regionu przywozu

Importuj dane CSV do aktualizacji stanu 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
});

Wybó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: Arkusz Spreadsheet- Na podstawie edycji mapy

1. Wczytaj mapę i podświetl niektóre regiony
2. Eksport do CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Edycja w arkuszach Excel / Google (zmiana kolorów, podświetlenie = 1)
4. Przywóz z powrotem: app.importMapRegionDataCSV(updatedCsv)

Ten przepływ pracy jest idealny do:

• Nietechniczni użytkownicy edytujący dane mapy
• Masowe aktualizacje w wielu regionach
• Integracja rurociągu danych
• Konfiguracje map sterowanych pionowo

GeoJSON Eksportuj i importuj

Eksportuj mapy jako GeoJSON do edycji w zewnętrznych narzędziach, takich jak QGIS lub Mapshaper, a następnie ponownie importuj ze swoimi modyfikacjami.

Eksportuj zmodyfikowaną mapę

Eksportuj mapę z bieżącymi kolorami i stylami:

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

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

Eksportuj źródło pierwotne

Pobierz dokładny GeoJSON, który został użyty do wczytania mapy (niezmienione granice):

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

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

Importuj własne mapy

Importuj edytowane dane GeoJSON lub mapy zewnętrznej:

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

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

Pełny przepływ pracy: Edycja → Reimport → Animacja

1. • • Załadunek i eksport * * oryginalna mapa:

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

2. • • Edytuj granice * * w narzędziach zewnętrznych:
   • [QGIS] (https://qgis.org) - edytor GIS z pełną funkcją
   • [Mapshaper] (https://mapshaper.org) - Uproszczenie i edycja online
   • [geojson.io] (https://geojson.io) - Szybki edytor online
3. • • Reimport * * Twoja edytowana mapa:

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

4. • • Animacja * * Twoja niestandardowa mapa:

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

Mapa źródło informacji

Pobierz informacje o aktualnie załadowanej mapie:

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

Zasoby zewnętrzne

Mapowanie źródeł danych

Narzędzia do konwersji i edycji

Format Konwersja Workflow

Shapefile → GeoJSON (za pomocą Mapshaper):

1. Przejdź do [mapshaper.org] (https://mapshaper.org)
2. Przeciągnij i upuść swój plik .shp (wraz z plikami .dbf i .prj)
3. Kliknij * * Uprość * *, aby zmniejszyć rozmiar pliku (użyj 10- 20% dla strony internetowej)
4. Kliknij * * Eksportuj * * → wybierz * * GeoJSON * *
5. Import do PinePaper z app.importCustomMap()

TopoJSON → GeoJSON:

Pliki TopoJSON są automatycznie konwertowane przy importowaniu do PinePaper.

Porady wielkości pliku

Numer referencyjny API

Programowe sterowanie mapami, patrz [Dokumentacja systemu map API] (/api/features/maps).