क्लाउड पर मैप की स्टाइलिंग के लिए JSON रेफ़रंस

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

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

JSON स्कीमा डाउनलोड करें

स्टाइल एडिटर में JSON का इस्तेमाल करके, मैप की स्टाइल में बदलाव करने का तरीका जानने के लिए, क्लाउड पर मैप की स्टाइलिंग की सुविधा के साथ JSON का इस्तेमाल करना लेख पढ़ें. इसके अलावा, मैप की स्टाइल इंपोर्ट और एक्सपोर्ट करने का तरीका भी जानें.

स्टाइल के JSON एलान का उदाहरण देखें

नीचे दिए गए JSON स्टाइल के एलान में, बैकग्राउंड का रंग सेट किया गया है. इसके बाद, इसमें दिलचस्पी के विषयों, पार्क, पानी की सुविधाओं के लिए स्टाइल तय की गई हैं. साथ ही, इसमें खाने-पीने की जगहों के लेबल छिपाए गए हैं.

 {   "variant": "light",   "styles": [     {       "id": "natural.land",       "geometry": {         "fillColor": "#f7e3f7"       }     },     {       "id": "natural.water",       "geometry": {         "fillColor": "#d4b2ff"       },       "label": {         "textFillColor": "#3d2163",         "textStrokeColor": "#f0e1ff"       }     },     {       "id": "pointOfInterest",       "label": {         "pinFillColor": "#e0349a",         "textFillColor": "#a11e6e",         "textStrokeColor": "#ffd9f0"       }     },     {       "id": "pointOfInterest.emergency.hospital",       "geometry": {         "fillColor": "#ffe3e3"       }     },     {       "id": "pointOfInterest.foodAndDrink",       "label": {         "visible": false       }     },     {       "id": "pointOfInterest.recreation.park",       "geometry": {         "fillColor": "#f9b9d2"       }     }   ] }

JSON ऑब्जेक्ट

JSON स्टाइल के एलान में, टॉप-लेवल का ऑब्जेक्ट और स्टाइल के नियमों का एक कलेक्शन होता है.

  • टॉप-लेवल सेटिंग (ज़रूरी नहीं) - ग्लोबल स्टाइल सेटिंग, जैसे कि backgroundColor और variant.
  • styles - यह स्टाइल के नियमों वाले ऑब्जेक्ट का कलेक्शन होता है. इसमें ये शामिल हो सकते हैं:
    • id - इस स्टाइल में बदलाव करने के लिए, मैप की सुविधा चुनें (जैसे, pointOfInterest.recreation.park).
    • geometry (ज़रूरी नहीं) - मैप फ़ीचर के ज्यामितीय एलिमेंट और स्टाइल के नियम लागू करने के लिए (जैसे, fillColor).
    • label (ज़रूरी नहीं) - मैप की सुविधा का टेक्स्ट या पिन लेबल और स्टाइल के नियम लागू करने के लिए (जैसे, textStrokeColor).

टॉप-लेवल की सेटिंग

नीचे दी गई टेबल में मौजूद प्रॉपर्टी, मैप स्टाइल पर लागू होती हैं.

प्रॉपर्टी समस्या ब्यौरा उदाहरण

backgroundColor

 स्ट्रिंग #RRGGBB हेक्स स्ट्रिंग का इस्तेमाल करके, मैप ऐप्लिकेशन के बैकग्राउंड के रंग को पसंद के मुताबिक बनाएं. इस सेटिंग में, पारदर्शिता में बदलाव करने की सुविधा काम नहीं करती. "#002211"

variant

"light"|"dark" हल्के या गहरे रंग वाला मोड चुनें. अगर कोई वैल्यू तय नहीं की गई है, तो डिफ़ॉल्ट वैल्यू "light" होती है. "लाइट"

monochrome

बूलियन मोनोक्रोम मोड चालू करने के लिए, मैप के ग्रे वर्शन के लिए true का इस्तेमाल करें.

true

स्टाइल के नियम वाले ऑब्जेक्ट

इस सेक्शन में उन प्रॉपर्टी के बारे में बताया गया है जो मैप की सुविधाओं को पसंद के मुताबिक बनाने के लिए, styles ऐरे में स्टाइल के नियम वाले ऑब्जेक्ट तय करती हैं. हर स्टाइल के नियम वाले ऑब्जेक्ट में ये चीज़ें होनी चाहिए:

  • id प्रॉपर्टी.
  • geometry या label एलिमेंट, जिसमें स्टाइलर प्रॉपर्टी तय की गई हों.

id (मैप पर मौजूद आइटम या एलिमेंट)

id प्रॉपर्टी, स्टाइल करने के लिए मैप की सुविधा के बारे में बताती है. प्रॉपर्टी के नाम, स्टाइल एडिटर में मैप की सुविधा के नामों के कैमलकेस वर्शन होते हैं.

मैप की सुविधाओं से कैटगरी ट्री बनता है. अगर आपने पैरंट फ़ीचर टाइप, जैसे कि pointOfInterest तय किया है, तो पैरंट के लिए तय की गई स्टाइल, उसके सभी चाइल्ड पर लागू होंगी. जैसे, pointOfInterest.retail और pointOfInterest.lodging. ज़्यादा जानकारी के लिए, क्रम से मैप की सुविधाएं देखें.

उपलब्ध id प्रॉपर्टी की सूची

id की ये प्रॉपर्टी उपलब्ध हैं:

  • pointOfInterest
  • pointOfInterest.emergency
  • pointOfInterest.emergency.fire
  • pointOfInterest.emergency.hospital
  • pointOfInterest.emergency.pharmacy
  • pointOfInterest.emergency.police
  • pointOfInterest.entertainment
  • pointOfInterest.entertainment.arts
  • pointOfInterest.entertainment.casino
  • pointOfInterest.entertainment.cinema
  • pointOfInterest.entertainment.historic
  • pointOfInterest.entertainment.museum
  • pointOfInterest.entertainment.themePark
  • pointOfInterest.entertainment.touristAttraction
  • pointOfInterest.foodAndDrink
  • pointOfInterest.foodAndDrink.bar
  • pointOfInterest.foodAndDrink.cafe
  • pointOfInterest.foodAndDrink.restaurant
  • pointOfInterest.foodAndDrink.winery
  • pointOfInterest.landmark
  • pointOfInterest.lodging
  • pointOfInterest.recreation
  • pointOfInterest.recreation.beach
  • pointOfInterest.recreation.boating
  • pointOfInterest.recreation.fishing
  • pointOfInterest.recreation.golfCourse
  • pointOfInterest.recreation.hotSpring
  • pointOfInterest.recreation.natureReserve
  • pointOfInterest.recreation.park
  • pointOfInterest.recreation.peak
  • pointOfInterest.recreation.sportsComplex
  • pointOfInterest.recreation.sportsField
  • pointOfInterest.recreation.trailhead
  • pointOfInterest.recreation.zoo
  • pointOfInterest.retail
  • pointOfInterest.retail.grocery
  • pointOfInterest.retail.shopping
  • pointOfInterest.service
  • pointOfInterest.service.atm
  • pointOfInterest.service.bank
  • pointOfInterest.service.carRental
  • pointOfInterest.service.evCharging
  • pointOfInterest.service.gasStation
  • pointOfInterest.service.parkingLot
  • pointOfInterest.service.postOffice
  • pointOfInterest.service.restStop
  • pointOfInterest.service.restroom
  • pointOfInterest.transit
  • pointOfInterest.transit.airport
  • pointOfInterest.other
  • pointOfInterest.other.bridge
  • pointOfInterest.other.cemetery
  • pointOfInterest.other.government
  • pointOfInterest.other.library
  • pointOfInterest.other.military
  • pointOfInterest.other.placeOfWorship
  • pointOfInterest.other.school
  • pointOfInterest.other.townSquare
  • political
  • political.countryOrRegion
  • political.border
  • political.reservation
  • political.stateOrProvince
  • political.city
  • political.sublocality
  • political.neighborhood
  • political.landParcel
  • infrastructure
  • infrastructure.building
  • infrastructure.building.commercial
  • infrastructure.businessCorridor
  • infrastructure.roadNetwork
  • infrastructure.roadNetwork.noTraffic
  • infrastructure.roadNetwork.noTraffic.pedestrianMall
  • infrastructure.roadNetwork.noTraffic.trail
  • infrastructure.roadNetwork.noTraffic.trail.paved
  • infrastructure.roadNetwork.noTraffic.trail.unpaved
  • infrastructure.roadNetwork.parkingAisle
  • infrastructure.roadNetwork.ramp
  • infrastructure.roadNetwork.road
  • infrastructure.roadNetwork.road.arterial
  • infrastructure.roadNetwork.road.highway
  • infrastructure.roadNetwork.road.local
  • infrastructure.roadNetwork.road.noOutlet
  • infrastructure.roadNetwork.roadShield
  • infrastructure.roadNetwork.roadSign
  • infrastructure.roadNetwork.roadDetail
  • infrastructure.roadNetwork.roadDetail.surface
  • infrastructure.roadNetwork.roadDetail.crosswalk
  • infrastructure.roadNetwork.roadDetail.sidewalk
  • infrastructure.roadNetwork.roadDetail.intersection
  • infrastructure.railwayTrack
  • infrastructure.railwayTrack.commercial
  • infrastructure.railwayTrack.commuter
  • infrastructure.transitStation
  • infrastructure.transitStation.bicycleShare
  • infrastructure.transitStation.busStation
  • infrastructure.transitStation.ferryTerminal
  • infrastructure.transitStation.funicularStation
  • infrastructure.transitStation.gondolaStation
  • infrastructure.transitStation.monorail
  • infrastructure.transitStation.railStation
  • infrastructure.transitStation.railStation.subwayStation
  • infrastructure.transitStation.railStation.tramStation
  • infrastructure.urbanArea
  • natural
  • natural.continent
  • natural.archipelago
  • natural.island
  • natural.land
  • natural.land.landCover
  • natural.land.landCover.crops
  • natural.land.landCover.dryCrops
  • natural.land.landCover.forest
  • natural.land.landCover.ice
  • natural.land.landCover.sand
  • natural.land.landCover.shrub
  • natural.land.landCover.tundra
  • natural.water
  • natural.water.ocean
  • natural.water.lake
  • natural.water.river
  • natural.water.other
  • natural.base

एलिमेंट

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

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

  • geometry: यह मैप की चुनी गई सुविधा के सभी ज्यामितीय एलिमेंट (जैसे, पॉलीगॉन, पॉलीलाइन) चुनता है.
  • label: यह मैप की चुनी गई सुविधा के सभी लेबल एलिमेंट (जैसे, टेक्स्ट, पिन) चुनता है.

स्टाइलर

स्टाइलर की मदद से, मैप की हर सुविधा के एलिमेंट के लिए स्टाइल के नियम तय किए जाते हैं.

उदाहरण के लिए, किसी बिल्डिंग के फ़ुटप्रिंट के लिए, हर एलिमेंट को इस तरह स्टाइल किया जा सकता है:

किसी इमारत के लिए geometry स्टाइलर का उदाहरण किसी इमारत के लिए label स्टाइलर का उदाहरण
मैप पर बिल्डिंग के फ़ुटप्रिंट पॉलीगॉन को छिपाना है या दिखाना है. बिल्डिंग के लेबल को छिपाना है या दिखाना है.
पॉलीगॉन के अंदर के रंग और अपारदर्शिता. टेक्स्ट के अंदर के रंग और अपारदर्शिता.
बॉर्डर का रंग, ओपैसिटी, और चौड़ाई. टेक्स्ट के स्ट्रोक का रंग और ओपैसिटी.

इस सेक्शन में, geometry और label एलिमेंट के लिए उपलब्ध अलग-अलग स्टाइल के विकल्पों के बारे में बताया गया है.

geometry स्टाइलर

यहां दी गई टेबल में, सभी उपलब्ध ज्योमेट्रिक स्टाइलर की सूची दी गई है.

स्टाइलर समस्या ब्यौरा

visible

बूलियन मैप की किसी सुविधा के पॉलीगॉन या पॉलीलाइन को छिपाने के लिए, इसे false पर सेट करें.

fillColor

स्ट्रिंग आरजीबी हेक्स स्ट्रिंग का इस्तेमाल करके, पॉलीगॉन या पॉलीलाइन के रंग को पसंद के मुताबिक बनाएं.

fillOpacity

फ़्लोट पॉलीगॉन या पॉलीलाइन की ओपैसिटी को पसंद के मुताबिक बनाएं. इसमें 0 का मतलब पारदर्शी और 1 का मतलब अपारदर्शी होता है.

strokeColor

स्ट्रिंग आरजीबी हेक्स स्ट्रिंग की मदद से, आउटलाइन के रंग को पसंद के मुताबिक बनाएं.

strokeOpacity

फ़्लोट आउटलाइन की ओपैसिटी को पसंद के मुताबिक बनाएं. इसमें 0 का मतलब पारदर्शी और 1 का मतलब अपारदर्शी होता है.

strokeWeight

फ़्लोट आउटलाइन की मोटाई को 0 से 8 तक की रेंज में अपनी पसंद के मुताबिक बनाएं.

ज़्यादा जानकारी के लिए, पॉलीगॉन और पॉलीलाइन देखें.

label स्टाइलर

यहां दी गई टेबल में, सभी उपलब्ध लेबल स्टाइलर की सूची दी गई है.

स्टाइलर समस्या ब्यौरा

visible

बूलियन मैप की किसी सुविधा के लेबल को छिपाने के लिए, false पर सेट करें.

textFillColor

स्ट्रिंग आरजीबी हेक्स स्ट्रिंग का इस्तेमाल करके, टेक्स्ट लेबल के रंग को पसंद के मुताबिक बनाएं.

textFillOpacity

फ़्लोट टेक्स्ट लेबल की ओपैसिटी को पसंद के मुताबिक बनाएं. इसमें 0 का मतलब पारदर्शी और 1 का मतलब अपारदर्शी होता है.

textStrokeColor

स्ट्रिंग आरजीबी हेक्स स्ट्रिंग की मदद से, आउटलाइन के रंग को पसंद के मुताबिक बनाएं.

textStrokeOpacity

फ़्लोट आउटलाइन की ओपैसिटी को पसंद के मुताबिक बनाएं. इसमें 0 का मतलब पारदर्शी और 1 का मतलब अपारदर्शी होता है.

textStrokeWeight

फ़्लोट आउटलाइन की मोटाई को 0 से 8 तक की रेंज में अपनी पसंद के मुताबिक बनाएं.

pinFillColor

स्ट्रिंग आरजीबी हेक्स स्ट्रिंग की मदद से, पिन के रंग को पसंद के मुताबिक बनाएं.

ज़्यादा जानकारी के लिए, आइकॉन और टेक्स्ट लेबल देखें.

कीज़ूम

सभी कीज़ूम लेवल के लिए, किसी सुविधा के लिए एक ही स्टाइल सेट की जा सकती है. इसके अलावा, अलग-अलग कीज़ूम लेवल के लिए अलग-अलग स्टाइल भी सेट की जा सकती हैं. सिर्फ़ एक स्टाइल देने पर, इसका इस्तेमाल z0 से शुरू होने वाले सभी कीज़ूम लेवल के लिए किया जाएगा. अगर आपने अलग-अलग कीज़ूम लेवल के लिए स्टाइल दी हैं, तो स्टाइल उस ज़ूम लेवल से लेकर आपके तय किए गए अगले ज़ूम लेवल तक लागू होगी.

किसी स्टाइल के लिए कीज़ूम लेवल सेट करने के लिए, स्टाइलर प्रॉपर्टी में z0 से z22 तक कीज़ूम लेवल तय करें. इसके बाद, स्टाइलर को पसंद के मुताबिक बनाएं.

यहां दिए गए उदाहरण में, कीज़ूम लेवल 0 से 5 तक पानी का रंग काला है. कीज़ूम लेवल 6 से 11 तक पानी का रंग गहरा सलेटी है. वहीं, कीज़ूम लेवल 12 से पानी का रंग हल्का सलेटी है.

{   "id": "natural.water",   "geometry": {     "fillColor": {       "z0": "#000000",       "z6": "#666666",       "z12": "#cccccc"     }   } }

ज़्यादा जानकारी के लिए, ज़ूम लेवल की स्टाइल देखें.