הצגת נתונים בזמן אמת בעזרת סגנון מבוסס-נתונים

מסמך זה מתאר את הסיבה ואת אופן ההטמעה של סגנון מבוסס-נתונים דינמי של גבולות Google באמצעות ה-API של JavaScript במפות Google. ה-API הזה שימושי למגוון תרחישי שימוש בתחומים ובפלחים שונים.

ספירת מוניות בתל אביב לפי מיקוד
מוניות עם אנימציה נספרות בעיר ניו יורק לפי תחום מיקוד (סימולציה, עם הפרש זמן):
ספירת מוניות בתל אביב לפי מיקוד (Time-lapse) מקרא מפה

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

סגנון מבוסס-נתונים מאפשר ליצור מפות שמציגות את ההתפלגות הגיאוגרפית של הנתונים, להתאים אישית באופן דינמי את סגנון הפוליגונים וליצור אינטראקציה עם הנתונים דרך אירועי הקליק. ניתן להשתמש בתכונות האלה כדי ליצור מפות אינפורמטיביות ומעניינות למגוון תרחישים ותחומים.

הנה כמה דוגמאות של תרחישים לדוגמה שניתן להחיל על מפה שמציגה עדכוני נתונים דינמיים בסגנון מבוסס-נתונים:

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

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

הגישה הארכיטקטונית לפתרון

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

ארכיטקטורה
לפניכם תרשים ארכיטקטורת אפליקציות של הגישה:
ארכיטקטורת אפליקציות

הפתרון של עיצוב דינמי מבוסס-נתונים

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

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

שלב 1: בחירת נתונים להצגה חזותית וצירוף למזהה מקום של תחום

השלב הראשון הוא לזהות את הנתונים שברצונך להציג ולוודא שניתן להתאים אותם לגבולות של Google. אפשר לבצע את ההתאמה הזו בצד הלקוח באמצעות שיטת הקריאה החוזרת findPlaceFromQuery לכל מיקוד. שימו לב שלמיקודים בארה"ב יש שמות נפרדים, אבל לרמות מנהליות אחרות אין שמות נפרדים. כדאי לוודא שבחרת את מזהה המקום הנכון לשאילתה שלך במקרים שבהם התוצאות לא חד-משמעיות. 


const request = {
    query: postalCode,
    fields: ['place_id'],
};
 
function findPlaceId() {
   placesService.findPlaceFromQuery(request, function (results, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
         console.log(results[0]);
      }
   });
}

אם בנתונים שלכם יש ערכים של קווי אורך ורוחב, אפשר גם להשתמש ב-Geocoding API עם סינון רכיבים כדי להתאים את הערכים של קווי אורך ורוחב לערכי מזהה המיקום של שכבת התכונות שרוצים לעצב. בדוגמה הזו תעצב את שכבת התכונות POSTAL_CODE.

שלב 2: התחברות לנתונים בזמן אמת

יש מגוון דרכים להתחבר למקורות נתונים, וההטמעה הטובה ביותר תלויה בצרכים הספציפיים ובתשתית הטכנית שלכם. במקרה הזה, נניח שהנתונים שלכם נמצאים בטבלת BigQuery עם שתי עמודות: zip_code ו-taxi_count, ותפעילו את השאילתה באמצעות פונקציה של Firebase Cloud. 

async function queryNycTaxis() {
   // Queries the NYC Taxis dataset.

   // Create a client
   const bigqueryClient = new BigQuery();
  
   // The SQL query to run
   const sqlQuery = 'SELECT zip_code, taxi_count
      FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
      
   const options = {
      query: sqlQuery,
      // Location must match that of the dataset(s)
      // referenced in the query.
      location: 'US',
   };
  
   // Run the query
   const [rows] = await bigqueryClient.query(options);
  
   rows.forEach(row => {
      const postalCode = row['zip_code'];
      const taxiCount = row['taxi_count'];
   });
}

השלב הבא הוא לוודא שהנתונים תמיד עדכניים. אחת הדרכים לעשות זאת היא לקרוא לשאילתה שלמעלה באמצעות Web worker, ולהגדיר טיימר לרענון הנתונים באמצעות הפונקציה setInterval. תוכלו להגדיר את המרווח לערך מתאים, כמו רענון המפה כל 15 שניות. בכל פעם שמרווח הזמן חלף, עובד האינטרנט יבקש ערכים מעודכנים של TaxiCount לכל מיקוד.

עכשיו, אחרי שנוכל להריץ שאילתות על הנתונים ולרענן אותם, נוודא שהפוליגונים שבמפה משקפים את השינויים האלה.

שלב 3: עיצוב המפה עם סגנון מבוסס-נתונים

עכשיו, לאחר שיש לכם את ערכי הנתונים הדינמיים שנדרשים כדי ליצור ולהחיל סגנון חזותי על גבולות המיקוד במופע ה-JavaScript של מפות Google כאובייקט JSON, הגיע הזמן להקצות לו סגנון מסוים כמפה כורופתית.

בדוגמה הזו תעצבו את המפה בהתאם למספר המוניות בכל מיקוד, כך שהמשתמשים יקבלו תחושה של צפיפות המוניות והזמינות שלהן באזור שלהם. הסגנון ישתנה בהתאם לערכים של מספר המוניות. באזורים עם מספר המוניות הנמוך ביותר יחול סגנון סגול, והדרגתיות של הצבעים תעבור דרך אדום וכתום, ותסתיים בצהוב של מונית ניו-יורק באזורים עם צפיפות גדולה. בערכת הצבעים הזו יוחלו ערכי הצבעים האלה על fillColor ו-ArrowColor. אם תגדירו את השדה fillOpacity ל-0.5, המשתמשים יכולים לראות את המפה הבסיסית, והגדרתם את highlightOpacity ל-1.0 מאפשרת להם להבחין בין הגבולות של פוליגונים בעלי צבע זהה: 


const featureLayer = map.getFeatureLayer(
   google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
   const placeFeature = featureStyleFunctionOptions.feature;
   // taxiCount per (postal_code) PlaceID 
   const taxiCount = zips[placeFeature.placeId];
   let fillColor;
   let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
   fillColor = "#571845";  
   strokeColor = "#571845"; 
} else if (taxiCount < 13) {
   fillColor = "#900c3e";
   strokeColor = "#900c3e";
} else if (taxiCount < 21) {
   fillColor = "#c60039"; 
   strokeColor = "#c60039"; 
} else if (taxiCount < 34) {
   fillColor = "#fe5733";
   strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) { 
   fillColor = "#fec30f";
   strokeColor = "#fec30f";
}  
return {
   fillColor,
   strokeColor,
   fillOpacity: 0.5,
   strokeOpacity: 1.0,
};

סיכום

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

הפעולות הבאות

תורמים

המחבר הראשי:

ג'ים לפלר | מהנדס פתרונות הפלטפורמה של מפות Google