Map Tiles API स्टाइल का रेफ़रंस

यूरोपियन इकनॉमिक एरिया (ईईए) के डेवलपर

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

उदाहरण

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"
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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