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

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

  • saturation (ערך של נקודה צפה (floating-point) בין -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.