מערכת Map

צור ויזואליזציה גיאוגרפית מדהימה עם מפות אינטראקטיביות, צבע נתונים choropleth, וחושף אנימציה.

מפת העולם הטבעית (…/images/map-world-natural-earth.png)

סקירה

מערכת המפה מספקת:

• World & Regional Maps - מפות מועלות מראש מ- CDN (עולם, ארה"ב, אירופה וכו ')
• Projections - Mercator, Natural Earth, Orthographic (globe), Albers ועוד
• **העברה גבוהה - מדינות אור גבוה, מדינות או מחוזות
• Data Visualization - מפות כולסטרול עם סולמות צבעים
• Markers & Labels - הוספת נקודות עניין
• איכות מקצועית - תמיכה רב-אפוקליפטית במדינות מורכבות

לטעון מפה

תבניות

הדרך הקלה ביותר להתחיל היא באמצעות תבנית מפה:

1. פתח את לוח הזמנים **
2. מצא את הקטגוריה Maps
3. בחרו תבנית כמו “מפת הרחבה גלובלית” או “SUS Data Visualization”

לוח גנרטור

1. פתח את הפאנל **Generator
2. בחר Map** כסוג הרקע
3. בחר מפה (עולם, ארה"ב, אירופה וכו’)
4. תכנון וסטיילינג

סוגי מפות

פרויקטים

בחר את ההקרנה הנכונה עבור הויזואליזציה שלך:

כדור הארץ הטבעי (Default)

הטוב ביותר עבור מפות העולם עיוות מאוזן, נראה טבעי.

(Natural Earth Projection)

מרסר

שמור על זוויות, מבט מוכר. טוב למפות בסגנון ניווט.

(הופנה מהדף …/images/map-mercator-projection.png)

Orthographic (Globe)

מציג את כדור הארץ כמרחב 3D. גדול לעמדות אזוריות ממוקדות.

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

Albers USA

הקרנה מיוחדת למפות אמריקאיות הכוללות את אלסקה והוואי.

ארצות הברית Albers (…/images/map-usa-albers.png)

פרויקטים אחרים

• Robinson* - פרויקט פשרה, טוב למפות עולם
• Winkel Tripel - פרויקט עיוות נמוך
• אזור שווה ערך - טוב לאזורים בינוניים

אזורי תאורה גבוהים

מדינה / מדינה

לחץ על כל אזור כדי לבחור אותו לאחר מכן השתמש בפאנל הנכסים כדי לשנות את צבעו.

אזורים רבים

השתמש ב- API או תבניות כדי להדגיש מספר אזורים:

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

גילויי אנימציה

תבניות יכולות להיות אזוריות מדגישות עם תזמון מזורז לאפקטי סיפור.

אזורים מוארים

פורמט מזהה אזורי

מפות שונות משתמשות בתבניות זיהוי שונות:

ויזואליזציה (Choropleth)

אזורי צבעים המבוססים על ערכי נתונים:

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

סולם הצבעים

מארקרס

הוסף סמנים נקודה בקואורדינטות ספציפיות:

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

הגדרות איכות

הודעה: השתמש באיכות professional עבור מדינות עם צורות מורכבות (רוסיה, צרפת, ארה"ב) כדי להבטיח את כל חלקי השטח כראוי.

מדינות Multi-Polygon

חלק מהמדינות מורכבות מכמה חלקים מנותקים:

• רוסיה** - Mainland + Kaliningrad + איים
• • צרפת** - Mainland + Corsica + שטחים בחו"ל
• ארצות הברית - Mainland + אלסקה + הוואי (במפות עולמיות)
• • Indonesia** - אלפי איים
• Fiji - מספר איים

מערכת המפה משתמשת באופן אוטומטי Paper.js CompoundPath עבור מדינות אלה כאשר איכות מוגדר professional.

אינטראקטיביות

השפעות Hover Effects

מרחף בולט:

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

לחץ על אירועים

תגובה להורדת האזור:

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

תבניות מפות

מפת הרחבה גלובלית

הצג התרחבות עסקית בכל האזורים עם הדגשה מבוססת שלב.

US Data Visualization

מציג נתונים ברחבי ארצות הברית עם צבע choropleth.

מפה אישית

עבור מפות אזוריות מפורטות שלא נכללו, השתמש importCustomMap():

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

מקורות נתונים:

• Natural Earth – אתר ציבורי
• GADM – גבולות מנהליים מפורטים
• Mapshaper - קובץ GeoJSON

טיפים

1. **הרחבה העולמית ליצוא מקצועי עם מדינות מרובות-polygon
2. • הקרנה של כדור הארץ טבעי** עובד הכי טוב עבור רוב מפות העולם
3. אלברסל ארה"ב מיועד במיוחד למפות אמריקאיות
4. • אורתוגרפיה* יוצרת תצוגות כדור הארץ דרמטיות למצגות
5. • איכות מקצועית ** מונעת צורה של שחיתות במדינות מורכבות

Keyboard Shortcut

אזור Map Animation

אזורי מפה איננים עם שינויי צבע ממושכים. מושלם להצגת שינויים בנתונים לאורך זמן, רצף התרחבות גלובלית, או יצירת ויזואליזציה של נתונים מרתקים.

אזור אנימציה

אזורים ספציפיים עם מעברי צבע מבוססי מסגרת מפתח:

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

Wave Animation

צור גל צבעים בכל האזורים המבוססים על מיקום גיאוגרפי:

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

אינטגרציה

אזורי אנימציה משולבים עם ציר הזמן UI:

• אזורים אנימציה מופיעים בלוח הזמנים
• Scrub לאורך זמן לשינויים בצבע תצוגה מקדימה
• Play/pause Animations with the timeline control
• תמונות וידאו או GIF

[Timeline with Map Animations]

לעצור את האנימציה

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

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

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

מקבל אזור אנימציה

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

CSV יצוא וייבוא

נתוני הייצוא והייבוא כולל צבעים, מצב הדגשה ומדינת הבחירה עבור הדמיה מבוססת נתונים.

יצוא נתונים

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

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

ייבוא נתונים

ייבוא נתוני CSV לעדכון מדינות האזור:

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

בחירת תוכנה

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

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

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

הפקה: Spreadsheet-based Map Editing

1. לטעון מפה ולהדגיש כמה אזורים
2. מקור: CSV: app.downloadMapRegionDataCSV('regions.csv')
3. Edit in Excel / Google Sheets (שינוי צבעים, להגדיר=1)
4. תגית: app.importMapRegionDataCSV(updatedCsv)

זרימת העבודה הזו היא אידיאלית עבור:

• משתמשים שאינם טכניים עריכת מפה נתונים
• עדכונים לתחומים רבים
• אינטגרציה
• הגדרות מפה מבוקרות

GeoJSON יצוא וייבוא

מפות ייצוא כ- GeoJSON לעריכה בכלים חיצוניים כגון QGIS או Mapshaper, ולאחר מכן להזין מחדש את השינויים שלך.

תגית: Modified Map

מייצא את המפה עם צבעים וסגנונות נוכחיים:

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

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

מקור מקורי

הורד את GeoJSON המדויק המשמש לטעון את המפה (גבולות לא אחידים):

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

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

ייבוא Custom Maps

ייבוא נתוני ה- GeoJSON המעודכנים שלך:

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

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

תגית: Edit - Re-import

1. לואד וייצוא המפה המקורית:

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

2. עריכה גבולות בכלים חיצוניים:

   • (QGIS)(https://qgis.org) - עורך GIS בעל ביצועים מלאים
   • Mapshaper - פשטות ועריכה
   • (geojson.io)(https://geojson.io) - עורך מקוון מהיר

3. Re-import שלך מפה:

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

4. **הופנה מהדף מותאם אישית:

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

מקור תמונה

קבלו מידע על המפה המוטעת כיום:

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

משאבים חיצוניים

מקור נתונים מפה

המונחים & Editing Tools

עיצוב Conversion Workflow

GeoJSON (באמצעות Mapshaper):

1. Go to [mapshaper.org]
2. דרגו והורידו את קובץ .shp (יחד עם קבצי .dbf ו- .prj)
3. לחץ Siלהגדיל כדי להפחית את גודל הקובץ (שימוש 10-20% עבור האינטרנט)
4. לחץ על Export בחר GeoJSON
5. ייבוא PinePaper עם app.importCustomMap()

TopoJSON:

קבצי TopoJSON מומרים באופן אוטומטי כאשר מיובאים ל- PinePaper.

תגית:

API

עבור בקרת מפה מתודולוגית, ראה את מסמך API (/api/features/maps).