Maps स्टैटिक एपीआई के लिए स्टाइल रेफ़रंस

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

कोई स्टाइल तय करने के लिए, आपको 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 स्निपेट, आरजीबी वैल्यू का इस्तेमाल करके, किसी सुविधा को चमकीले हरे रंग में दिखाता है:

"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 (अगर 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 में कोई बदलाव नहीं होता.