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

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

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

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

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

דוגמאות

הצהרת הסגנון הבאה ב-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"
}

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

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

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

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

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

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

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

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

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

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

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

גלגל צבעים של RGB

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

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