Geolocation

מדריך ללימוד Geolocation API בתקן HTML5 החדש

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

רוצים לראות דוגמא? משתמשים בדפדפן שתומך בתכונה הזו? הקליקו על הכפתור!


על מנת לקבל את המיקום, עלינו לבקש את המיקום מהגולש. הבקשה נעשית אוטומטית ברגע שאני שולח את הבקשה. הבקשה והתקשורת בכל הנושא של Geolocation נעשית באמצעות אובייקט JavaScript מסוג: navigator.geolocation. המתודה שבה אנו משתמשים על מנת לקבל את המידע היא getCurrentPosition. המתודה מקבלת פרמטר אחד (לפחות) של שם פונקציה שרצה לאחר ההצלחה. הפונקציה שרצה לאחר ההצלחה מכילה פרמטר של המיקום הגיאוגרפי.

מסובך? ממש לא! בקשה בסיסית תראה כך:


navigator.geolocation.getCurrentPosition(showUserPosition);
    
    function showUserPosition(position) {
        alert(
            position.coords.latitude 
            + " " +
            position.coords.longitude
        );
        }

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

פונקצית הכשלון מקבלת אובייקט עם קוד שגיאה:

ככה זה נראה:


function showLocation(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  alert("Latitude : " + latitude + " Longitude: " + longitude);
}
function errorHandler(err) {
  if(err.code == 1) {
    alert("Error: Access is denied!");
  }else if( err.code == 2) {
    alert("Error: Position is unavailable!");
  }
}
function getLocation(){
   if(navigator.geolocation){
      // timeout at 60000 milliseconds (60 seconds)
      var options = {timeout:60000};
      navigator.geolocation.getCurrentPosition(showLocation, 
                                               errorHandler,
                                               options);
   }else{
      alert("Sorry, browser does not support geolocation!");
   }
}

ה-API של Geolocation ממש פשוט וקל מאד לעשות איתו דברים מאד יפים. ללא ספק מדובר באחת ההמצאות הטובות ביותר של HTML 5. בטח חלק מכם יתהו איך הוודו הזה עובד. הסיפור מאחורי זה הוא פשוט ביותר – שורה של שימוש בהתקנים שונים בהתאם לפלטפורמה ולדפדפן.

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

גלילה לראש העמוד