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

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

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

  • 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 से स्टाइल किया गया है. अगर हो सके, तो बेहतर होगा कि आप absolute 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 में बदलाव नहीं होता.