מידע בנושא סגנון עבור SDK של מפות Google ל-Android

בחירת פלטפורמה: Android iOS JavaScript

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

דוגמאות

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

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

אובייקט JSON

הצהרת סגנון JSON כוללת את הרכיבים הבאים:

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

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

בהמשך הדף הזה מופיע מידע נוסף על תכונות, אלמנטים וסגנונות עיצוב.

featureType

קטע ה-JSON הבא בוחר את כל הדרכים במפה:

{
  "featureType": "road"
}

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

התכונות יוצרות עץ קטגוריות, שהשורש שלו הוא 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 בוחרת מקורות מים.

elementType

קטע ה-JSON הבא בוחר את התוויות עבור כל הדרכים המקומיות:

{
  "featureType": "road.local",
  "elementType": "labels"
}

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

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

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

stylers

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

קטע הקוד הבא של JSON מציג תכונה בצבע ירוק בהיר תוך שימוש בערך RGB:

"stylers": [
  { "color": "#99FF33" }
]

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

"stylers": [
  { "saturation": -100 }
]

תקציר זה מסתיר תכונה לחלוטין:

    "stylers": [
      { "visibility": "off" }
    ]

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

  • 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 הקיימים.