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