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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 Function.

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 לכל postalCode.

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

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

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

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

תורמים

המחבר הראשי:

Jim Leflar | מהנדס פתרונות בפלטפורמה של מפות Google