סקירה כללית
מפה גיאוגרפית היא מפה של מדינה, יבשת או מפת אזורים, עם צבעים וערכים שהוקצו לאזורים מסוימים. הערכים מוצגים בסולם צבעים, ואפשר לציין את הטקסט האופציונלי של האזורים. עיבוד המפה מתבצע בדפדפן באמצעות נגן Flash מוטמע. שימו לב שהמפה לא ניתנת לגלילה או שהיא לא ניתנת לגרירה, אבל ניתן להגדיר אותה כך שתהיה אפשרות לשנות את מרחק התצוגה.
דוגמאות
יש לנו כאן שתי דוגמאות: אחת שמבוססת על סגנון התצוגה של אזורים, ושנייה שמשתמשת בסגנון התצוגה של סמנים.
דוגמה לאזורים
סגנון האזורים ממלא אזורים שלמים (בדרך כלל מדינות) בצבעים התואמים לערכים שהוקצה לך. מציינים את סגנון האזורים על ידי הקצאת options['dataMode']
= 'regions'
בקוד.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', { 'packages':['geomap'], // Note: you will need to get a mapsApiKey for your project. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; options['dataMode'] = 'regions'; var container = document.getElementById('regions_div'); var geomap = new google.visualization.GeoMap(container); geomap.draw(data, options); }; </script> </head> <body> <div id="regions_div" style="width: 900px; height: 500px;"></div> </body> </html>
דוגמה בתגי עיצוב
סגנון ה"סמנים" מציג עיגול, גודל וצבע כדי לציין ערך, מעל לאזורים שציינת.
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load('current', {'packages': ['geomap']}); google.charts.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['City', 'Popularity'], ['New York', 200], ['Boston', 300], ['Miami', 400], ['Chicago', 500], ['Los Angeles', 600], ['Houston', 700] ]); var options = {}; options['region'] = 'US'; options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors options['dataMode'] = 'markers'; var container = document.getElementById('map_canvas'); var geomap = new google.visualization.GeoMap(container); geomap.draw(data, options); }; </script> </head> <body> <div id='map_canvas'></div> </body> </html>
בטעינה
שם החבילה של google.charts.load
הוא "geomap"
google.charts.load('current', {'packages': ['geomap']});
שם הסיווג של התצוגה החזותית במפה גיאוגרפית הוא google.visualization.GeoMap
var visualization = new google.visualization.GeoMap(container);
פורמט נתונים
ניתן להשתמש בשני פורמטים של כתובות, שכל אחד מהם תומך במספר שונה של עמודות, ובסוגי נתונים שונים בכל עמודה. כל הכתובות בטבלה צריכות להשתמש באחת מהכתובות השנייה. לא ניתן לשלב סוגים מסוימים.
- פורמט 1: מיקומים של קווי אורך ורוחב. הפורמט הזה פועל רק אם האפשרות
dataMode
היא 'סמנים'. אם משתמשים בפורמט הזה, אין צורך לכלול את ה-JavaScript של מפת Google. המיקום מוזן בשתי עמודות ושתי עמודות אופציונליות:- [מספר, חובה] קו רוחב. מספרים חיוביים הם בצפון, מספרים שליליים הם דרום.
- [מספר, חובה] קו אורך. מספרים חיוביים הם במזרח, מספרים שליליים מערבים.
- [מספר, אופציונלי] ערך מספרי שמוצג כשהמשתמש מעביר את העכבר מעל לאזור הזה. אם משתמשים בעמודה 4, צריך להשתמש בעמודה הזו.
- [מחרוזת, אופציונלי] טקסט נוסף במחרוזת שמוצג כשהמשתמש מעביר את העכבר מעל לאזור הזה.
- פורמט 2: כתובת, שם מדינה, מיקומים של שמות אזורים או קידומות עירוניות בארה"ב. פורמט זה פועל עם האפשרות
dataMode
מוגדרת כ'סמנים' או 'אזורים'. המיקום מוזן בעמודה אחת, בתוספת שתי עמודות אופציונליות:- [מחרוזת, חובה] מיקום במפה. ניתן להשתמש בפורמטים הבאים:
- כתובת ספציפית (לדוגמה, "שדרות פנסיון 1600").
- שם מדינה כמחרוזת (לדוגמה, 'אנגליה'), או קוד ISO-3166 באותיות גדולות או שווה ערך באנגלית (לדוגמה, 'GB' או 'בריטניה').
- שם אזור באותיות גדולות מסוג ISO-3166-2 או המקבילה שלו בטקסט באנגלית (לדוגמה, "US-NJ" או "New לבני ג'רזי"). הערה: אפשר לציין אזורים רק כשהאפשרות dataMode מוגדרת ל'אזורים'.
- אזור חיוג מטרופוליני . אלו הם קודי מטרו תלת-ספרתיים המשמשים להקצאה של אזורים שונים. קודי ארה"ב נתמכים בלבד. חשוב לשים לב שאלו לא זהים לקידומות חיוג.
- [מספר, אופציונלי] ערך מספרי שמוצג כשהמשתמש מעביר את העכבר מעל לאזור הזה. אם משתמשים בעמודה 3, צריך להשתמש בעמודה הזו.
- [מחרוזת, אופציונלי] טקסט נוסף במחרוזת שמוצג כשהמשתמש מעביר את העכבר מעל לאזור הזה.
- [מחרוזת, חובה] מיקום במפה. ניתן להשתמש בפורמטים הבאים:
הערה: מפה יכולה להציג עד 400 רשומות. אם DataTable או DataView מכילים יותר מ-400 שורות, יוצגו רק 400 השורות הראשונות. המצבים המהירים ביותר הם dataMode='regions'
עם מיקומים שצוינו כקודי ISO ו-dataMode='markers'
עם קווי אורך ורוחב. המצב האיטי ביותר הוא dataMode='markers'
עם כתובת מחרוזת.
חשוב: הDataTable
חייבת לכלול כל עמודה
אופציונלית לפני כל עמודה שבה רוצים להשתמש. לדוגמה, אם רוצים לציין טבלה של קווי אורך/רוחב, ואתם רוצים להשתמש רק בעמודות 1 , 2 ו-4, ה-DataTable
עדיין צריך להגדיר את עמודה 3 (למרות שלא צריך להוסיף לה ערכים):
dataTable = new google.visualization.DataTable(); dataTable.addRows(1); dataTable.addColumn('number', 'LATITUDE', 'Latitude'); dataTable.addColumn('number', 'LONGITUDE', 'Longitude'); dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it. dataTable.addColumn('string', 'HOVER', 'HoverText'); dataTable.setValue(0,0,47.00); dataTable.setValue(0,1,-122.00); dataTable.setValue(0,3,"Hello World!");
אפשרויות תצורה
שם | סוג | ברירת מחדל | תיאור |
---|---|---|---|
region |
string | 'עולם' | האזור שיוצג במפה. (יוצגו גם אזורים מסביב). הקוד יכול להיות קוד מדינה (בפורמט ISO-3166 באותיות רישיות) או אחת מהמחרוזות הבאות:
מיפוי גיאוגרפי לא מאפשר התנהגות גלילה
או גרירה, והתנהגות זום מוגבלת בלבד. אפשר להפעיל הקטנת תצוגה בסיסית על ידי הגדרת המאפיין |
dataMode |
string | 'אזורים' | הצגת הערכים במפה. יש שני ערכים נתמכים:
|
width |
string | '556 פיקסלים' | רוחב ההצגה. אם לא נתת יחידות, יחידת ברירת המחדל היא פיקסלים. |
height |
string | '347 פיקסלים' | גובה התצוגה החזותית. אם לא נתת יחידות, יחידת ברירת המחדל היא פיקסלים. |
colors |
מערך של מספרי RGB בפורמט 0xRRGGBB | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | שינוי צבעים הדרגתי כדי להקצות ערכים לוויזואליזציה. חייבים להיות לפחות שני ערכים. ההדרגה תכלול את כל הערכים שלך, וכן את ערכי המתווך המחושבים כשהצבע הבהיר ביותר יהיה את הערך הקטן ביותר ואת הצבע הכהה ביותר כגבוה. |
showLegend |
boolean | נכון | אם True, יש להציג מקרא עבור המפה. |
showZoomOut |
boolean | לא נכון | אם True, יש להציג לחצן עם התווית שצוינה על ידי המאפיין zoomOutLabel . חשוב לשים לב שהלחצן הזה לא עושה כלום כשלוחצים עליו, חוץ ממחיקת האירוע zoomOut .
כדי לשנות את מרחק התצוגה, אפשר לערוך את האירוע ולשנות את האפשרות region .
אפשר לציין showZoomOut רק אם האפשרות region קטנה מתצוגת העולם. אחת הדרכים להפעיל שינוי מרחק התצוגה היא להאזין לאירוע בregionClick , לשנות את המאפיין region לאזור המתאים ולטעון מחדש את המפה. |
zoomOutLabel |
string | 'התרחק' | התווית של לחצן הזום. |
שיטות
שיטה | סוג הערך המוחזר | תיאור |
---|---|---|
draw(data, options) |
ללא | משרטט את המפה. ניתן לחזור לפני סיום השרטוט (ראו אירוע drawingDone() ). |
getSelection() |
מערך של רכיבי בחירה | הטמעה רגילה של getSelection() . הרכיבים שנבחרו
הם שורות. השיטה הזו פועלת רק אם האפשרות dataMode
היא 'אזורים'. ניתן לבחור רק אזור עם ערך שהוקצה. |
setSelection(selection) |
ללא | הטמעה רגילה של setSelection() . התייחסות לבחירה
כשורת בחירה, ותמיכה במגוון אפשרויות בחירה. אפשר לבחור רק אזורים
עם ערכים שהוקצו. |
אירועים
שם | תיאור | נכסים |
---|---|---|
error |
מופעל כשמתרחשת שגיאה במהלך הניסיון לעבד את התרשים. | מזהה, הודעה |
select |
מופעל כשהמשתמש לוחץ על אזור עם ערך שהוקצה לו. כדי לדעת
מה נבחר, אפשר להתקשר למספר הערה: עקב מגבלות מסוימות, האירוע |
ללא |
regionClick |
מתקשרים כשלוחצים על אזור. פועל גם עבור 'אזורים' וגם עבור 'סמנים' הערה: עקב הגבלות מסוימות, האירוע |
אובייקט עם מאפיין יחיד (region ) שהוא מחרוזת בפורמט ISO-3166 שמתאר את האזור שעליו לוחצים. |
zoomOut |
מתבצעת התקשרות כשלוחצים על הלחצן להקטנת התצוגה. כדי לשנות את מרחק התצוגה, אפשר לערוך את האירוע ולשנות את האפשרות הערה: עקב מגבלות מסוימות, האירוע |
ללא |
drawingDone |
מתבצעת קריאה לאחר שהתרשים הגיאוגרפי סיים לשרטט. | ללא |
מדיניות נתונים
המיקומים מופיעים במפות גיאוגרפיות על ידי מפות Google. נתונים שאינם דורשים קידוד גיאוגרפי לא נשלחים לאף שרת. יש לעיין בתנאים ובהגבלות של מפות Google לקבלת מידע נוסף על מדיניות הנתונים שלהם.
הערות
בשל הגדרות האבטחה של Flash, ייתכן שהתצורה הזו (וכל הרכיבים החזותיים מבוססי ה-Flash) לא תפעל כראוי כאשר הגישה אליה מתבצעת ממיקום קובץ בדפדפן (לדוגמה, file:///c:/webhost/myhost/myviz.html) ולא מכתובת URL של שרת אינטרנט (למשל, http://www.myhost.com/myviz.html). בדרך כלל מדובר בבעיה בבדיקה בלבד. אפשר להתגבר על הבעיה הזו כפי שמתואר באתר של Macromedia.