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