סגנון מבוסס-נתונים בזמן אמת

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

מספר המוניות בניו יורק לפי מיקוד
מספר המוניות בניו יורק לפי גבולות המיקוד (סימולציה, Time Lapse):
מספר המוניות בניו יורק לפי מיקוד (Time Lapse) מקרא מפה

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

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

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

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

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

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

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

ארכיטקטורה
זו דיאגרמת ארכיטקטורה של האפליקציה:
ארכיטקטורה של אפליקציות

התכונה "סגנון דינמי מבוסס-נתונים"

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

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

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

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

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

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

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

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

תורמים

המחבר הראשי:

‫ Jim Leflar | מהנדס פתרונות ב-Google Maps Platform