प्रतिक्रिया अनुप्रयोगों में पत्रक का उपयोग कैसे करें
अधिकांश डेवलपर Google मानचित्र और मैपबॉक्स से परिचित हैं, लेकिन दोनों को उनका उपयोग करने के लिए खातों की आवश्यकता होती है, और शायद क्रेडिट कार्ड विवरण भी दर्ज करने की आवश्यकता होती है। क्या होगा यदि आप एक खुला स्रोत और मुफ्त विकल्प चाहते हैं? यहां है पत्रक थाली के लिए कदम! यह एक हल्का-फुल्का, ओपन-सोर्स मैपिंग लाइब्रेरी है जो उपयोग करता है OpenStreetMap .
इस लेख में, हम देखेंगे कि कैसे उपयोग करें प्रतिक्रिया-पत्रक अपने रिएक्ट ऐप के अंदर कैटलॉग मैप्स को रेंडर करने के लिए। हम कस्टम आइकन के साथ मार्कर दिखाएंगे, और क्लिक करने पर मानचित्र पर एक पॉपअप प्रदर्शित करेंगे। बाद में, हम देखेंगे कि रिमोट बनाम स्थानीय डेटा का उपयोग करके लोड करने के लिए क्या बदलने की आवश्यकता है एसडब्ल्यूआर .
django एक से एक संबंध
प्रतिक्रिया-पत्रक स्थापना
जोड़ने के बाद |_+_| हमारे लिए |_+_| फ़ाइल, हमें अपने मानचित्र को सही ढंग से प्रदर्शित करने के लिए कुछ छोटी चीजें करने की आवश्यकता होगी। कैटलॉग को रेंडर करने के लिए कुछ CSS की आवश्यकता होती है, और आप CSS |_+_| . को शामिल करके ऐसा कर सकते हैं अपने |_+_| में टैग करें, या आप नीचे दी गई फ़ाइल से सीएसएस को सीधे अपने प्रोजेक्ट में कॉपी/पेस्ट कर सकते हैं:
react-leafletहमें |_+_| . की चौड़ाई/ऊंचाई सेट करना भी सुनिश्चित करना होगा कि नक्शा खुद को प्रस्तुत करता है, अन्यथा यह दिखाई नहीं देगा क्योंकि div की ऊंचाई 0px होगी:
package.jsonएक बार यह हो जाने के बाद हम आरंभ करने के लिए तैयार हैं! नीचे दिया गया कोड हमारे रिएक्ट ऐप में लीफलेट मैप रेंडरिंग प्राप्त करने के लिए आवश्यक न्यूनतम राशि दिखाता है। हमने आयात किया है |_+_| से |_+_| (कुछ अन्य पैकेजों के साथ जिनका हम बाद में उपयोग करेंगे), और हम इसे अपने |_+_| . से वापस कर देंगे अवयव।
|_+_| घटक के लिए आवश्यक है कि हम एक |_+_| . सेट करें स्थिति, जो मानचित्र के डिफ़ॉल्ट ज़ूम स्तर के साथ अक्षांश और देशांतर वाली एक सरणी है।
आप यह भी देखेंगे |_+_| |_+_| के अंदर नेस्टेड घटक। हमें OpenStreetMap को एट्रिब्यूशन देना आवश्यक है, अन्यथा, आप स्क्रीन पर एक ग्रे वर्ग देखेंगे:
linkहमारे डेटा के साथ, हम इसके माध्यम से |_+_| . के अंदर मैप कर सकते हैं घटक, एक |_+_| . लौटा रहा है प्रत्येक पार्क स्थानों के लिए घटक। ए |_+_| एक |_+_| . की आवश्यकता है प्रोप, यह बता रहा है कि मानचित्र पर कहां प्रस्तुत करना है। यह |_+_| की एक सरणी है, बहुत कुछ |_+_| . की तरह |_+_| का सहारा।
डेबियन 9 installing स्थापित करने के बाद करने के लिए चीजें
इसके अलावा, मैंने कुछ राज्य स्थापित किए हैं। |_+_| . के अंदर प्रोप, हम |_+_| . सेट करेंगे जब कोई उपयोगकर्ता मार्कर पर क्लिक करता है। इसका उपयोग बाद में मानचित्र पॉपअप में किसी विशिष्ट स्केटपार्क के बारे में उपयोगकर्ता को कुछ जानकारी दिखाने के लिए किया जाएगा:
headमानचित्र पॉपअप प्रदर्शित करना
क्योंकि हम ट्रैक कर रहे हैं कि उपयोगकर्ता ने किस स्केटपार्क पर क्लिक किया है, यदि कोई |_+_| . है हमारे राज्य में, हम एक |_+_| दिखा सकते हैं। |_+_| घटक एक छोटा सफेद बुलबुला दिखाता है जिसे बंद किया जा सकता है, और एक |_+_| की तरह, हमें इसे एक स्थिति देने की आवश्यकता है ताकि यह जान सके कि मानचित्र पर कहां प्रस्तुत करना है। के अंदर |_+_| हम HTML पास करने में सक्षम हैं। इसे सीएसएस का उपयोग करके भी स्टाइल किया जा सकता है, इसलिए बेझिझक रूप बदलें और महसूस करें कि यह ठीक वैसा ही है जैसा आप चाहते हैं।
एक रूण पृष्ठ कैसे खरीदें
एक है |_+_| प्रॉप/इवेंट |_+_| पर, हमें ट्रैक करने की अनुमति देता है जब उपयोगकर्ता पॉपअप बबल को बंद करता है ताकि हम तदनुसार राज्य को अपडेट कर सकें।
कस्टम मार्कर आइकन
कैटलॉग में मार्कर आइकन को कस्टमाइज़ करना आसान है। यह पहले |_+_| का उपयोग करके किया जाता है, जिसे |_+_| . से आयात किया जाता है अपने आप। इसके साथ, हम एक नया आइकन इंस्टेंस बना सकते हैं, छवि के यूआरएल स्थान को उसके आकार के साथ सेट कर सकते हैं।
.leaflet-container|_+_| घटक में एक |_+_| . है प्रॉप जिसे |_+_| . पर सेट किया जा सकता है चर जो हमने बनाया है।
दूरस्थ डेटा प्रदर्शित करना
दूरस्थ डेटा लाने के लिए SWR का उपयोग करके, हम अपने डेटा को API समापन बिंदु से दूरस्थ रूप से लोड कर सकते हैं। यदि आपने पहले कभी एसडब्ल्यूआर के साथ काम नहीं किया है, तो मेरे पास एक रिएक्ट में यह कैसे काम करता है, इस पर लेख/वीडियो . सच्चाई यह है कि एक बार आपके पास डेटा होने के बाद, आप इसे मानचित्र पर कैसे प्रदर्शित करते हैं, यह स्थानीय डेटा से अलग नहीं है। हम कुछ प्रदर्शित करने जा रहे हैं अपराध डेटा यूके पुलिस द्वारा प्रदान किया गया।
मैंने डेटा को केवल सरणी में पहले 100 अपराधों को प्रस्तुत करने के लिए काट दिया है क्योंकि 1000+ मार्करों को प्रस्तुत करते समय, नक्शा क्रॉल में धीमा हो जाता है:
काशी कहां से खरीदें
// मौजूदा आयात + SWR आयात के लिए नया आयात 'swr' से उपयोग करता है; const fetcher = (... args) => लाने (... args)। तब (प्रतिक्रिया => प्रतिक्रिया।json ()); निर्यात डिफ़ॉल्ट फ़ंक्शन ऐप () { const url = 'https://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592&date=2019-10'; कॉन्स्ट {डेटा, त्रुटि} = उपयोग करें (यूआरएल, {फ़ेचर}); const अपराध = डेटा && !त्रुटि ? डेटा.स्लाइस(0, 100): []; वापसी (40kb जेएस का, और इसका उपयोग उद्योग के दिग्गजों द्वारा किया जाता है जैसे GitHub, Pinterest, और Etsy . कई और उदाहरण रिएक्ट-लीफलेट वेबसाइट पर देखा जा सकता है। इस आलेख में दिखाया गया स्रोत कोड है यहां उपलब्ध है .
#react-js #react #javascript #web-Development