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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

השלב הראשון הוא לזהות את הנתונים שאתם רוצים להציג ולוודא שאפשר להתאים אותם לגבולות של Google. אפשר לבצע את ההתאמה הזו בצד הלקוח על ידי קריאה לשיטת הקריאה החוזרת (callback) של 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 Functions. 

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, הגיע הזמן לתת לו סגנון כמפה כורופלית.

בדוגמה הזו אפשר לעצב את המפה לפי מספר המוניות בכל מיקוד, כך שהמשתמשים יקבלו מושג לגבי צפיפות המוניות והזמינות באזור שלהם. הסגנון ישתנה בהתאם לערכים של מספר המוניות. באזורים שבהם מוניות מעטות ביותר יוחל סגנון בצבע סגול, והדרגתיות של הצבעים תזוז באדום וכתום ותסתיים בצהוב מוניות בניו יורק באזורים הצפיפות ביותר. בערכת הצבעים הזו, עליך להחיל את ערכי הצבעים האלה על fullColor ו-touchColor. הגדרת ה-fillOpacity ל-0.5 מאפשרת למשתמשים לראות את המפה הבסיסית, והגדרת ה-flightOpacity ל-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