מפות מסוגננות

אפשר להתאים אישית את הצגת מפת Google הרגילה על ידי החלת סגנונות משלכם כשמשתמשים ב-Maps Static API. אתם יכולים לשנות את התצוגה החזותית של תכונות כמו דרכים, פארקים, אזורים בנויים ונקודות עניין אחרות. לשנות את הצבע או הסגנון שלהם כדי להדגיש תוכן מסוים, להשלים את התוכן שמסביב בדף או אפילו להסתיר תכונות לגמרי.

דוגמאות

בדוגמה הבאה מוצגת מפה של ברוקלין, ארה"ב, עם עיצוב שבו הכבישים המקומיים צבועים בירוק בהיר והאזורים למגורים צבועים בשחור. הוא גם הופך את הבהירות של התוויות, כדי שהן יבלטו יותר על רקע כהה. שימו לב שבדוגמה הזו נעשה שימוש בקידוד של כתובות URL:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=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&center=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 בוחרת גופי מים.

רכיבים

ההצהרה הבאה של style צובעת את התוויות של כל הדרכים המקומיות:

style=feature:road.local|element:labels|color:0xffffff

רכיבים הם חלוקות משנה של תכונה. לדוגמה, כביש מורכב מהקו הגרפי (הגיאומטריה) במפה, וגם מהטקסט שמציין את השם שלו (תווית).

הרכיבים הבאים זמינים, אבל חשוב לזכור שתכונה ספציפית עשויה לתמוך בחלק מהרכיבים, בחלקם או באף אחד מהם:

הצבעים fill ו-stroke של טקסט התווית משתנים בהתאם לרמת הזום. כדי שהחוויה תהיה עקבית בכל רמות הזום, תמיד צריך להגדיר את fill ואת stroke.

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