Sistema ng Mapa

Gumawa ng kahanga - hangang heograpikong mga visualization na may interaktibong mga mapa, maliliit na data coloring, at masiglang pagsisiwalat.

Overview

Ang Mapang Sistema ay nagbibigay:

• World & Regional Maps — Pre-based na mga mapa mula sa CDN (sanlibutan, USA, Europa, atbp.)
• Mga Proyektong Multiple — Mercator, Likas na Lupa, Ortograpiya (globe), Albers, at higit pa
• Pagtatampok — Itinatampok ang mga bansa, estado, o mga lalawigan
• *Data Visualization — Mga mapa ng Choropleth na may kaliskis ng kulay
• ** Mga Marker & Labels* — Magdagdag ng mga punto ng interes
• *Profesional Quality — Multi-polygon suporta para sa mga komplikadong bansa

Pagbuhat ng Mapa

Mula sa mga template

Ang pinakamadaling paraan upang magsimula ay ang paggamit ng isang template sa mapa:

1. Buksan ang ** template* panel
2. Hanapin ang *Maps kategorya
3. Pumili ng template tulad ng “Global Expansion Map” o “US Data Visualization”

Mula sa Kapampangan

1. Buksan ang *Generador panel
2. Pumili Map bilang background type
3. Pumili ng mapa (World, USA, Europa, atbp.)
4. Pagkalkula at pag - iistruktura

Mga Uri ng Mapa

Mga Proyekto

Pumili ng tamang usli para sa iyong visualization:

Likas na Lupa (Default)

Pinakamabuti para sa mga mapa ng daigdig. Ang timbang na pagpilipit, mukhang natural.

Mercator

Nag - iingat ng mga anggulo, pamilyar na hitsura. Mahusay sa mga mapa ng nabigasyon-style.

Ortograpiya (Globe)

Ipinapakita ang Lupa bilang isang 3D sphere. Malaki para sa mga nakatuong pananaw sa rehiyon.

Albers USA

Ang espesyal na projection para sa mga mapa ng US kabilang ang Alaska at Hawaii repositioned.

Iba Pang mga Proyekto

• *Robinson — nakikipagkompromisong pagtaya, mabuti para sa mga mapa ng daigdig
• *Winkel Trivel — Mababang maling tantiya ng daigdig
• Conic Equal Area — Mabuti para sa mga rehiyon sa kalagitnaan ng lupa

Pagtatampok ng mga Rehiyon

Iisang Bansa/State

Klick sa anumang rehiyon upang piliin ito , pagkatapos ay gamitin ang Properties panel upang baguhin ang kulay nito.

Maraming Rehiyon

Gamitin ang API o template upang itampok ang maraming rehiyon:

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

Masasayang Pagsisiwalat

Ang mga template ay maaaring magtampok ng kapaki - pakinabang na mga rehiyon taglay ang nakalilitong panahon para sa mga epekto ng pagkukuwento.

Rehiyong ID Formats

Iba’t ibang mapa ang gumagamit ng iba’t ibang ID format:

Paglalarawan ng Data (Khoropleth)

Mga rehiyon ng kulay batay sa mga halaga ng datos:

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

Sumikat ang Kulay

Mga Marka

Magdagdag ng mga palatandaan sa espesipikong mga coordinate:

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

Mahuhusay na Pagtatakda

Ilokano:* Gumamit ng professional na kalidad para sa mga bansang may masalimuot na hugis (Russia, Pransiya, USA) upang matiyak na ang lahat ng bahagi ng teritoryo ay wastong makapagsalin.

Mga Bansang Multi-Polygon

Ang ilang bansa ay may iba’t ibang bahagi:

• Russia — Mainland + Kaliningrad + isla
• Valencia — Mainland + Corsica + teritoryo sa ibayong dagat
• USA — Mainland + Alaska + Hawaii (sa mga mapa ng daigdig)
• Indonia — Libu - libong isla
• **** — Maraming - maraming isla

Ang Sistemang Mapa ay awtomatikong gumagamit ng Paper.js CompoundPath para sa mga bansang ito kapag ang kalidad ay itinakda sa professional.

Pakikipagtulungan

Labis na mga Epekto

Nakalilitong anunsiyo:

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

Nakalilitong mga Pangyayari

Tumugon sa mga tugtog sa rehiyon:

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

Mapang mga template

Mapa ng Pagpapalawak sa Buong Daigdig

Ipinapakita ang pagpapalawak ng negosyo sa ibayo ng mga rehiyon na may masiglang phase-based na pagtatampok.

Pag - unawa sa Ating mga Data

Ipinakikita ang mga impormasyon sa ibayo ng mga estado sa US na may choropleth color.

Di - Karaniwang Pag - uulat ng Mapa

Para sa detalyadong mga mapang pangrehiyon na hindi kasama, gumamit ng importCustomMap():

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

Mga Pinagmulan ng Data:

• Natural na Lupa — Public domain map data
• GADM — Detalyadong mga hangganang pampangasiwaan
• Mapshaper — Mga talaksang GeoJSON

Mga Tip

1. Use worldHighRes para sa propesyonal na pagluluwas ng mga bansang multi-polygon
2. Ang paggawa ng Lupang Natura ay pinakamabuti para sa karamihan ng mga mapa ng daigdig
3. Ang mga mang - aawit na USA* ay pantanging idinisenyo para sa mga mapa ng US
4. Orthographic ay lumilikha ng madulang tanawin sa globo para sa mga presentasyon
5. Ang propesiyal na katangian ay humahadlang sa paghubog ng korupsiyon sa mga komplikadong bansa

Mga Maikling Pagputol sa Keyboard

Pagpapagunita sa Rehiyon ng Mapa

Animate map rehiyon na may timeline-integrated na pagbabago ng kulay. Sakdal para sa pagpapakita ng mga pagbabago sa data sa paglipas ng panahon, global expansion sequences, o paglikha ng mga aksesoryang datos.

Pangunahing Anisyon sa Rehiyon

Isaalang - alang ang espesipikong mga rehiyon na may keyframe-based color transitions:

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

Pagpapadama ng Pag - ibig

Gumawa ng isang daluyong ng kulay sa lahat ng rehiyon batay sa heograpikong posisyon:

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

Paglipat sa Oras

Ang mga rehiyon ng Animated ay sumanib sa Timeline UI:

• Ang mga rehiyong muling itinayo ay makikita sa panel ng Timeline
• Mag - isip - isip upang makita ang mga pagbabago sa kulay
• Maglaro/makinang mga animasyon na may kontrol sa timeline
• Pang - export animations sa video o GIF

Paghinto sa mga Pag - iisip

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

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

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

Pagkakamit ng Masasayang Rehiyon

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

CSV Export & Import

Export at pang-aangkat na rehiyon kabilang ang mga kulay, tampok na katayuan, at piniling estado para sa data-driving visualizations.

Nagluluwas na Data sa Rehiyon

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

Pag - aangkat ng Region Data

Ganito ang sabi ng datos sa CSV sa rehiyon ng update:

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

Programang Pagpili

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

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

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

Talaksan:Liksing sheet-Based Map Editing

1. Dalhin ang mapa at itampok ang ilang rehiyon
2. Pag - uulat sa CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Edit in Excel/Google Sheets (pagbabago ng mga kulay, naka-set na nait=1)
4. Nag - uulat pabalik: app.importMapRegionDataCSV(updatedCsv)

Ang daloy na ito ng trabaho ay angkop para sa:

• Hindi-technical user na nag-aayos ng datos sa mapa
• Mga update sa Bulk sa maraming rehiyon
• Pagsasama ng mga tubo ng Data
• Bersiyon ng Bersiyon-kontrol na mapa

GeoJSON Export & Import

Export maps bilang GeoJSON para sa pagsasaayos sa mga panlabas na kasangkapan tulad ng QGIS o Mapshaper, pagkatapos ay re-import sa pamamagitan ng iyong mga modipikasyon.

Pinalawak na Mapa

I - export ang mapa sa pamamagitan ng kasalukuyang mga kulay at istilo:

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

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

Itapon ang Orihinal na Pinagmulan

Ilagay ang eksaktong GeoJSON na ginamit sa pagkarga ng mapa (di-pinatatag na mga hangganan):

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

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

Pag - aangkat ng mga Mapang Kaugalian

I-port ang inyong edition na GeoJSON o panlabas na map data:

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

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

Full Workflow: Edit → Re-import → Animate

1. Load at iluwas* ang orihinal na mapa:

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

2. Edit na mga hangganan sa panlabas na mga kasangkapan:

   • QGIS - Full-featured GSIS editor
   • Mapshaper - Online samplipikasyon at pagsasaayos
   • geojson.io - Quick online editor

3. Re-import ang iyong inayos na mapa:

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

4. Isaalang - alang ang iyong mapa ng kaugalian:

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

Pinagmumulan ng Mapa Info

Kumuha ng impormasyon tungkol sa kasalukuyang may kargang mapa:

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

Likas na Yaman

Pinagmumulan ng Mapang Data

Pagkumberte at Pagtitimpla

Mabilis na Paglipat ng Gawain

Hugis → GeoJSON (paggamit ng Mapshaper):

1. Pumunta sa mapshaper.org
2. Drag at ihulog ang iyong .shp file (kasama ng .dbf at .prj files)
3. Click Simplify upang mabawasan ang sukat ng talaksan (gamitin ang 10-20% para sa web)
4. Click Export → pumili GeoJSON
5. Sumikat sa PinePaper na may app.importCustomMap()

TopoJSON → GeoJSON:

Ang mga talaksang TopoJSON ay awtomatikong binabago kapag inangkat sa PinePaper.

Mga Tip sa Pagdami

API Reference

Para sa programmatic map control, tingnan ang Map System API Documentation.