परिचय

वेबजीआईएस प्रोग्रामिंग सीखने की यात्रा शुरू करना एक चुनौती हो सकती है, खासकर अगर हम एचटीएमएल, सीएसएस और जावास्क्रिप्ट की दुनिया में नए हैं। सौभाग्य से, रिप्लिट जैसे टूल के साथ, हम सरल और सीधे तरीके से सीखना शुरू कर सकते हैं। यह आलेख आपको मैपटाइलर का उपयोग करके एक सरल वेबजीआईएस एप्लिकेशन बनाने के बुनियादी चरणों के बारे में बताएगा। इस ट्यूटोरियल के साथ, हम सीखेंगे कि इंटरैक्टिव मानचित्र कैसे बनाएं जिन्हें केवल हमारे ब्राउज़र का उपयोग करके कहीं से भी एक्सेस किया जा सकता है।

चरण 1. रिप्लिट में एक खाता और प्रोजेक्ट बनाएं

1. रिप्लिट के लिए साइन अप करें:

• रिप्लिट खोलें
• ऊपरी दाएं कोने में "साइन अप" बटन पर क्लिक करें।
• इच्छित पंजीकरण विधि का चयन करें (Google, GitHub, या ईमेल)।
• सफल पंजीकरण के बाद, हमें रिप्लिट डैशबोर्ड पर निर्देशित किया जाएगा।

2. एक नया प्रोजेक्ट बनाना:

• रेप्लिट डैशबोर्ड में, "क्रिएट रिप्ल" बटन पर क्लिक करें।
• टेम्पलेट अनुभाग में, "HTML, CSS, JS" चुनें।
• हमारे प्रोजेक्ट को नाम दें, उदाहरण के लिए "वेबजीआईएस-सिंपल"।
• प्रोजेक्ट बनाने के लिए "Repl बनाएं" पर क्लिक करें। एक बार प्रोजेक्ट बन जाने के बाद, हम तीन मुख्य फ़ाइलें देखेंगे: Index.html, style.css, औरscript.js। इन फ़ाइलों का उपयोग हमारे वेब पेज को बनाने के लिए किया जाएगा।

चरण 2: HTML संरचना की स्थापना

1. बुनियादी HTML संरचना को समझना:

• Replit में Index.html फ़ाइल खोलें।
• index.html एक फ़ाइल है जो हमारे वेब पेजों की संरचना और मूल सामग्री को निर्धारित करती है।

2. मानचित्र में तत्व जोड़ना:

• index.html की सामग्री को निम्नलिखित कोड से बदलें:

    
WebGIS Sederhana Menggunakan MapTiler
    

    

स्पष्टीकरण:

• : पृष्ठ शीर्षक प्रदर्शित करता है।

• : वह स्थान जहां मानचित्र प्रदर्शित किया जाएगा।
• मैपलिब्रे जीएल: मैपटाइलर से मानचित्र प्रदर्शित करने के लिए उपयोग किया जाता है।



चरण 3: सीएसएस के साथ शैलियाँ जोड़ना

1. मानचित्र दृश्य के लिए सीएसएस जोड़ना:

• style.css फ़ाइल खोलें।
• style.css फ़ाइल की सामग्री को निम्नलिखित कोड से बदलें:

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

#map {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

स्पष्टीकरण:

• बॉडी, एचटीएमएल: मार्जिन और पैडिंग सेट करें ताकि नक्शा पूरी स्क्रीन का उपयोग कर सके।
• #map: मानचित्र का आकार पूरी चौड़ाई और 500px ऊंचाई पर सेट करता है।
• h1: शीर्षक प्रदर्शन को पृष्ठ के मध्य में सेट करता है।



नोट: इस स्टाइल सेक्शन को यहां W3 स्कूल्स के स्टाइल कोड को देखकर आपके अपने डिजाइन और जरूरतों के अनुसार समायोजित किया जा सकता है

चरण 4: मैपटाइलर को जावास्क्रिप्ट के साथ एकीकृत करना

1. MapTiler से एपीआई कुंजी प्राप्त करना

• मैपटाइलर खोलें।
• ऊपरी दाएं कोने में "साइन अप" पर क्लिक करें।
• पंजीकरण फॉर्म ईमेल से भरें या Google खाते का उपयोग करके पंजीकरण करें।
• पंजीकरण के बाद, हमें मैपटाइलर डैशबोर्ड पर ले जाया जाएगा।



2. एपीआई कुंजी प्राप्त करना:

• मैपटाइलर डैशबोर्ड में, "एपीआई कुंजी" टैब पर क्लिक करें।
• आपको मैपटाइलर द्वारा प्रदान की गई डिफ़ॉल्ट एपीआई कुंजी दिखाई देगी।
• यदि आप एक नई एपीआई कुंजी बनाना चाहते हैं, तो "एक नई कुंजी बनाएं" बटन पर क्लिक करें।
• नई एपीआई कुंजी को एक नाम दें, उदाहरण के लिए "वेबजीआईएस-सिंपल", और "बनाएं" पर क्लिक करें।
• हमारे द्वारा अभी बनाई गई एपीआई कुंजी की प्रतिलिपि बनाएँ। इस एपीआई कुंजी का उपयोग हमारे प्रोजेक्ट में मानचित्र तक पहुंचने के लिए किया जाएगा।

3. एक इंटरैक्टिव मानचित्र बनाना:

• script.js फ़ाइल खोलें।
• निम्नलिखित कोड को स्क्रिप्ट.जेएस में जोड़ें:

const map = new maplibregl.Map({
  container: 'map', // ID dari elemen div tempat peta akan dirender
  style: 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_MAPTILER_API_KEY', // URL ke gaya peta dari MapTiler dan bagian API KEY masukan API KEY anda
  center: [106.8272, -6.1751], // Koordinat pusat peta (Jakarta)
  zoom: 10 // Level zoom peta
});

स्पष्टीकरण:

• container: Index.html में आईडी मैप वाले तत्व को संदर्भित करता है।
• शैली: मैपटाइलर से मानचित्र शैली का यूआरएल। Your_MAPTILER_API_KEY को अपनी API कुंजी से बदलें।
• केंद्र: मानचित्र केंद्र (जकार्ता) के भौगोलिक निर्देशांक।
• ज़ूम: मानचित्र का प्रारंभिक ज़ूम स्तर।



4. मानचित्र में मार्कर जोड़ना (वैकल्पिक):

• यदि आप मानचित्र में एक मार्कर जोड़ना चाहते हैं, तो मानचित्र आरंभीकरण के अंतर्गत निम्नलिखित कोड जोड़ें।
• मार्कर निर्दिष्ट निर्देशांक पर प्रदर्शित किया जाएगा।

const marker = new maplibregl.Marker()
  .setLngLat([106.8272, -6.1751]) // Koordinat Jakarta
  .addTo(map);



चरण 5: प्रोजेक्ट चलाना और परीक्षण करना

1. चल रहा प्रोजेक्ट:

• एक बार जब हम कोड लिखना समाप्त कर लें, तो रिप्लिट में "रन" बटन पर क्लिक करें। रिप्लिट एक वेब पेज खोलेगा जिसमें हमारे द्वारा बनाया गया नक्शा होगा। परिणामों का अवलोकन:



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



हमारे द्वारा बनाए गए रिप्लिट के परिणाम यहां दिए गए हैं:

हमने यह सरल वेबजीआईएस परियोजना पूरी कर ली है और आप परिणाम निम्नलिखित लिंक सरल वेबजीआईएस स्रोत में देख सकते हैं।

यह प्रोजेक्ट दिखाता है कि एक सरल वेबजीआईएस एप्लिकेशन बनाने के लिए HTML, CSS, JavaScript और MapTiler API का उपयोग कैसे करें। आप इसे स्वयं आज़मा सकते हैं या इसे अधिक जटिल परियोजना के आधार के रूप में उपयोग कर सकते हैं।

इन चरणों का पालन करके, हमने रिप्लिट और मैपटाइलर का उपयोग करके सफलतापूर्वक एक सरल वेबजीआईएस एप्लिकेशन बनाया है। यह मार्गदर्शिका शुरुआती लोगों के लिए डिज़ाइन की गई है ताकि वे इंटरैक्टिव मानचित्र बनाना सीखते समय HTML, CSS और JavaScript के साथ वेब विकास की मूल बातें समझ सकें।

प्रोत्साहन और धन्यवाद, उम्मीद है कि यह उपयोगी होगा!