תפריט צד

שירותי מיפוי באמצעות openLayers

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

והתוצאה - מוצגת כאן: http://www.renewable-energy-eilat.org/he/emap

 

openLayers על מה ולמה

מיפוי תוכן תמיד היה קצת מייגע כזה הגיע לגבולותיה של ארץ הקודש. בהתחלה גוגל לא רצו לתת לנו שמות של רחובות בישראל, אחרי רק באנגלית ובלי שימוש ב api ושאר מריעין בישין. openlayers הוא פריצת הדרך שלמעשה מנתקת את הזיקה בין המפה לתון המוצג עליה. המפה היא כעת שיכבת בסיס ועליה ניתן להציג שכבות מידע שונות באמצעות api פתוח ונגיש. שכבת הבסיס (בדוגמה שאנו רואים כאן למשל) היא עדיין googl map אבל כל המידע שמוצג עלי גבי המפה, כולל בועות המידע, מבוססות על שכבות המידע של openlayers. שכבות בסיס יכולות להיות מפות ממקורות שונים כמו open StreenMap כמו שעשינו כאן http://www.outdoorscooking.co.il/, Open Earth, waze (טרם ניסינו), ואפילו איורים של ממלכות קסומות עליהן ניתן למקם מידע ואתרים שונים.

תוכן למיפוי

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

שכבות המידע

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

לרעיון של הצגת מרקרים מבוססי טקסונומיה מספר פתרונות בדרופל. הפתרון הפשוט הוא יצירה של dispaly נפרד לכל סיווג וקישור של סגנון style נפרד לכל שיכבה, המשתמש בתמונה אחרת לכל שיכבה. במקרה שלנו זה היה יכול להיות קצת מסורבל - 7 סיווגים * 2 סוגים (קיים / עתידי) היה משאיר אותנו עם 14 שכבות מידע והדפדפן היה מתקשה לסחוב.

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

סיווגים כישויות taxonomy entities

זה כבר ממש שירה, בדרופל 6 נולדו כל מני בני כילאיים כדי לשייך תמונה לסיווג. בדרופל 7 אין טיבעי מזה. סיווג (taxonomy term) הוא ישות (entity) ולצרף לו שדה תמונה הוא דבר פשוט ונוח

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

שטויות של אקספלורר

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

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

openlayers/themes/default_dark/img/blank.gif => openlayers/themes/default_dark/img/_blank.gif

כבוד של google Maps

מפות גוגל מקפיצות בלוק של זכויות יוצרים ותודות (לעצמם) שחוסם את המפה בכל פעם שמנסים לגרור, לשחק עם הזום או ללחוץ על מרקר. אפילו שימוש ב API key לא הניח את דעתם. הפתרון היחיד שמצאנו הוא, לא נעים, פשוט להעלים את הבלוק באמצעות css. 

div.olLayerGoogleCopyright,
div.olLayerGooglePoweredBy
{
  display: none !important;
}

בהצלחה!