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

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

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

עיצוב מבוסס-נתונים הוא יכולת של הפלטפורמה של מפות 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 מעודכנים לכל מיקוד.

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

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

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

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