דוגמאות לעיצוב

בחירת פלטפורמה: Android iOS JavaScript Web Service

ריכזנו כאן כמה דוגמאות לעיצוב רכיבים מורכבים.

כבישים צהובים עם קווי מתאר ירוקים

מתאימים אישית את כל הכבישים כך שיהיה להם מילוי צהוב בהיר וקווי מתאר ירוקים כהים בתור סגנון הבסיס. צילום מסך של מפה בסגנון מותאם אישית, שמוצגים בה כמה כבישים. הכבישים צהובים בהירים עם קו מתאר ירוק.

  1. בקטע תכונות המפה, בוחרים באפשרות רשת דרכים.

  2. בחלונית Road Network, בקטע Polyline, מסמנים את התיבה בקטע Fill color.

  3. בוחרים צבע צהוב בהיר, כמו קוד הקסדצימלי #eeeec8.

  4. מסמנים את התיבה בקטע צבע קו ובוחרים בצבע ירוק כהה, כמו קוד ה-hex #155304.

  5. בקטע רוחב הקו של האותיות, מגדירים את הערך ל-3px.

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

צבעים שונים של מים בהתאם לרמת הזום

סגנונות מסוימים של רכיבים עשויים להיות גלויים רק ברמות מסוימות של מרחק מהתצוגה, כמו בניינים תלת-ממדיים או נקודות עניין (POI). מוסיפים סגנון כך שהמים יופיעו כחולים כהים כשמתרחקים עד למקסימום (z0), כחולים בינוניים כשמתקרבים לרמה של מדינה או חבל ארץ (רמת זום 6 במחשב נייד) וכחולים בהירים עם גבול כחול כהה כשמתקרבים מאוד (z19).

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

  1. בקטע תכונות המפה, בוחרים באפשרות מים.

  2. בחלונית Water, בקטע Polyline, מסמנים את התיבה בקטע Fill color ובוחרים בצבע כחול כהה.

  3. לוחצים על יהלום הזום שמשמאל לאפשרות Fill color (צבע מילוי) כדי לפתוח את חלונית העיצוב ברמת הזום.

  4. בוחרים את רמת הזום 6 ואת הצבע כחול בינוני.

  5. בוחרים ברמת זום 19 ומשנים את המים לכחול בהיר.

הערה: אם מגדירים צבע קו, בנחלים קטנים ובנהרות קטנים רבים יוצג רק צבע הגוף, גם אם מגדילים את התצוגה עד הסוף. ההבדל בין קו לבין מילוי גלוי בבריכות גדולות, באגמים ובמאגרי מים גדולים יותר.