עם אפשרויות הסגנון ניתן להתאים אישית את התצוגה של סגנונות מפה, שינוי התצוגה החזותית של תכונות כמו כבישים, פארקים, עסקים ונקודות עניין אחרות. כמו גם שינוי הסגנון של את התכונות האלה, אפשר להסתיר אותן לגמרי. כלומר, אתם יכולים להדגיש רכיבים מסוימים במפה או להוסיף למפה של הדף שמסביב.
דוגמאות
הצהרת הסגנון הבאה של 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
(ערך של מספר שלם, גדול מ-0 או שווה לו) את משקל התכונה, בפיקסלים. אם מגדירים את המשקל לערך גבוה, התוצאה תהיה חיתוך בקרבת גבולות המשבצות.
כללי הסגנון יחולו לפי הסדר שהגדרתם. לא לשלב פעולות מרובות בפעולה בסגנון יחיד. במקום זאת, צריך להגדיר כרשומה נפרדת במערך הסגנון.
הערה: הסדר חשוב, מכיוון שחלק מהפעולות הן לא נסיעות. פרטים ו/או רכיבים שעברו שינוי באמצעות פעולות סגנון (בדרך כלל) כבר יש סגנונות קיימים. הפעולות פועלות על הסגנונות הקיימים האלה, אם יש כאלה.
מודל הגוון, הרוויה והבהירות
במפות מעוצבות משתמשים בגוון, רוויה, בהירות (HSL) כדי לציין צבע בתוך העיצוב ב-AI. גוון מציין את הצבע הבסיסי, רוויה מציין את העוצמה של הצבע, ובהירות מציינת את בכמות היחסית של לבן או שחור בצבע המרכיב.
גאמה
תיקון משנה את הבהירות של מרחב הצבעים, בדרך כלל
כדי להעלות או להפחית את הניגודיות. בנוסף, מודל HSL מגדיר צבע
בתוך מרחב קואורדינטות שבו hue
מציין את הכיוון
בתוך גלגל צבעים, בעוד שרוויה ובהירות מרמזות על אמפליטודות
לאורך צירים שונים. הגוונים נמדדים בתוך מרחב צבעים RGB,
דומה לרוב מרחבי הצבעים RGB, למעט הגוונים של לבן
לא קיימים.
hue
משתמש בערך צבע הקסדצימלי של HTML, אבל הוא משתמש רק בערך הזה
כדי לקבוע את הצבע הבסיסי – כלומר הכיוון שלו מסביב לצבע
של גלגל השיניים, ולא את הרוויה או הקלילות שלו,
מצוין בנפרד כשינוי באחוזים.
לדוגמה, ניתן להגדיר את הגוון של ירוק טהור בתור
hue:0x00ff00
או hue:0x000100
. שני הגוונים
זהה. שני הערכים מצביעים על ירוק טהור במודל הצבעים HSL.
גלגל צבעים של RGB
ערכי RGB hue
שמורכבים מחלקים שווים: אדום, ירוק וכחול
לא מציינים גוון, כי אף אחד מהערכים האלה לא מציין כיוון
מרחב הקואורדינטות של ה-HSL. לדוגמה: '#000000' (שחור), " #FFFFFF" (לבן),
ואת כל הגוונים הטהורים של האפור. כדי לציין שחור, לבן או אפור, עליך
מסירים את כל saturation
(מגדירים את הערך כ--100
) וגם
במקום זאת, יש לשנות את lightness
.
בנוסף, כשמבצעים שינוי של תכונות קיימות שכבר יש להן צבע
סכימה, שינוי ערך כמו hue
לא משנה את הערך הקיים
saturation
או lightness
.