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

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

כדי לציין סגנון, צריך לשלב מערך של בוררי 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"
}

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

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

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

• ‫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 (ערך נקודה צפה בין 0.01 ל-10.0, כאשר 1.0 לא חל על תיקון) מציין את כמות תיקון הגמא שצריך להחיל על הרכיב. תיקוני גמא משנים את בהירות הצבעים באופן לא ליניארי, בלי להשפיע על ערכי הלבן או השחור. בדרך כלל משתמשים בתיקון גמא כדי לשנות את הניגודיות של כמה רכיבים. לדוגמה, אפשר לשנות את הגאמה כדי להגדיל או להקטין את הניגודיות בין הקצוות לבין החלקים הפנימיים של הרכיבים.

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

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

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

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

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

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

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

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

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

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

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

גלגל צבעים RGB

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

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