אפשר להתאים אישית את ההצגה של מפת Google הרגילה על ידי החלת סגנונות משלך כשמשתמשים ב-API של מפות Google. אפשר לשנות את התצוגה החזותית של מאפיינים כמו כבישים, פארקים, שטחים בנויים ונקודות עניין אחרות. לשנות את הצבע או הסגנון שלהם כדי להדגיש תוכן מסוים, להשלים את התוכן שמסביב בדף או אפילו להסתיר תכונות לחלוטין.
דוגמאות
בדוגמה הבאה מוצגת מפה של ברוקלין, ארה"ב, עם עיצוב לצבע הכבישים המקומיים בירוק בהיר ואת אזורי המגורים בשחור. הוא גם הופך את הבהירות של התוויות, כדי שיבלוט טוב יותר על רקע כהה. הערה: בדוגמה הבאה בעבודה נעשה שימוש בקידוד של כתובת URL:
https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15¢er=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE
בדוגמה הבאה נעשה שימוש בפעולות של עיצוב ובעיצובים פשוטים כדי לקבל הערכה של המראה של אטלס כביש בארה"ב:
https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12¢er=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE
תחביר הסגנון
כדי ליצור מפה מעוצבת בהתאמה אישית, יש לכלול פרמטר style
אחד או יותר בכתובת ה-URL של הבקשה.
כל הצהרת style
יכולה להכיל את הארגומנטים הבאים, מופרדים באמצעות קו אנכי ("|
"):
feature
(אופציונלי) מציין את התכונות שיש לבחור לשינוי הסגנון. התכונות כוללות פרטים במפה, כמו כבישים, פארקים או נקודות עניין אחרות. אם לא קיים ארגומנטfeature
, הסגנון שצוין חל על כל התכונות.element
(אופציונלי) מציין את הרכיבים של התכונה שצוינה שצריך לבחור לשינוי הסגנון הזה. רכיבים הם מאפיינים של תכונה, כמו גיאומטריה או תוויות. אם לא קיים ארגומנטelement
, הסגנון יחול על כל הרכיבים של התכונה שצוינה.- קבוצה של כללי סגנון (חובה) להחיל על התכונות והרכיבים שצוינו. ה-API מחיל את הכללים לפי הסדר שבו הם מופיעים בהצהרה
style
. אפשר לכלול כמה כללים שרוצים, במסגרת המגבלות הרגילות של אורך כתובת URL של Maps Static API.
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument
תכונות
בהצהרה הבאה בנושא style
מצוינים כל הכבישים במפה:
style=feature:road|color:0xffffff
הנה כמה תכונות נפוצות שתוכלו לבחור:
feature:all
(ברירת המחדל) בוחר את כל התכונות של המפה.feature:road
בוחר את כל הכבישים במפה.feature:road.local
בוחר את כל הכבישים המקומיים.
תכונות, או סוגי תכונות, הם מאפיינים גיאוגרפיים במפה, כולל כבישים, פארקים, גופי מים, עסקים ועוד.
התכונות יוצרות עץ קטגוריות, שהשורש שלו הוא 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
בוחרת מקורות מים.
Elements
בהצהרה הבאה מסוג style
מופיעות הצבעים של התוויות לכל הכבישים המקומיים:
style=feature:road.local|element:labels|color:0xffffff
אלמנטים הם חלוקות משנה של תכונה. כביש, לדוגמה, מורכב מהקו הגרפי (הגיאומטריה) במפה וגם מהטקסט שמציין את שמו (תווית).
הרכיבים הבאים זמינים, אבל חשוב לשים לב שתכונה מסוימת עשויה לתמוך באף אחד מהרכיבים, בחלק מהם או בכולם:
all
(ברירת המחדל) בוחר את כל הרכיבים של התכונה שצוינה.geometry
בוחר את כל האלמנטים הגיאומטריים של התכונה שצוינה.geometry.fill
בוחר רק את המילוי של הגיאומטריה של התכונה.geometry.stroke
בוחר רק את הקו של הגיאומטריה של התכונה.
- הפונקציה
labels
בוחרת את תוויות הטקסט שמשויכות לתכונה שצוינה.labels.icon
בוחר רק את הסמל שמוצג בתווית של התכונה.labels.text
בוחר רק את הטקסט של התווית.labels.text.fill
בוחר רק את המילוי של התווית. המילוי של תווית מעובד בדרך כלל כקו מתאר צבעוני שמקיף את טקסט התווית.labels.text.stroke
בוחר רק את קו הטקסט של התווית.
כללי סגנון
כללי סגנון הם אפשרויות עיצוב שחלות על התכונות
ועל הרכיבים שמצוינים בכל הצהרת style
.
ההצהרה הבאה של style
מחילה שני כללי סגנון על
הכבישים במפה. הכלל הראשון מחיל צבע על הכבישים. הכלל השני
מפשט את התצוגה של הדרכים, כך שהקווים שלהן דקים יותר ללא
קווי מתאר:
style=feature:road|color:0xffffff|visibility:simplified
כל הצהרה style
צריכה להכיל פעולה אחת או יותר שמופרדות באמצעות התו ("|
"). כל פעולה מציינת את ערך הארגומנט שלה באמצעות תו הנקודתיים (":
"), וכל הפעולות חלות על הבחירה לפי הסדר שבו ציינת אותן.
אפשרויות הסגנון הבאות נתמכות:
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
הקיימים.