दस्तावेज़ / सेटअप / React / TomTom
TomTom का सेटअप
MapConductor से वेब पर TomTom Orbis Maps का उपयोग करने का तरीका यहाँ दिया गया है। यह @tomtom-org/maps-sdk (maplibre आधारित) को रैप करता है।
PACKAGE
react-for-tomtom
API KEY
आवश्यक
CSS
आवश्यक नहीं
REACT NATIVE
कोई नहीं
शुरू करने से पहले
Node.js 18 या उच्चतर
TomTom Developer Portal से Orbis Maps API कुंजी
STEP 01
इंस्टॉल करें
@tomtom-org/maps-sdk और maplibre-gl पैकेज में शामिल हैं।
terminalnpm
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-tomtomSTEP 02
API कुंजी को स्टेट हुक में पास करें
कुंजी को व्यू component के props के बजाय स्टेट हुक में पास करें। ऐसा इसलिए कि अगर इसे props में रखा गया तो यह टेस्ट लॉग और स्नैपशॉट में मिल जाएगी।
TomTomMap.tsxTypeScript · React
const state = useTomTomViewState({
apiKey: import.meta.env.VITE_TOMTOM_API_KEY,
mapDesignType: TomTomDesign.Standard,
cameraPosition: createMapCameraPosition({ position: AMSTERDAM, zoom: 11 }),
});सावधानी
कुंजी को बिल्ड समय के वातावरण चर (Vite के लिए import.meta.env.VITE_*) से पास करें और इसे स्रोत नियंत्रण में न डालें। जब तक यह फ्रंटएंड तक पहुँचती है, हानि से बचने के लिए रेफरर प्रतिबंध या डोमेन प्रतिबंध अवश्य लगाएँ।
जाँच
आपको क्या दिखना चाहिए
TomTom का मानचित्र दिखाई देने पर पूर्ण हो गया।
TomTomMap.tsxTypeScript · React
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { TomTomDesign, TomTomMapView2D, useTomTomViewState } from '@mapconductor/react-for-tomtom';
const AMSTERDAM = createGeoPoint({ latitude: 52.3676, longitude: 4.9041 });
export function TomTomMap() {
const state = useTomTomViewState({
apiKey: import.meta.env.VITE_TOMTOM_API_KEY,
mapDesignType: TomTomDesign.Standard,
cameraPosition: createMapCameraPosition({ position: AMSTERDAM, zoom: 11 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'ams', position: AMSTERDAM }));
return (
<TomTomMapView2D state={state} style={{ height: 480 }}>
<Marker state={markerState} />
</TomTomMapView2D>
);
}मैप डिज़ाइन
TomTomDesign Orbis Maps शैलियों का समर्थन करता है। इसमें उज्ज्वल और अंधेरे जोड़ी उपलब्ध हैं।
TomTomDesign
Notes
Standard / StandardLight / StandardDark
मानक देखने के लिए शैली
Driving / DrivingLight / DrivingDark
ड्राइविंग के लिए
MonoLight / MonoDark
एकल रंग। डेटा रखने के लिए बेस के लिए
Satellite
उपग्रह चित्र
समस्या निवारण
मानचित्र पूरी तरह से सफेद रहता है
- जाँचें कि apiKey खाली स्ट्रिंग तो नहीं है।
- जाँचें कि क्या कुंजी Orbis Maps के लिए जारी की गई थी।
ज़ूम अन्य प्रदाताओं से भिन्न है
- TomTom का ज़ूम अक्षांश पर निर्भर करता है। MapConductor कैमरा अक्षांश का उपयोग करके Google के समतुल्य ज़ूम में परिवर्तित करता है।
केवल विकास के समय मानचित्र दो बार प्रारंभ होता है
- React StrictMode effect को दो बार निष्पादित करता है। प्रत्येक प्रदाता इसे पहचानने और एक को त्यागने के लिए डिज़ाइन किया गया है, इसलिए StrictMode हटाने की आवश्यकता नहीं है।
आगे
TomTomMapView 3D है, TomTomMapView2D 2D है। दोनों एक ही स्टेट ऑब्जेक्ट साझा करते हैं।