दस्तावेज़ / मानचित्र दृश्य / मानचित्र डिज़ाइन

मानचित्र डिज़ाइन (टाइल) स्विच करें

मानचित्र का रूप mapDesignType एक से निर्धारित होता है। प्रत्येक प्रदाता के लिए तैयार प्रीसेट चुनें, या स्टाइल JSON या टाइल URL निर्दिष्ट करके अपना स्वयं का डिज़ाइन परिभाषित करें। स्विच करने के लिए बस प्रॉपर्टी में मान निर्दिष्ट करना काफी है, मानचित्र को फिर से बनाने की आवश्यकता नहीं है।

ANDROID

com.mapconductor:core

iOS

MapConductorCore

REACT

@mapconductor/js-sdk-core

डेमो देखेंमैप डिज़ाइन · React ↗

01 · डिज़ाइन का प्रकार

किसी भी प्रदाता का डिज़ाइन MapDesignTypeInterface (iOS में MapDesignTypeProtocol) को लागू करता है। बस सामान्य 3 तत्वों को याद रखें, प्रदाता बदलने पर भी उनका उपयोग वही रहता है।

डिज़ाइन की पहचान करने वाला मान। प्रदाता का मूल मान (जैसे Google के mapType स्थिरांक) या स्ट्रिंग।

getValue()

प्रदाता के मानचित्र इंजन को पास किया जाने वाला वास्तविक मान। इसमें शैली JSON का URL या टाइल परिभाषा शामिल है।

attributionRules

ज़ूम और प्रदर्शन क्षेत्र के अनुसार स्रोत सूचना बदलने का नियम। कस्टम टाइल का उपयोग करते समय आवश्यक है।

02 · प्रीसेट

प्रत्येक प्रदाता के पैकेज में, उस प्रदाता के लिए उपलब्ध मानक डिज़ाइन स्थिरांक के रूप में शामिल हैं। सैंपल ऐप इस सूची को वैसे ही विकल्प के रूप में उपयोग करता है।

प्रदाता

प्रकार

प्रीसेट

Google Maps

GoogleMapDesign

Normal · Satellite · Hybrid · Terrain · None

MapLibre

MapLibreDesign

DemoTiles · OsmBright / En / Ja · MapTilerBasicEn / Ja · MapTilerTonerEn / Ja · OpenMapTiles（9）

MapKit
iOS · React

MapKitMapDesign

Standard · Satellite · Hybrid · SatelliteFlyover · HybridFlyover · MutedStandard

Mapbox

MapboxMapDesign
React: MapboxDesign

Standard · StandardSatellite · Streets · Outdoors · Light · Dark · Satellite · SatelliteStreets · NavigationDay / Night
React पर: Streets · Outdoors · Light · Dark · SatelliteStreets, और साथ में OsmBright / MapTiler परिवार का स्टाइल JSON

MapTiler

MapTilerDesign

Streets · StreetsDark · StreetsLight · Basic · Bright · Satellite · Outdoor · Winter · Topo · Toner · Dataviz · Backdrop · Ocean · Landscape · Aquarelle · OpenStreetMap（16）

HERE

HereMapDesign

NormalDay / Night · Satellite · HybridDay / Night · LiteDay / Night · LiteHybridDay / Night · LogisticsDay / Night · LogisticsHybridDay · RoadNetworkDay / Night (14; iOS पर LogisticsHybridNight मिलाकर 15)

ArcGIS

ArcGISDesign
iOS / React: ArcGISMapDesign

Streets · Imagery · Topographic · Navigation · Nova · Newspaper · HumanGeography… · OsmStandard …（61）

TomTom

TomTomMapDesign
React: TomTomDesign

Standard · Driving · Satellite
React में इसके अलावा StandardLight / Dark · DrivingLight / Dark · MonoLight / Dark भी हैं

Longdo

LongdoDesign

Normal · Easy · Pastel · PastelGray · Hard · Gray · Light · Night · Dark · Political · Osm · Satellite · Hybrid（13）

Leaflet
React

LeafletDesign

OpenStreetMap · None ＋ कोई भी XYZ टाइल

OpenLayers
React

OpenLayersDesign

OpenStreetMap · None ＋ कोई भी XYZ टाइल

Azure Maps
React

AzureMapsDesign

Road · RoadShadedRelief · Blank · BlankAccessible · Satellite · SatelliteRoadLabels · GrayscaleDark / Light · Night · HighContrastDark / Light（12）

Cesium
React

CesiumDesign

Default · None

केवल उन्हीं चीज़ों पर ध्यान दिया गया है जिनमें प्लेटफ़ॉर्म के अनुसार अंतर है। टिप्पणी रहित पंक्तियों में, प्रकार का नाम और प्रीसेट स्थिरांक का नाम भी 3 प्लेटफ़ॉर्म पर समान है।

प्लेटफ़ॉर्म

03 · स्विच करें

मानचित्र दृश्य की स्थिति ऑब्जेक्ट के mapDesignType में मान निर्दिष्ट करें। स्थिति पर नज़र रखी जाती है, इसलिए मान निर्दिष्ट करते ही मानचित्र का रूप बदल जाता है।

MapDesignMapPage.kt · Jetpack Compose

// state MapViewStateInterface<*> है; असाइन करने से पहले प्रोवाइडर के टाइप तक सीमित करें
when (state) {
    is GoogleMapViewStateInterface ->
        state.mapDesignType = GoogleMapDesign.Satellite
    is MapLibreViewStateInterface ->
        state.mapDesignType = MapLibreDesign.OsmBrightJa
    is MapTilerViewStateInterface ->
        state.mapDesignType = MapTilerDesign.Toner
}

MapDesignMapPage.swift · SwiftUI

// शुरुआती डिज़ाइन State बनाते समय दिया जाता है
@StateObject private var mapLibreState = MapLibreViewState(
    mapDesignType: MapLibreDesign.DemoTiles,
    cameraPosition: viewModel.initCameraPosition
)

// बदलना यानी सिर्फ़ @Published प्रॉपर्टी में असाइन करना
mapLibreState.mapDesignType = MapLibreDesign.OsmBrightJa

MapDesignPage.tsx

const [mapViewState, setMapViewState] =
  useState<MapViewStateInterface<MapDesignTypeInterface<unknown>> | null>(null);

const handleDesignChange = (designId: string) => {
  const option = mapDesignOptions.find(item => item.design.id === designId);
  if (!mapViewState || !option) return;
  mapViewState.mapDesignType = option.design;
};

04 · कस्टम डिज़ाइन परिभाषित करें

प्रीसेट प्रकार उसी रूप में कंस्ट्रक्टर के रूप में उपलब्ध हैं। id और, स्टाइल JSON का URL (वेक्टर प्रकार) या टाइल URL टेम्पलेट (रैस्टर प्रकार) पास करके, अपनी कंपनी की शैली या भूगोल संस्थान टाइल को प्रीसेट की तरह ही उपयोग किया जा सकता है।

CustomDesigns.kt · MapLibre / स्टाइल JSON से परिभाषित

// MapLibreDesign एक data class है: स्टाइल JSON का URL देते ही अपना डिज़ाइन बन जाता है
val GsiPale =
    MapLibreDesign(
        id = "gsi-pale",
        styleJsonURL = "https://example.com/styles/gsi-pale/style.json",
        attributionRules =
            listOf(
                AttributionRule(attribution = "GSI टाइल"),
                AttributionRule(attribution = "GEBCO", minZoom = 5, maxZoom = 8),
            ),
    )

MapDesignPageViewModel.kt · विकल्पों में मिलाएं

private val mapLibreDesigns =
    listOf(
        MapDesignOption(label = "OsmBright", design = MapLibreDesign.OsmBright),
        MapDesignOption(label = "GSI Pale", design = GsiPale),
    )

GoogleMapDesign.Custom · नेटिव मान लपेटें

// नेटिव mapType कॉन्स्टेंट को जस का तस लपेटता है और सिर्फ़ एट्रिब्यूशन जोड़ता है
val NormalWithNotice =
    GoogleMapDesign.Custom(
        id = MAP_TYPE_NORMAL,
        attributionRules = listOf(AttributionRule(attribution = "हमारा अपना डेटा 2026")),
    )

Google Maps की तरह, जहाँ मानचित्र का प्रकार नेटिव स्थिरांक द्वारा निर्धारित होता है, वहाँ GoogleMapDesign.Custom का उपयोग करें, और id में स्थिरांक पास करके केवल स्रोत संकेत को बदलें। MapTiler, Mapbox, HERE आदि के पास भी समान आकार का कंस्ट्रक्टर होता है।

CustomDesigns.swift · MapLibre / स्टाइल JSON से परिभाषित

// public init(id:styleJsonURL:attributionRules:) ही अपने डिज़ाइन का रास्ता है
let gsiPale = MapLibreDesign(
    id: "gsi-pale",
    styleJsonURL: "https://example.com/styles/gsi-pale/style.json",
    attributionRules: [
        AttributionRule(attribution: "GSI टाइल"),
        AttributionRule(attribution: "GEBCO", minZoom: 5, maxZoom: 8),
    ]
)

MapDesignPageViewModel.swift · विकल्पों में मिलाएं

private let mapLibreDesigns = [
    MapDesignOption(label: "DemoTiles", design: MapLibreDesign.DemoTiles),
    MapDesignOption(label: "GSI Pale", design: gsiPale),
]

// लागू करते समय प्रोवाइडर के टाइप में कास्ट करें
if let design = option.design as? MapLibreDesign {
    mapLibreState.mapDesignType = design
}

यह एक स्ट्रक्चर है, इसलिए इसे `let` के साथ परिभाषित किया जा सकता है और कहीं भी साझा किया जा सकता है। `ViewModel` का `MapDesignOption` में `design: Any` होता है, इसलिए लागू करते समय `as?` का उपयोग करके प्रदाता के प्रकार तक सीमित किया जाता है।

leafletDesignOptions.ts · टाइल URL द्वारा परिभाषित

const GSI_STANDARD_DESIGN = new LeafletDesign({
  id: 'gsi-standard',
  tileUrl: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
  tileOptions: { minZoom: 5, maxZoom: 18, tileSize: 256 },
  attributionRules: GSI_STANDARD_ATTRIBUTION_RULES,
});

export const LEAFLET_DESIGNS: MapDesignOption[] = [
  { label: 'OpenStreetMap', design: LeafletDesign.OpenStreetMap },
  { label: 'GSI Standard', design: GSI_STANDARD_DESIGN },
  { label: 'None', design: LeafletDesign.None },
];

maplibreDesignOptions.ts · स्टाइल JSON द्वारा परिभाषित

// new MapLibreDesign(id, styleJsonURL, attributionRules?)
const GSI_PALE = new MapLibreDesign(
  'gsi-pale',
  'https://example.com/styles/gsi-pale/style.json',
  [{ attribution: GSI_ATTRIBUTION }],
);

export const MAPLIBRE_DESIGNS: MapDesignOption[] = [
  { label: 'OsmBrightJa', design: MapLibreDesign.OsmBrightJa },
  { label: 'GSI Pale', design: GSI_PALE },
];

`Leaflet` रास्टर टाइल, `MapLibre` स्टाइल JSON द्वारा परिभाषित करता है। डिज़ाइन की मेटाडेटा प्रत्येक प्रदाता के भारी रनटाइम SDK के समान पैकेज में होती है, इसलिए नमूने में प्रदाता के अनुसार गतिशील import करके चंक अलग किए गए हैं।

05 · स्रोत नोट (`attributionRules`)

कस्टम टाइल का उपयोग करते समय, टाइल प्रदाता की शर्तों को नियम के रूप में रखा जाता है। कैमरे के ज़ूम और प्रदर्शन क्षेत्र से केवल आवश्यक नोट स्वचालित रूप से चुने जाते हैं।

attribution

प्रदर्शित करने के लिए स्ट्रिंग। लिंक वाला HTML भी पास किया जा सकता है।

minZoom / maxZoom

नोट दिखाने के लिए ज़ूम सीमा। सीमा के बाहर स्वचालित रूप से गायब हो जाता है।

bounds

नोट दिखाने के लिए आयताकार क्षेत्र। जापान के भीतर की टाइल आदि के लिए उपयोग किया जाता है।

06 · नमूना ऐप

तीनों प्लेटफ़ॉर्म में डिज़ाइन स्विचिंग UI शामिल है। UI का निर्माण प्रत्येक प्लेटफ़ॉर्म पर सीधे कार्यान्वित किया गया है, केवल मान निर्धारित करने की प्रक्रिया समान है।

Map design ▾

ANDROID · ExposedDropdownMenu

Map design ⌄

iOS · SwiftUI Menu

REACT · map-design-selector

वीडियो द्वारा दिखाया गया कार्यान्वयन · Android + MapLibreKotlin · Jetpack Compose

val mapViewState = rememberMapLibreMapViewState(
    mapDesign = MapLibreDesign.DemoTiles,
    cameraPosition = MapCameraPosition(
        position = GeoPoint.fromLatLong(21.382314, -157.933097),
        zoom = 12.0,
    ),
)

val designs = listOf(
    "Demo" to MapLibreDesign.DemoTiles,
    "OSM Bright" to MapLibreDesign.OsmBrightJa,
    "Toner" to MapLibreDesign.MapTilerTonerJa,
)

MapLibreMapView(state = mapViewState, modifier = Modifier.weight(1f))

Row {
    designs.forEach { (label, design) ->
        // Just an assignment. The map is not rebuilt, so the camera stays where it is
        Button(onClick = { mapViewState.mapDesignType = design }) { Text(label) }
    }
}

नमूना वीडियो · डिज़ाइन बदलना

वीडियो अभी नहीं बनाउसी मानचित्र पर `mapDesignType` को बदलकर, प्रीसेट क्रमशः लागू होने का दृश्य। बदलने का क्षण ही मुख्य बिंदु है।

मानचित्र डिज़ाइन (टाइल) स्विच करें

01 · डिज़ाइन का प्रकार

02 · प्रीसेट

03 · स्विच करें

04 · कस्टम डिज़ाइन परिभाषित करें

05 · स्रोत नोट (`attributionRules`)

06 · नमूना ऐप

संबंधित पेज

प्रदाता बदलें

रास्टर लेयर

API संदर्भ