מסמך עזר בנושא סגנונות ל-Maps JavaScript API

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

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

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

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

דוגמאות

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

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

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

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

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

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

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

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

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

הערה: ההשפעה של הגדרות הגוון, הרוויה, הבהירות והגאמה היא יחסית לסגנון של המפה הבסיסית. אם 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.