क्लाउड पर आधारित मैप की स्टाइलिंग के लिए JSON स्कीमा का इस्तेमाल करके, मैप को पसंद के मुताबिक बनाया जा सकता है. इसके लिए, 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.
टॉप-लेवल प्रॉपर्टी
नीचे दी गई टेबल में मौजूद प्रॉपर्टी, मैप की पूरी स्टाइल पर लागू होती हैं.
| प्रॉपर्टी | टाइप | ब्यौरा | उदाहरण |
|---|---|---|---|
|
स्ट्रिंग | #RRGGBB हेक्स स्ट्रिंग का इस्तेमाल करके, मैप ऐप्लिकेशन के बैकग्राउंड के रंग को पसंद के मुताबिक बनाएं. इस सेटिंग से, ओपैसिटी में बदलाव नहीं किया जा सकता. | "#002211" |
|
"light"|"dark" | लाइट या डार्क मोड तय करें. अगर कोई मोड तय नहीं किया जाता है, तो डिफ़ॉल्ट रूप से "लाइट" मोड लागू होता है. | "light" |
|
बूलियन | मोनोक्रोम मोड चालू करने के लिए, मैप के ग्रे वर्शन के लिए true का इस्तेमाल करें. |
|
|
ऑब्जेक्ट | स्टाइल की परिभाषा में शामिल, मनचाहा कुंजी-वैल्यू डेटा. इस फ़ील्ड का इस्तेमाल करके, स्टाइल से जुड़ा ऐसा कॉन्टेंट शामिल किया जा सकता है जो स्टाइलिंग से जुड़ा न हो. यह डेटा, मैप क्लाइंट को नहीं भेजा जाता. जैसे, Maps JavaScript SDK. |
|
स्टाइल के नियमों वाले ऑब्जेक्ट
इस सेक्शन में, उन प्रॉपर्टी के बारे में बताया गया है जो styles कलेक्शन में, स्टाइल के नियमों वाले ऑब्जेक्ट तय करती हैं. इनकी मदद से, मैप की सुविधाओं को पसंद के मुताबिक बनाया जा सकता है. स्टाइल के नियमों वाले हर ऑब्जेक्ट में ये चीज़ें शामिल होनी चाहिए:
idप्रॉपर्टी.geometryयाlabelएलिमेंट, जिसमें उससे जुड़ी स्टाइलर प्रॉपर्टी तय की गई हों.
id (मैप की सुविधा)
id प्रॉपर्टी, स्टाइल करने के लिए मैप की सुविधा तय करती है. प्रॉपर्टी के नाम, स्टाइल एडिटर में मौजूद मैप की सुविधा के नामों के कैमल केस वर्शन होते हैं.
मैप की सुविधाएं, कैटगरी ट्री बनाती हैं. अगर पैरंट सुविधा का टाइप तय किया जाता है,
जैसे कि pointOfInterest, तो पैरंट के लिए तय की गई स्टाइल, उसके सभी
चाइल्ड पर लागू होती हैं. जैसे, pointOfInterest.retail और pointOfInterest.lodging.
ज़्यादा जानकारी के लिए, मैप की सुविधा का क्रम देखें.
उपलब्ध id प्रॉपर्टी की सूची
id की ये प्रॉपर्टी उपलब्ध हैं:
pointOfInterestpointOfInterest.emergencypointOfInterest.emergency.firepointOfInterest.emergency.hospitalpointOfInterest.emergency.pharmacypointOfInterest.emergency.policepointOfInterest.entertainmentpointOfInterest.entertainment.artspointOfInterest.entertainment.casinopointOfInterest.entertainment.cinemapointOfInterest.entertainment.historicpointOfInterest.entertainment.museumpointOfInterest.entertainment.themeParkpointOfInterest.entertainment.touristAttractionpointOfInterest.foodAndDrinkpointOfInterest.foodAndDrink.barpointOfInterest.foodAndDrink.cafepointOfInterest.foodAndDrink.restaurantpointOfInterest.foodAndDrink.winerypointOfInterest.landmarkpointOfInterest.lodgingpointOfInterest.recreationpointOfInterest.recreation.beachpointOfInterest.recreation.boatingpointOfInterest.recreation.fishingpointOfInterest.recreation.golfCoursepointOfInterest.recreation.hotSpringpointOfInterest.recreation.natureReservepointOfInterest.recreation.parkpointOfInterest.recreation.peakpointOfInterest.recreation.sportsComplexpointOfInterest.recreation.sportsFieldpointOfInterest.recreation.trailheadpointOfInterest.recreation.zoopointOfInterest.retailpointOfInterest.retail.grocerypointOfInterest.retail.shoppingpointOfInterest.servicepointOfInterest.service.atmpointOfInterest.service.bankpointOfInterest.service.carRentalpointOfInterest.service.evChargingpointOfInterest.service.gasStationpointOfInterest.service.parkingLotpointOfInterest.service.postOfficepointOfInterest.service.restStoppointOfInterest.service.restroompointOfInterest.transitpointOfInterest.transit.airportpointOfInterest.otherpointOfInterest.other.bridgepointOfInterest.other.cemeterypointOfInterest.other.governmentpointOfInterest.other.librarypointOfInterest.other.militarypointOfInterest.other.placeOfWorshippointOfInterest.other.schoolpointOfInterest.other.townSquarepoliticalpolitical.countryOrRegionpolitical.borderpolitical.reservationpolitical.stateOrProvincepolitical.citypolitical.sublocalitypolitical.neighborhoodpolitical.landParcelinfrastructureinfrastructure.buildinginfrastructure.building.commercialinfrastructure.businessCorridorinfrastructure.roadNetworkinfrastructure.roadNetwork.noTrafficinfrastructure.roadNetwork.noTraffic.pedestrianMallinfrastructure.roadNetwork.noTraffic.trailinfrastructure.roadNetwork.noTraffic.trail.pavedinfrastructure.roadNetwork.noTraffic.trail.unpavedinfrastructure.roadNetwork.parkingAisleinfrastructure.roadNetwork.rampinfrastructure.roadNetwork.roadinfrastructure.roadNetwork.road.arterialinfrastructure.roadNetwork.road.highwayinfrastructure.roadNetwork.road.localinfrastructure.roadNetwork.road.noOutletinfrastructure.roadNetwork.roadShieldinfrastructure.roadNetwork.roadSigninfrastructure.roadNetwork.roadDetailinfrastructure.roadNetwork.roadDetail.surfaceinfrastructure.roadNetwork.roadDetail.crosswalkinfrastructure.roadNetwork.roadDetail.sidewalkinfrastructure.roadNetwork.roadDetail.intersectioninfrastructure.railwayTrackinfrastructure.railwayTrack.commercialinfrastructure.railwayTrack.commuterinfrastructure.transitStationinfrastructure.transitStation.bicycleShareinfrastructure.transitStation.busStationinfrastructure.transitStation.ferryTerminalinfrastructure.transitStation.funicularStationinfrastructure.transitStation.gondolaStationinfrastructure.transitStation.monorailinfrastructure.transitStation.railStationinfrastructure.transitStation.railStation.subwayStationinfrastructure.transitStation.railStation.tramStationinfrastructure.urbanAreanaturalnatural.continentnatural.archipelagonatural.islandnatural.landnatural.land.landCovernatural.land.landCover.cropsnatural.land.landCover.dryCropsnatural.land.landCover.forestnatural.land.landCover.icenatural.land.landCover.sandnatural.land.landCover.shrubnatural.land.landCover.tundranatural.waternatural.water.oceannatural.water.lakenatural.water.rivernatural.water.othernatural.base
एलिमेंट
एलिमेंट, मैप की सुविधा के सबडिविज़न होते हैं. उदाहरण के लिए, सड़क में मैप पर ग्राफ़िकल लाइन (geometry) और उसके नाम को दिखाने वाला टेक्स्ट (label) शामिल होता है.
ये एलिमेंट उपलब्ध हैं. हालांकि, ध्यान दें कि किसी खास मैप की सुविधा के लिए, इनमें से कोई भी, कुछ या सभी एलिमेंट इस्तेमाल किए जा सकते हैं:
geometry: चुनी गई मैप की सुविधा के सभी ज्यामितीय एलिमेंट (जैसे, पॉलीगॉन, पॉलीलाइन) चुनता है.label: चुनी गई मैप की सुविधा के सभी लेबल एलिमेंट (जैसे, टेक्स्ट, पिन) चुनता है.
स्टाइलर
स्टाइलर की मदद से, मैप की सुविधा के हर एलिमेंट के लिए स्टाइल के नियम तय किए जाते हैं.
उदाहरण के लिए, किसी इमारत के फ़ुटप्रिंट के लिए, हर एलिमेंट को इस तरह स्टाइल किया जा सकता है:
किसी इमारत के लिए geometry स्टाइलर का उदाहरण |
किसी इमारत के लिए label स्टाइलर का उदाहरण |
|---|---|
| मैप पर, इमारत के फ़ुटप्रिंट का पॉलीगॉन छिपाना है या दिखाना है. | इमारत का लेबल छिपाना है या दिखाना है. |
| पॉलीगॉन के अंदर के रंग और ओपैसिटी. | टेक्स्ट के अंदर के रंग और ओपैसिटी. |
| बॉर्डर का रंग, ओपैसिटी, और चौड़ाई. | टेक्स्ट के आउटलाइन का रंग और ओपैसिटी. |
इस सेक्शन में, geometry और label एलिमेंट के लिए उपलब्ध अलग-अलग स्टाइल के विकल्पों के बारे में बताया गया है.
geometry स्टाइलर
नीचे दी गई टेबल में, सभी उपलब्ध ज्यामितीय स्टाइलर की सूची दी गई है.
| स्टाइलर | टाइप | ब्यौरा |
|---|---|---|
|
बूलियन | मैप की सुविधा के पॉलीगॉन या पॉलीलाइन को छिपाने के लिए, इसे false पर सेट करें. |
|
स्ट्रिंग | आरजीबी हेक्स स्ट्रिंग का इस्तेमाल करके, पॉलीगॉन या पॉलीलाइन के रंग को पसंद के मुताबिक बनाएं. |
|
फ़्लोट | पॉलीगॉन या पॉलीलाइन की ओपैसिटी को पसंद के मुताबिक बनाएं. इसमें 0 का मतलब पारदर्शी और 1 का मतलब अपारदर्शी है. |
|
स्ट्रिंग | आरजीबी हेक्स स्ट्रिंग का इस्तेमाल करके, आउटलाइन के रंग को पसंद के मुताबिक बनाएं. |
|
फ़्लोट | आउटलाइन की ओपैसिटी को पसंद के मुताबिक बनाएं. इसमें 0 का मतलब पारदर्शी और 1 का मतलब अपारदर्शी है. |
|
फ़्लोट | आउटलाइन की मोटाई को 0 से 8 के बीच सेट करके, पसंद के मुताबिक बनाएं. |
ज़्यादा जानकारी के लिए, पॉलीगॉन और पॉलीलाइन देखें.
label स्टाइलर
नीचे दी गई टेबल में, सभी उपलब्ध लेबल स्टाइलर की सूची दी गई है.
| स्टाइलर | टाइप | ब्यौरा |
|---|---|---|
|
बूलियन | मैप की सुविधा के लेबल को छिपाने के लिए, इसे false पर सेट करें. |
|
स्ट्रिंग | आरजीबी हेक्स स्ट्रिंग का इस्तेमाल करके, टेक्स्ट लेबल के रंग को पसंद के मुताबिक बनाएं. |
|
फ़्लोट | टेक्स्ट लेबल की ओपैसिटी को पसंद के मुताबिक बनाएं. इसमें 0 का मतलब पारदर्शी और 1 का मतलब अपारदर्शी है. |
|
स्ट्रिंग | आरजीबी हेक्स स्ट्रिंग का इस्तेमाल करके, आउटलाइन के रंग को पसंद के मुताबिक बनाएं. |
|
फ़्लोट | आउटलाइन की ओपैसिटी को पसंद के मुताबिक बनाएं. इसमें 0 का मतलब पारदर्शी और 1 का मतलब अपारदर्शी है. |
|
फ़्लोट | आउटलाइन की मोटाई को 0 से 8 के बीच सेट करके, पसंद के मुताबिक बनाएं. |
|
स्ट्रिंग | आरजीबी हेक्स स्ट्रिंग का इस्तेमाल करके, पिन के रंग को पसंद के मुताबिक बनाएं. |
|
स्ट्रिंग | आरजीबी हेक्स स्ट्रिंग का इस्तेमाल करके, पिन में मौजूद ग्लिफ़ (आइकॉन) के रंग को पसंद के मुताबिक बनाएं. |
|
स्ट्रिंग | आरजीबी हेक्स स्ट्रिंग का इस्तेमाल करके, पिन की आउटलाइन के रंग को पसंद के मुताबिक बनाएं. |
ज़्यादा जानकारी के लिए, आइकॉन और टेक्स्ट लेबल देखें.
कीज़ूम
किसी सुविधा के लिए, सभी कीज़ूम लेवल के लिए एक ही स्टाइल सेट किया जा सकता है. इसके अलावा, अलग-अलग कीज़ूम लेवल के लिए अलग-अलग स्टाइल तय किए जा सकते हैं. अगर सिर्फ़ एक स्टाइल दिया जाता है, तो इसका इस्तेमाल z0 से शुरू होने वाले सभी कीज़ूम लेवल के लिए किया जाएगा. अगर अलग-अलग कीज़ूम लेवल के लिए स्टाइल दिए जाते हैं, तो स्टाइल उस ज़ूम लेवल से लागू होगा जब तक कि आपने अगला ज़ूम लेवल तय नहीं किया है.
किसी स्टाइल के लिए कीज़ूम लेवल सेट करने के लिए, स्टाइलर प्रॉपर्टी में z0 से z22 तक कीज़ूम लेवल तय करें. इसके बाद, स्टाइलर को पसंद के मुताबिक बनाएं.
यहां दिए गए उदाहरण में, पानी का रंग कीज़ूम लेवल 0-5 के लिए काला, कीज़ूम लेवल 6-11 के लिए गहरा ग्रे, और कीज़ूम लेवल 12 से हल्का ग्रे है.
{
"id": "natural.water",
"geometry": {
"fillColor": {
"z0": "#000000",
"z6": "#666666",
"z12": "#cccccc"
}
}
}
ज़्यादा जानकारी के लिए, स्टाइल के ज़ूम लेवल देखें.
सीमाएं
Google Cloud Console में, JSON का इस्तेमाल करके लगभग हर चीज़ को स्टाइल किया जा सकता है. हालांकि, मैप की सेटिंग मेन्यू के इन विकल्पों को स्टाइल नहीं किया जा सकता:
- दिलचस्पी की जगहों की डेंसिटी को कंट्रोल करना.
- इमारतों के डिसप्ले (फ़ुटप्रिंट बनाम 3D) को बदलना.
- लैंडमार्क के डिसप्ले (इलस्ट्रेटेड बनाम स्टैंडर्ड) को बदलना.
मैप-लेवल के इन विकल्पों को सही तरीके से रेंडर करने के लिए, टाइल डेटा को फिर से फ़ेच करना पड़ता है. कुछ मामलों में, ऐसा करना सही नहीं होता.
इन विकल्पों के लिए, आपको सेटिंग मैप की सेटिंग मेन्यू में अपनी प्राथमिकता चुननी होगी.
एक्सपोर्ट की गई स्टाइल में ये विकल्प शामिल नहीं होते. इसलिए, स्टाइल इंपोर्ट करते समय, इन्हें Google Cloud Console में फिर से चुनना होगा.