दस्तावेज़ / सेटअप / React / Mappls

Mappls का सेटअप

Mappls (MapmyIndia) के Web SDK को MapConductor से उपयोग करने के चरण। web में view state को 1 API key पास किया जाता है।

PACKAGE
@mapconductor/react-for-mappls
API KEY
आवश्यक
VIEW
MapplsMapView2D
TIME
10 मिनट
वही प्रोवाइडर, दूसरे प्लेटफ़ॉर्मAndroidiOS

शुरू करने से पहले

Node.js और React 18 या उससे ऊपर का प्रोजेक्ट
Mappls (MapmyIndia) खाता और API key
STEP 01

API key प्राप्त करें

Mappls डेवलपर कंसोल पर web के लिए API key जारी करें। नेटिव पक्ष के विपरीत, web कॉन्फ़िगरेशन फ़ाइल के बजाय 1 कुंजी से काम करता है।

STEP 02

पैकेज डालें

Mappls web SDK निर्भरता के रूप में शामिल है।

shellShell
npm install @mapconductor/react-for-mappls @mapconductor/js-sdk-core @mapconductor/js-sdk-react
STEP 03

कुंजी को view state में पास करें

कुंजी useMapplsViewState को पास की जाती है। वास्तविक मूल्य को स्रोत प्रबंधन में न रखें, इसे उपयोग किए जा रहे बिल्ड टूल के एनवायरनमेंट वेरिएबल तंत्र के माध्यम से लोड करें।

जाँच

आपको क्या दिखना चाहिए

दिल्ली को केंद्र में रखकर मानचित्र प्रदर्शित करें। टाइल लोड हो जाने पर पूर्ण हो जाएगा।

import {
  MapplsDesign,
  MapplsMapView2D,
  useMapplsViewState,
} from '@mapconductor/react-for-mappls';
import { createGeoPoint, createMapCameraPosition } from '@mapconductor/js-sdk-core';

// Your own key. Read it from your environment however your build tool does
// it, and keep it out of source control.
const MAPPLS_API_KEY = '…';

const DELHI = createGeoPoint({ latitude: 28.6139, longitude: 77.2090 });

export default function App() {
  const state = useMapplsViewState({
    apiKey: MAPPLS_API_KEY,
    mapDesignType: MapplsDesign.Default,
    cameraPosition: createMapCameraPosition({ position: DELHI, zoom: 11 }),
  });

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <MapplsMapView2D state={state} />
    </div>
  );
}

मैप डिज़ाइन

Notes
Default
अनुबंध की परवाह किए बिना उपयोग करने योग्य डिफ़ॉल्ट शैली
StandardDay
मानक दिन शैली
StandardNight / GreyDay
अतिरिक्त शुल्क वाला सशुल्क विकल्प। अनुबंध नहीं होने पर SDK इसे अस्वीकार कर देगा

समस्या निवारण

मानचित्र पूरी तरह सफेद है, और एक भी टाइल नहीं आ रही

  • सत्यापित करें कि क्रेडेंशियल मानचित्र निर्माण से पहले सेट हैं या नहीं।
  • Mappls कंसोल पर जांचें कि कुंजी मान्य है और उपयोग सीमा से अधिक नहीं है।
  • जांचें कि डिवाइस नेटवर्क तक पहुँच सकता है या नहीं।

शैली बदलने पर style not found हो रहा है

  • StandardNight और GreyDay अतिरिक्त शुल्क वाले सशुल्क विकल्प हैं। यदि आपने अनुबंध नहीं किया है, तो कृपया Default या StandardDay का उपयोग करें।

SDK स्क्रिप्ट 401 के कारण लोड नहीं हो सकी

  • Mappls web SDK को sdk.mappls.com से कुंजी के साथ लोड किया जाता है। यदि 401 लौटाया जाता है, तो उस कुंजी में web SDK का उपयोग अधिकार नहीं है या वह समाप्त हो गई है।

आगे

मार्कर, पॉलीलाइन, पॉलीगन, सर्कल, ग्राउंड इमेज, रेस्टर लेयर, और InfoBubble को कॉमन API के माध्यम से चालू रूप में उपयोग किया जा सकता है।