חומר עזר בנושא סגנון עבור Maps JavaScript API

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

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

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

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

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

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

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

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