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

אפשר להתאים אישית את הצגת המפה הרגילה של 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. עדיף להשתמש ב-styler המוחלט 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.