MapConductorMapTiler का सेटअप
MapConductor से MapTiler Cloud स्टाइल को वेब पर उपयोग करने की प्रक्रिया है। रेंडरर maplibre-gl है, और स्टाइल MapTiler Cloud URL के रूप में API कुंजी के साथ बनाया जाता है।
शुरू करने से पहले
इंस्टॉल करें
कोर और React बाइंडिंग, और प्रदाता पैकेज डालें। प्रदाता को बदलते समय केवल तीसरा बदलता है।
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-maptilerVite के पूर्व-बंडलिंग से बाहर निकालें
Vite का उपयोग करते समय optimizeDeps.exclude में प्रदाता जोड़ें। maplibre-gl v6 URL से वर्कर लोड करता है, इसलिए पहले से बंडल किए जाने पर .vite/deps के नीचे वर्कर फ़ाइल आउटपुट नहीं होती है और लोड करना विफल हो जाता है।
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
optimizeDeps: {
exclude: ["@mapconductor/react-for-maptiler", "@mapconductor/js-sdk-core"],
},
plugins: [react()],
});स्टाइलशीट लोड करें
ऐप के एंट्री-पॉइंट में केवल एक बार लोड करें। भूलने पर मानचित्र की स्थिति या नियंत्रण की दिखावट बिगड़ जाती है।
import '@mapconductor/react-for-maptiler/style.css';
API कुंजी को स्टेट हुक में पास करें
कुंजी स्टाइल JSON के URL में एम्बेड की जाती है (https://api.maptiler.com/maps/<style>/style.?key=…)।
const state = useMapTilerViewState({
apiKey: import.meta.env.VITE_MAPTILER,
mapDesignType: MapTilerDesign.Streets,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});जाँच
आपको क्या दिखना चाहिए
MapTiler स्टाइल से मानचित्र दिखाई देने पर पूर्ण हो जाता है।
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { MapTilerDesign, MapTilerMapView2D, useMapTilerViewState } from '@mapconductor/react-for-maptiler';
import '@mapconductor/react-for-maptiler/style.css';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function MapTilerMap() {
const state = useMapTilerViewState({
apiKey: import.meta.env.VITE_MAPTILER,
mapDesignType: MapTilerDesign.Streets,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<MapTilerMapView2D state={state} style={{ height: 480 }}>
<Marker state={markerState} />
</MapTilerMapView2D>
);
}मैप डिज़ाइन
MapTilerDesign MapTiler Cloud संदर्भ स्टाइल का समर्थन करता है।
समस्या निवारण
मानचित्र पूरी तरह सफेद बना हुआ है
- जांचें कि apiKey खाली स्ट्रिंग नहीं है। अक्सर पर्यावरण चर नहीं पढ़ पाने की स्थिति होती है।
- MapTiler Cloud में जांचें कि क्या कुंजी मान्य है या मुफ्त कोटा पार नहीं हुआ है।
मानचित्र की स्थिति या नियंत्रण बिगड़ जाते हैं
- जांचें कि क्या आप style.css लोड कर रहे हैं।
विकास के दौरान केवल मानचित्र दो बार आरंभ होता है
- React StrictMode effect को दो बार निष्पादित करता है। प्रत्येक प्रदाता इसे पहचानता है और एक को हटा देता है, इसलिए StrictMode हटाने की आवश्यकता नहीं है।
आगे
MapLibre के समान रेंडरर है, इसलिए व्यवहार और प्रतिबंध MapLibre प्रदाता के समान हैं।