Android के लिए Maps SDK टूल के लिए स्टाइल रेफ़रंस

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

स्टाइल के विकल्पों की मदद से, Google के स्टैंडर्ड मैप स्टाइल के प्रज़ेंटेशन को पसंद के मुताबिक बनाया जा सकता है. साथ ही, सड़कों, पार्कों, कारोबारों, और दिलचस्पी की अन्य जगहों जैसी सुविधाओं के विज़ुअल डिसप्ले को बदला जा सकता है. इन सुविधाओं की स्टाइल बदलने के साथ-साथ, सुविधाओं को पूरी तरह से छिपाया भी जा सकता है. इसका मतलब है कि मैप के किसी खास कॉम्पोनेंट पर ज़ोर दिया जा सकता है या मैप को आस-पास के पेज की स्टाइल के हिसाब से बनाया जा सकता है.

उदाहरण

स्टाइल के बारे में यहां दिए गए 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 (वैकल्पिक) - चुनी गई सुविधा की प्रॉपर्टी. एलिमेंट, किसी फ़ीचर के उप-भाग होते हैं. इनमें लेबल और ज्यामिति शामिल हैं. अगर कोई एलिमेंट नहीं चुना जाता है, तो सुविधा के सभी एलिमेंट चुने जाते हैं.
  • स्टाइलर - चुने गए एलिमेंट और सुविधाओं पर लागू होने वाले नियम. स्टाइलर से, सुविधा के रंग, दिखने की स्थिति, और मोटाई के बारे में पता चलता है. किसी सुविधा पर एक या उससे ज़्यादा स्टाइलर लागू किए जा सकते हैं.

स्टाइल तय करने के लिए, आपको 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"
}

तत्व, किसी सुविधा के उपविभाजन होते हैं. उदाहरण के लिए, किसी सड़क में मैप पर ग्राफ़िकल लाइन (ज्यामिति) और उसका नाम बताने वाला टेक्स्ट (लेबल) होता है.

ये एलिमेंट उपलब्ध हैं. हालांकि, ध्यान दें कि कोई सुविधा इनमें से किसी भी एलिमेंट के साथ काम नहीं कर सकती है, कुछ के साथ काम कर सकती है या सभी के साथ काम कर सकती है:

ज़ूम करने के लेवल के हिसाब से, लेबल टेक्स्ट fill और stroke के रंग बदलते हैं. ज़ूम लेवल के हिसाब से एक जैसा अनुभव देने के लिए, हमेशा fill और stroke, दोनों को तय करें.

  • 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 (आरजीबी हेक्स स्ट्रिंग, जिसका फ़ॉर्मैट #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 (if true) मौजूदा लाइटनेस को उलट देता है. उदाहरण के लिए, इसका इस्तेमाल सफ़ेद टेक्स्ट वाले गहरे रंग के मैप पर तुरंत स्विच करने के लिए किया जा सकता है.

    ध्यान दें: यह विकल्प, Google की डिफ़ॉल्ट स्टाइल को उलट देता है. अगर Google, बुनियादी मैप की स्टाइल में कोई बदलाव करता है, तो इसका असर आपके मैप की उन सुविधाओं पर पड़ता है जिन्हें invert_lightness का इस्तेमाल करके स्टाइल किया गया है. अगर हो सके, तो ऐब्सलूट color स्टाइलर का इस्तेमाल करें.

  • visibility (on, off या simplified) से पता चलता है कि मैप पर एलिमेंट दिखेगा या नहीं और कैसे दिखेगा. simplified विज़िबिलिटी से, मैप पर दिखने वाले एलिमेंट की स्टाइल से जुड़ी कुछ सुविधाएं हट जाती हैं. उदाहरण के लिए, सड़कों को बिना आउटलाइन वाली पतली लाइनों में बदल दिया जाता है. वहीं, पार्क के लेबल का टेक्स्ट हट जाता है, लेकिन लेबल का आइकॉन बना रहता है.
  • color (आरजीबी हेक्स स्ट्रिंग, जिसका फ़ॉर्मैट #RRGGBB है) की मदद से, सुविधा का रंग सेट किया जाता है.
  • weight (शून्य से ज़्यादा या उसके बराबर की पूर्णांक वैल्यू) पिक्सल में सुविधा का वज़न सेट करता है. वज़न को ज़्यादा वैल्यू पर सेट करने से, टाइल के बॉर्डर के आस-पास क्लिपिंग हो सकती है.

स्टाइल के नियमों को उसी क्रम में लागू किया जाता है जिस क्रम में उन्हें तय किया गया है. एक से ज़्यादा कार्रवाइयों को एक ही स्टाइल ऑपरेशन में न मिलाएं. इसके बजाय, हर कार्रवाई को स्टाइल ऐरे में अलग-अलग एंट्री के तौर पर तय करें.

ध्यान दें: क्रम ज़रूरी है, क्योंकि कुछ कार्रवाइयां क्रम बदलने पर अलग नतीजे देती हैं. स्टाइल से जुड़ी कार्रवाइयों के ज़रिए बदले गए कॉम्पोनेंट और/या एलिमेंट में (आम तौर पर) पहले से मौजूद स्टाइल होती हैं. अगर ये स्टाइल मौजूद हैं, तो कार्रवाइयां उन पर लागू होती हैं.

ह्यू, सैचुरेशन, लाइटनेस मॉडल

स्टाइल किए गए मैप, स्टाइलर ऑपरेशन में रंग दिखाने के लिए ह्यू, सैचुरेशन, और रोशनी (एचएसएल) मॉडल का इस्तेमाल करते हैं. रंगत से बुनियादी रंग का पता चलता है, सैट्युरेशन से उस रंग की इंटेंसिटी का पता चलता है, और हल्कापन से रंग में मौजूद सफ़ेद या काले रंग की मात्रा का पता चलता है.

गामा करेक्शन, कलर स्पेस में रोशनी को बदलता है. आम तौर पर, इसका इस्तेमाल कंट्रास्ट को बढ़ाने या कम करने के लिए किया जाता है. इसके अलावा, एचएसएल मॉडल, कोऑर्डिनेट स्पेस में रंग तय करता है. इसमें hue, कलर व्हील में ओरिएंटेशन दिखाता है. वहीं, सैचुरेशन और लाइटनेस, अलग-अलग ऐक्सिस के साथ ऐम्प्लिट्यूड दिखाते हैं. आरजीबी कलर स्पेस में रंग मापे जाते हैं. यह ज़्यादातर आरजीबी कलर स्पेस की तरह होता है. हालांकि, इसमें सफ़ेद और काले रंग के शेड नहीं होते.

ह्यू, रंग का गहरा या फीका होना, लाइटनेस मॉडल

hue, एचटीएमएल हेक्स कलर वैल्यू लेता है. हालांकि, यह वैल्यू सिर्फ़ बुनियादी रंग का पता लगाने के लिए इस्तेमाल करता है. इसका मतलब है कि यह कलर व्हील के हिसाब से रंग का ओरिएंटेशन तय करता है. यह रंग की चमक या हल्केपन का पता नहीं लगाता. रंग की चमक या हल्केपन में हुए बदलावों को प्रतिशत के तौर पर अलग से दिखाया जाता है.

उदाहरण के लिए, प्योर ग्रीन के लिए रंगत को hue:0x00ff00 या hue:0x000100 के तौर पर तय किया जा सकता है. दोनों रंग एक जैसे हैं. एचएसएल कलर मॉडल में, दोनों वैल्यू पूरी तरह से हरे रंग की ओर इशारा करती हैं.

आरजीबी कलर व्हील

आरजीबी hue वैल्यू में लाल, हरे, और नीले रंग की मात्रा बराबर होती है. इसलिए, इनमें ह्यू नहीं दिखता. ऐसा इसलिए होता है, क्योंकि इनमें से कोई भी वैल्यू, एचएसएल कोऑर्डिनेट स्पेस में ओरिएंटेशन के बारे में नहीं बताती. उदाहरण के लिए, "#000000" (काला), "#FFFFFF" (सफ़ेद) और स्लेटी रंग के सभी शेड. काला, सफ़ेद या ग्रे रंग दिखाने के लिए, आपको सभी saturation हटाने होंगे (वैल्यू को -100 पर सेट करें). इसके बजाय, lightness को अडजस्ट करें.

इसके अलावा, जिन मौजूदा सुविधाओं में पहले से ही कलर स्कीम मौजूद है उनमें बदलाव करते समय, hue जैसी वैल्यू बदलने से, उसकी मौजूदा saturation या lightness में कोई बदलाव नहीं होता.