🛌🏽 🚆 👨🏽‍🍳 कुछ घंटों में एक वेब अनुप्रयोग के लिए इंटरएक्टिव मानचित्र ♂️ 👨🏿‍✈️ 🧗🏼

पिछले एक लेख में, मैंने संक्षेप में बड़े भू-डेटासेट की कल्पना और विश्लेषण के लिए नए ओपन सोर्स टूल kepler.gl की क्षमताओं के बारे में बात की थी।

Kepler.gl के साथ बनाए गए नक्शे के लिए विकल्प
चित्र 1. kepler.gl का उपयोग करके बनाए गए मानचित्रों के लिए विकल्प (Uber द्वारा)

यह वेब एप्लिकेशन आपको एक सूचनात्मक, और सबसे महत्वपूर्ण, रंगीन इंटरेक्टिव मानचित्र बनाता है जो कुछ ही मिनटों में भू-डेटा के मनमाने सेट पर आधारित है। हालांकि, सवाल उठता है कि इसके साथ आगे क्या करना है? सहकर्मियों, मित्रों या ग्राहकों के साथ परिणाम कैसे साझा करें?

विकल्पों की तुलना करें

Kepler.gl का सभी "मैजिक" क्लाइंट पर होता है, इसलिए एप्लिकेशन आपके परिणामों को दूसरों के साथ साझा करने के केवल 2 तरीके प्रदान करता है:

स्थैतिक छवि के रूप में विज़ुअलाइज़ेशन को सहेजें (मानचित्र के साथ बातचीत करने की क्षमता खोने के दौरान)
बनाई गई कॉन्फ़िगरेशन और डेटा को फ़ाइलों के रूप में निर्यात करें और प्राप्त किए गए डेटा को डाउनलोड करने के निर्देश के साथ सभी इच्छुक पार्टियों को भेज दें।

सौभाग्य से, kepler.gl न केवल एक वेब टूल है, बल्कि एक रिएक्ट घटक भी है, जिसके साथ आप जल्दी से अपने विज़ुअलाइज़ेशन के साथ डेमो साइट बना सकते हैं या उन्हें मौजूदा वेब एप्लिकेशन में एकीकृत कर सकते हैं।

नोट। फ़्लाई पर डेटा को संसाधित करना और एकत्र करना, kepler.gl को अक्सर बहुत सारे संसाधनों की आवश्यकता होती है। इसलिए, आपको मोबाइल के अनुरूप अनुप्रयोगों में इसे एकीकृत करते समय विशेष रूप से सावधान रहना चाहिए।

Kepler.gl के लिए यह उपयोग मामला अनुमति देगा:

विज़ुअलाइज़ेशन देखने की प्रक्रिया को जटिल न करें (बस अपने आवेदन का लिंक भेजें)
एक स्पष्ट रूप में मूल डेटा सेट तक पहुंच न दें (जैसा कि 2 आधार मामले द्वारा आवश्यक है)
विज़ुअलाइज़ेशन के साथ बातचीत करने के लिए उपयोगकर्ता-सुलभ प्रारूप प्रतिबंधित करें (उदाहरण के लिए, फ़िल्टर या डेटा प्रदर्शन विधियों के स्व-ट्यूनिंग पर रोक)
कार्ड (टूलटिप, ज़ूम, स्विच मैप मोड, आदि) के साथ बातचीत करने के लिए सभी वांछित प्रारूप सहेजें।

विचार किए गए विकल्पों में से अंतिम को भू-दृश्य के निर्माता के हिस्से पर अतिरिक्त प्रयासों की आवश्यकता होगी और आप प्रोग्रामिंग के बिना ऐसा करने का प्रबंधन नहीं करेंगे। हालांकि, जैसा कि आप जल्द ही देखेंगे, इसे लागू करना भी मुश्किल नहीं है।

डेमो एप्लिकेशन बनाएं

यह सिद्धांत से अभ्यास की ओर बढ़ने का समय है। आपको अपने कोड में kepler.gl को एकीकृत करने के मूल चरणों से परिचित कराने के लिए, मैंने एक छोटा डेमो एप्लिकेशन बनाया।

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

मास्को में भुगतान पार्किंग के लिए डेमो आवेदन
चित्र 2. डेमो एप्लिकेशन द्वारा प्रदान किए गए दो मानचित्र दृश्य मोड

इस डेमो को बनाने के लिए, मैंने अपने प्रोजेक्ट टेम्पलेट का उपयोग किया। हालाँकि, यदि आप खुद ही kepler.gl से खेलने का निर्णय लेते हैं, लेकिन आपकी अभी भी कोई व्यक्तिगत प्राथमिकता नहीं है, तो मेरा सुझाव है कि आप create-react-app का उपयोग करें, जो आपके भविष्य के एप्लिकेशन की नींव बनाने के लिए आवश्यक समय को काफी कम कर देगा।

प्रोजेक्ट में kepler.gl जोड़ें

Kepler.gl एक रिएक्ट घटक है जो अपने राज्य को संग्रहीत और प्रबंधित करने के लिए Redux का उपयोग करता है। इसे प्रोजेक्ट में जोड़ने के लिए, बस उपयुक्त npm-package स्थापित करें:

npm install --save kepler.gl

इस npm पैकेज में शामिल हैं:

UI घटकों और कारखानों का एक सेट जो उन्हें अपने घटकों के साथ फिर से परिभाषित करने की अनुमति देता है
उपयोग किए गए डेटा को जोड़ने / बदलने और उन्हें प्रदर्शित करने के लिए पूर्वनिर्धारित तरीके
उनके कार्य के लिए आवश्यक Redux Reducer

Kipler.gl के लिए Redux संग्रहण कॉन्फ़िगर करना

मैप बनाने और अपडेट करने की प्रक्रिया में अपने राज्य का प्रबंधन करने के लिए केप्लर.लग Redux का उपयोग करता है। इसलिए, केप्लरग्ल घटक का उपयोग करने से पहले, हमें एप्लिकेशन रिड्यूसर में उपयुक्त रेड्यूसर जोड़ना होगा।

 import { combineReducers } from 'redux'; import keplerGlReducer from 'kepler.gl/reducers'; import appReducer from './appReducer'; const reducers = combineReducers({ keplerGl: mapReducer, app: appReducer, }); export default reducers;

यह याद रखना महत्वपूर्ण है कि डिफ़ॉल्ट रूप से, केप्लरगल घटक उपयोगकर्ता को स्वयं-संपादन, डाउनलोड करने, अपडेट करने और डेटा को फ़िल्टर करने के लिए उपलब्ध सभी विकल्पों के साथ प्रदान करेगा। उपयोगकर्ता को अनुमत क्रियाओं के सेट को सीमित करने के लिए, आपको प्रारंभिक अवस्था के मापदंडों में मैप मोड (पढ़ने या संपादन के लिए) और उपलब्ध मैप नियंत्रण के बारे में जानकारी स्थानांतरित करने की आवश्यकता है:

 const mapReducer = keplerGlReducer .initialState({ uiState: { readOnly: true, mapControls: { visibleLayers: { show: false }, toggle3d: { show: false }, splitMap: { show: true }, mapLegend: { show: true, active: false } } } });

हमें प्रतिक्रिया-हथेली भी स्थापित करने की आवश्यकता होगी, जो कि kepler.gl साइड इफेक्ट्स को नियंत्रित करने के लिए उपयोग करता है और इस npm पैकेज से अपने एप्लिकेशन के Redux रिपॉजिटरी में taskMiddleware को जोड़ने के लिए उपयोग करता है:

 import {createStore, applyMiddleware, compose} from 'redux'; import {taskMiddleware} from 'react-palm'; import reducers from './reducers'; const initialState = { }; const middlewares = [ taskMiddleware ]; const enhancers = [applyMiddleware(...middlewares)]; export default createStore( reducers, initialState, compose(...enhancers) );

नोट। वर्तमान में, उबेर इंजीनियरिंग टीम सक्रिय रूप से kepler.gl के एक नए संस्करण पर काम कर रही है जो प्रतिक्रिया-हथेली पर निर्भर नहीं होगा।

डिफ़ॉल्ट रूप से, kepler.gl अपने राज्य ऑब्जेक्ट को पूरे एप्लिकेशन की स्थिति के शीर्ष स्तर पर स्थित होने की उम्मीद करता है और keplerGl नाम से सुलभ है। यदि Redux रिपॉजिटरी का कॉन्फ़िगरेशन अपेक्षित से भिन्न होता है, तो संबंधित रिएक्ट घटक के सही संचालन के लिए यह getState संपत्ति का उपयोग करके पदानुक्रम में अपने राज्य के स्थान को निर्दिष्ट करने के लिए पर्याप्त है।

केप्लरGl रिएक्ट घटक को एम्बेड करें

बड़ी संख्या में प्रदर्शित तत्वों (लाखों-जियो-पॉइंट तक!) के तेज़ रेंडरिंग के लिए केप्लर.लग डेस्क.लग - डेटा विज़ुअलाइज़ेशन के लिए वेबलॉग फ्रेमवर्क, और मैपबॉक्स - ओपन सोर्स जियो-प्लेटफ़ॉर्म का उपयोग करता है, जो निर्मित नक्शे को अनुकूलित करने के लिए एक सुविधाजनक एपीआई और व्यापक संभावनाएं प्रदान करता है। । इसलिए, केप्लेरगल घटक को पारित आवश्यक मापदंडों में से एक मैपबॉक्स सेवा तक पहुंचने के लिए एपीआई टोकन है।

टोकन प्राप्त करने के लिए, आपको साइट www.mapbox.com पर पंजीकरण करना होगा। मैपबॉक्स कई अलग-अलग टैरिफ योजनाओं का विकल्प प्रदान करता है, लेकिन छोटे अनुप्रयोगों के लिए, प्रति माह 50,000 विचारों के साथ एक मुफ्त संस्करण पर्याप्त होगा।

खाता बनाने के बाद, आपको टोकन अनुभाग पर जाना होगा और सेवा तक पहुंचने के लिए एक सार्वजनिक कुंजी उत्पन्न करनी होगी।

प्राप्त टोकन को उपयुक्त पर्यावरण चर पर सेट करें:

 export MapboxAccessToken=<your_mapBox_token>

अब आप भुगतान किए गए पार्किंग स्थल के बारे में जानकारी प्रदर्शित करने के लिए एक प्रतिक्रिया घटक बनाने के लिए आगे बढ़ सकते हैं। हमारे मामले में, यह केप्लरग्ल घटक पर सिर्फ एक आवरण होगा, जो मापदंडों के अनुसार मानचित्र के आयामों को लेता है:

 import React from 'react'; import KeplerGl from 'kepler.gl'; const mapboxAccessToken = process.env.MapboxAccessToken; const ParkingMap = (props) => ( <KeplerGl id="parking_map" mapboxApiAccessToken={mapboxAccessToken} width={ props.width } height={ props.height } /> ); export default ParkingMap;

ऐप में पार्किंग मैप जोड़ें। इस स्तर पर, पार्किंग जानकारी के बजाय, किसी भी जानकारी के बिना केवल एक नक्शा प्रदर्शित किया जाता है, क्योंकि हमने अभी तक उस डेटा को प्रेषित नहीं किया है जिसके आधार पर हमारे विज़ुअलाइज़ेशन बनाए जाते हैं।

डेटा और मैप कॉन्फ़िगरेशन डाउनलोड करें

नक्शे पर अपना डेटा प्रदर्शित करने के लिए, आपको केप्लर को उस डेटा सेट पर स्थानांतरित करना होगा जिसके आधार पर नक्शा बनाया जाएगा, और अंतिम विज़ुअलाइज़ेशन का वांछित कॉन्फ़िगरेशन। यह दो तरीकों में से एक का उपयोग करके किया जा सकता है - AddDataToMap या updateVisData।

पहली विधि आपको न केवल आवश्यक डेटा सेट डाउनलोड करने और पूरी तरह से सेट करने / केप्लरग्ल घटक के संबंधित उदाहरण के कॉन्फ़िगरेशन को अपडेट करने / अपडेट करने की अनुमति देती है, जिसमें विज़ुअलाइज़ेशन सेटिंग्स (विज़स्टेट) और मैप (मैपस्टेट), साथ ही उपयोग किए गए मैप (स्टाइलसाइल) की शैली भी शामिल है।

AddDataToMap विधि के पैरामीटर के रूप में निम्नलिखित जानकारी युक्त ऑब्जेक्ट को स्वीकार करता है:

विज़ुअलाइज़ेशन के निर्माण के लिए डेटासेट का उपयोग किया
अतिरिक्त कॉन्फ़िगरेशन पैरामीटर (विकल्प)

mapState, mapStyle, visState सहित कॉन्फ़िगरेशन डेटा

 addDataToMap({ datasets: { … } options: { … } config: { mapState { … }, mapStyle { … }, visState: { … } } });

नोट। कॉन्फ़िगरेशन ऑब्जेक्ट से डेटा हमेशा विकल्प ऑब्जेक्ट में पारित सेटिंग्स पर पूर्वता लेता है।

UpdateVisData विधि उपयोग किए गए घटक के कॉन्फ़िगरेशन को पूरी तरह से बदलने के बिना केवल उपयोग किए गए डेटासेट को अपडेट करने की अनुमति देती है। एक पैरामीटर के रूप में, यह, पहली विधि की तरह, एक ऑब्जेक्ट लेता है जिसमें एक नया सेट या डेटा सेट और कुछ मैप डिस्प्ले सेटिंग्स को अपडेट करने के लिए "विकल्प" पैरामीटर के बारे में जानकारी होती है।

मानचित्र आरंभीकरण

इस प्रकार, प्रारंभिक डेटा लोडिंग के लिए, हमें AddDataToMap विधि की आवश्यकता है। बनाए जा रहे डेमो एप्लिकेशन में, मॉस्को में पेड पार्किंग का डेटाबेस तब लोड किया जाता है जब एप्लिकेशन को पहली बार एक अलग अनुरोध द्वारा एक्सेस किया जाता है। परिणामी स्रोत डेटा केप्लर को अपलोड करने के लिए तैयार किया जाना चाहिए। इसके लिए, ज्यादातर मामलों में, पूर्वनिर्धारित प्रोसेसर में से एक जो कि केपलर द्वारा समर्थित डेटा प्रारूप में सीएसवी / जोंस डेटा को पोर्ट करता है, पर्याप्त है।

 export function loadParkingData(mapMode) { return (dispatch) => { dispatch( requestParkingData() ); fetch(demoDataUrl) .then(response => response.text()) .then(source => { dispatch( getParkingData() ); const data = Processors.processCsvData(source); const config = getMapConfig(mapMode); const datasets = [{ info, data }]; dispatch( wrapTo('parking_map', addDataToMap({ datasets, config }) )); }); }; }

मोड के बीच स्विच करें

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

 export function toggleMapMode(mode) { return (dispatch, getState) => { const config = getMapConfig( mode ); const datasets = getDatasets(getState()); dispatch( wrapTo('parking_map', addDataToMap({ datasets, config }) )); dispatch( setMapMode(mode) ); }; }

डेटासेट पैरामीटर की आवश्यकता है, इसलिए, हर बार जब हम मैप व्यू मोड को बदलते हैं, तो हम एप्लिकेशन स्टार्टअप पर लोड किए गए मूल डेटा सेट को फिर से भेज देंगे। कार्ड कॉन्फ़िगरेशन की जानकारी हर बार अपडेट की जाएगी। इस आलेख में मैं इस बात पर ध्यान नहीं दूंगा कि कैसे getMapConfig और getDatasets सहायक विधियों को लागू किया जाता है, जिस स्रोत कोड से आप खुद को GitHub पर परिचित कर सकते हैं।

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

मानचित्र तत्वों को अनुकूलित करें

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

अपने अनुकूलित संस्करण के साथ आधार घटक को बदलने के लिए, यह पर्याप्त है:

डिफ़ॉल्ट घटक कारखाना आयात करें
एक नया घटक परिभाषित करें जो एक कस्टम घटक को लौटाता है
इंजेक्टपॉइंटर्स विधि का उपयोग करके एक नया कारखाना एम्बेड करें

हमारे द्वारा बनाए जाने वाले डेमो एप्लिकेशन में, हम उपयोगकर्ता को देखने के मोड को स्वतंत्र रूप से कॉन्फ़िगर करने, मौजूदा फ़िल्टर करने या नए डेटा को लोड करने का अवसर नहीं देना चाहते हैं।

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

 import React from 'react'; import { injectComponents, ModalContainerFactory, SidePanelFactory, } from 'kepler.gl/components'; // define null factory to don not render any unnecessary components const NullComponent = () => null; const nullComponentFactory = () => NullComponent; const KeplerGl = injectComponents([ [ModalContainerFactory, nullComponentFactory], [SidePanelFactory, nullComponentFactory], ]); export default KeplerGl;

आसानी से, केप्लरग्ल न केवल आपको अनुकूलित घटकों के साथ बुनियादी घटकों को बदलने की अनुमति देता है, बल्कि withState पद्धति का उपयोग करके आप नए घटकों के लिए अतिरिक्त कार्यों और राज्य मापदंडों को जोड़ सकते हैं।

एक साथ कई कार्ड का उपयोग कैसे करें

यदि आप एक ही एप्लिकेशन के भीतर कई अलग-अलग केप्लरेल घटकों का उपयोग करने की योजना बनाते हैं, तो उनमें से प्रत्येक को एक अद्वितीय आईडी के साथ मापदंडों में सेट किया जाना चाहिए, प्रत्येक कार्ड के डेटा और कॉन्फ़िगरेशन को जोड़ने / अपडेट करने के लिए आवश्यक है:

 const wrapToParking = wrapTo(' parking_map'); dispatch( wrapToParking( addDataToMap({ datasets, config }) ));

एक विकल्प Redux से कनेक्ट फ़ंक्शन का उपयोग करना और kepler.gl से फ़ॉरवर्डो फ़ंक्शन का उपयोग करना है। इस मामले में, संबंधित डिस्पैचर फ़ंक्शन के लिए यह संगत कार्ड की आईडी निर्दिष्ट करने के लिए पर्याप्त सरल है:

 import KeplerGl from 'kepler.gl'; import { forwardTo, toggleFullScreen } from 'kepler.gl/actions'; import {connect} from 'react-redux'; const MapContainer = props => ( <div> <button onClick=() => props.keplerGlDispatch(toggleFullScreen())/> <KeplerGl id="foo" /> </div> ) const mapStateToProps = state => state const mapDispatchToProps = (dispatch, props) => ({ dispatch, keplerGlDispatch: forwardTo('foo', dispatch) });

निष्कर्ष

केप्लरगल आपको अपने रिएक्ट-आधारित वेब एप्लिकेशन में रंगीन इंटरेक्टिव मानचित्र जोड़ने की अनुमति देता है। डेस्क.लॉग घटक ढांचे के उपयोग के लिए धन्यवाद, यह आसानी से उन्हें देखने और विश्लेषण करने के लिए एक प्रारूप में लाखों जियो-पॉइंट प्रदर्शित कर सकता है।

कस्टमाइज़ करने की व्यापक संभावनाओं ने न केवल विज़ुअलाइज़ेशन बनाया, बल्कि मैप शैलियों, साथ ही उपयोगकर्ता इंटरैक्शन प्रारूप, जटिल कार्टोग्राफिक विज़ुअलाइज़ेशन और डैशबोर्ड बनाने के लिए केप्लरग्ल को एक बहुत ही आकर्षक उपकरण बनाते हैं।

हालांकि, केवल बुनियादी एपीआई परिदृश्यों तक सीमित है, क्लाइंट पर डेटा प्रोसेसिंग, साथ ही साथ मैपबॉक्स का उपयोग किसी अन्य मानचित्र स्रोत का चयन करने की क्षमता के बिना, उन परियोजनाओं की संख्या को कम करें जिनके लिए इस उपकरण का उपयोग किया जा सकता है।

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

कुछ घंटों में एक वेब अनुप्रयोग के लिए इंटरएक्टिव मानचित्र