מפות מסוגננות

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

דוגמאות

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

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE
מפה מעוצבת של ברוקלין.

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

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE
סגנון מפת אטלס הכבישים בארה"ב.

תחביר הסגנון

כדי ליצור מפה מעוצבת בהתאמה אישית, יש לכלול פרמטר style אחד או יותר בכתובת ה-URL של הבקשה.

כל הצהרת style יכולה להכיל את הארגומנטים הבאים, מופרדים באמצעות קו אנכי ("|"):

  • feature (אופציונלי) מציין את התכונות שיש לבחור לשינוי הסגנון. התכונות כוללות פרטים במפה, כמו כבישים, פארקים או נקודות עניין אחרות. אם לא קיים ארגומנט feature, הסגנון שצוין חל על כל התכונות.
  • element (אופציונלי) מציין את הרכיבים של התכונה שצוינה שצריך לבחור לשינוי הסגנון הזה. רכיבים הם מאפיינים של תכונה, כמו גיאומטריה או תוויות. אם לא קיים ארגומנט element, הסגנון יחול על כל הרכיבים של התכונה שצוינה.
  • קבוצה של כללי סגנון (חובה) להחיל על התכונות והרכיבים שצוינו. ה-API מחיל את הכללים לפי הסדר שבו הם מופיעים בהצהרה style. אפשר לכלול כמה כללים שרוצים, במסגרת המגבלות הרגילות של אורך כתובת URL של Maps Static API.
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

תכונות

בהצהרה הבאה בנושא style מצוינים כל הכבישים במפה: 

style=feature:road|color:0xffffff

הנה כמה תכונות נפוצות שתוכלו לבחור:

  • feature:all (ברירת המחדל) בוחר את כל התכונות של המפה.
  • feature:road בוחר את כל הכבישים במפה.
  • feature:road.local בוחר את כל הכבישים המקומיים.

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

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

חלק מהתכונות כוללות תכונות צאצא שבחרת באמצעות סימון של נקודות. לדוגמה, landscape.natural או road.local. אם תציינו רק את תכונת ההורה, למשל road, הסגנונות שתציינו בשדה ההורה יחולו על כל הצאצאים שלו, למשל road.local ו-road.highway.

חשוב לשים לב שתכונות ראשיות עשויות לכלול רכיבים מסוימים שלא כלולים בכל תכונות הצאצא שלהן.

אלה התכונות הזמינות:

  • all (ברירת המחדל) בוחר את כל התכונות.
  • כל האזורים המנהליים נבחרים על ידי administrative. העיצוב משפיע רק על התוויות של אזורים מנהליים, לא על הגבולות הגיאוגרפיים או על המילוי.
    • המדינות שנבחרו בידי administrative.country.
    • בחירת חלקות קרקע נבחרות על ידי administrative.land_parcel.
    • בחירת הרשויות המקומיות מתבצעת על ידי administrative.locality.
    • administrative.neighborhood בוחר שכונות.
    • המחוזות נבחרים על ידי administrative.province.
  • כל הנופים שנבחרו על ידי landscape נבחרים.
    • landscape.man_made בוחרת פריטים מעשה ידי אדם, כמו מבנים ומבנים אחרים.
    • landscape.natural בוחרת תכונות טבעיות כמו הרים, נהרות, מדבריות וקרחונים.
    • landscape.natural.landcover בוחר את תכונות הכיסוי של פני הקרקע, החומר הפיזי שמכסה את פני כדור הארץ, כמו יערות, ערבות, ביצות וקרקע חשופה.
    • האפשרות landscape.natural.terrain בוחרת את תכונות פני השטח של פני השטח, כמו גובה, שיפוע וכיוון.
  • הבחירה של כל נקודות העניין נבחרות על ידי poi.
    • poi.attraction בוחר אטרקציות תיירותיות.
    • עסקים נבחרים על ידי poi.business.
    • בנייני הממשלה נבחרים על ידי poi.government.
    • poi.medical בוחר את שירותי החירום, כולל בתי חולים, בתי מרקחת, משטרה, רופאים ועוד.
    • poi.park בוחרת פארקים.
    • poi.place_of_worship בוחר בתי תפילה, כולל כנסיות, מקדשים, מסגדים ועוד.
    • בתי הספר נבחרים על ידי poi.school.
    • בחרת מתחמי ספורט על ידי poi.sports_complex.
  • כל הכבישים נבחרים על ידי road.
    • road.arterial בוחר עורקי תחבורה.
    • האפשרות road.highway בוחרת כבישים מהירים.
    • road.highway.controlled_access בוחרת כבישים מהירים עם גישה מבוקרת.
    • road.local בוחר כבישים מקומיים.
  • transit בוחרת את כל הקווים ותחנות התחבורה הציבורית.
    • transit.line בוחר קווים של תחבורה ציבורית.
    • transit.station בוחר את כל תחנות התחבורה הציבורית.
    • transit.station.airport בוחר נמלי תעופה.
    • transit.station.bus בוחרת תחנות אוטובוס.
    • transit.station.rail בוחר תחנות רכבת.
  • water בוחרת מקורות מים.

Elements

בהצהרה הבאה מסוג style מופיעות הצבעים של התוויות לכל הכבישים המקומיים:

style=feature:road.local|element:labels|color:0xffffff

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

הרכיבים הבאים זמינים, אבל חשוב לשים לב שתכונה מסוימת עשויה לתמוך באף אחד מהרכיבים, בחלק מהם או בכולם:

  • all (ברירת המחדל) בוחר את כל הרכיבים של התכונה שצוינה.
  • geometry בוחר את כל האלמנטים הגיאומטריים של התכונה שצוינה.
    • geometry.fill בוחר רק את המילוי של הגיאומטריה של התכונה.
    • geometry.stroke בוחר רק את הקו של הגיאומטריה של התכונה.
  • הפונקציה labels בוחרת את תוויות הטקסט שמשויכות לתכונה שצוינה.
    • labels.icon בוחר רק את הסמל שמוצג בתווית של התכונה.
    • labels.text בוחר רק את הטקסט של התווית.
    • labels.text.fill בוחר רק את המילוי של התווית. המילוי של תווית מעובד בדרך כלל כקו מתאר צבעוני שמקיף את טקסט התווית.
    • labels.text.stroke בוחר רק את קו הטקסט של התווית.

כללי סגנון

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

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

style=feature:road|color:0xffffff|visibility:simplified

כל הצהרה style צריכה להכיל פעולה אחת או יותר שמופרדות באמצעות התו ("|"). כל פעולה מציינת את ערך הארגומנט שלה באמצעות תו הנקודתיים (":"), וכל הפעולות חלות על הבחירה לפי הסדר שבו ציינת אותן.

אפשרויות הסגנון הבאות נתמכות:

  • hue (מחרוזת הקסדצימלית של RGB בפורמט #RRGGBB) מציינת את הצבע הבסיסי.

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

  • lightness (ערך נקודה צפה בין -100 ל-100) מציין את השינוי בבהירות של הרכיב באחוזים. ערכים שליליים מגבירים את הכהות (כאשר +100 מציין שחור) וערכים חיוביים מגבירים את הבהירות (כאשר +100 מציין לבן).

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

  • saturation (ערך נקודה צפה בין -100 ל-100) מציין את אחוז השינוי בעוצמת הצבע הבסיסי שיחול על הרכיב.

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

  • gamma (ערך של נקודה צפה (floating-point בין 0.01 לבין 10.0, כאשר 1.0 לא מחיל אף תיקון) מציין את הכמות של תיקון גאמה שצריך להחיל על הרכיב. תיקוני גאמה משנים את בהירות הצבעים באופן לא לינארי, בלי להשפיע על ערכים של לבן או שחור. תיקון גאמה משמש בדרך כלל לשינוי הניגודיות של מספר רכיבים. לדוגמה, אפשר לשנות את הגמא כדי להגדיל או להקטין את הניגודיות בין הקצוות לבין החלקים הפנימיים של רכיבים.

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

  • הפונקציה invert_lightness (אם true) הופכת את הבהירות הקיימת. האפשרות הזו שימושית, למשל, כדי לעבור במהירות למפה כהה יותר עם טקסט לבן.

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

  • visibility (on, off, או simplified) מציין אם הרכיב מופיע במפה ובאיזה אופן. חשיפה של simplified מסירה תכונות סגנון מסוימות מהתכונות המושפעות. לדוגמה, כבישים הופכים לפשוטים יותר והופכים לקווים צרים יותר ללא קווי מתאר, ופארקים מאבדים את טקסט התוויות אבל שומרים על סמל התווית.
  • color (מחרוזת הקסדצימלית של RGB בפורמט #RRGGBB) מגדירה את צבע התכונה.
  • weight (ערך שהוא מספר שלם, גדול מאפס או שווה לו) קובע את משקל התכונה בפיקסלים. אם מגדירים את המשקל לערך גבוה, עלולה להיווצר חיתוך קרוב לגבולות האריחים.

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

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

מודל הגוון, הרוויה, הבהירות

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

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

מודל גוון, רוויה, בהירות

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

לדוגמה, אפשר להגדיר את הגוון של ירוק טהור כ-hue:0x00ff00 או hue:0x000100. שני הגוונים זהים. שני הערכים מצביעים על ירוק טהור במודל הצבעים HSL.

גלגל צבעים RGB

ערכי hue RGB שמורכבים מחלקים שווים באדום, בירוק ובכחול לא מציינים גוון, כי אף אחד מהערכים האלה לא מציין כיוון במרחב הקואורדינטות של HSL. לדוגמה: "#000000" (שחור), "#FFFFFF" (לבן) וכל גוון אפור טהור. כדי לסמן שחור, לבן או אפור, צריך להסיר את כל saturation (יש להגדיר את הערך כ--100) ולשנות את lightness במקום זאת.

בנוסף, כשמשנים תכונות קיימות שכבר יש להן ערכת צבעים, שינוי של ערך כמו hue לא משנה את saturation או lightness הקיימים.