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

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

ספירת מוניות בניו יורק לפי מיקוד
ספירת מוניות מונפשת בניו יורק לפי גבולות של מיקוד (סימולציה, זמן חולף):

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

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

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

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

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

רוצים לנסות? נכנסים למסוף Google Cloud ומפעילים את Maps JavaScript API.

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

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

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

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

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

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

שלב 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