প্রতিক্রিয়া এবং ম্যাপবক্স ব্যবহার করে ওয়েবে মানচিত্র

ওয়েব অ্যাপ্লিকেশানগুলি মানচিত্র অন্তর্ভুক্ত করার মাধ্যমে ব্যাপকভাবে উপকৃত হয়েছে, ব্যবহারকারীদের মূল্যবান অবস্থান-ভিত্তিক তথ্য প্রদান করে। অচেনা জায়গা নেভিগেট করা থেকে আশেপাশের খাবারের জায়গাগুলি আবিষ্কার করা পর্যন্ত মানচিত্র বিশ্বের সাথে আমাদের মিথস্ক্রিয়াকে রূপান্তরিত করেছে। ফলস্বরূপ, সাম্প্রতিক সময়ে ওয়েবসাইটগুলিতে মানচিত্রের একীকরণ ক্রমবর্ধমান জনপ্রিয় হয়ে উঠেছে। তবুও, কার্যকরী এবং ব্যবহারকারী-বান্ধব উভয় মানচিত্র ডিজাইন করা একটি চ্যালেঞ্জ উপস্থাপন করতে পারে, বিশেষ করে যাদের এই ডোমেনে অভিজ্ঞতা নেই তাদের জন্য। এই নিবন্ধে, আমি আপনার ব্রাউজারের মধ্যে কার্যকর মানচিত্র তৈরি করার জন্য দরকারী টিপস শেয়ার করব।

টেক স্ট্যাক

প্রযুক্তি নিয়ে আলোচনা করা যাক। মানচিত্রের সাথে কাজ করার সময়, আমরা সাধারণত তিনটি স্তর ব্যবহার করি:

• ব্যবহারকারী ইন্টারফেস রেন্ডারিং, যার মধ্যে বোতাম এবং ফর্ম রয়েছে। আমাদের স্ট্যাকে, প্রতিক্রিয়া এই ভূমিকা পালন করে;

• মানচিত্র রেন্ডার করা এবং ব্যবহারকারীর মিথস্ক্রিয়া সক্রিয় করা। আমরা এর জন্য ম্যাপবক্স ব্যবহার করি;

• সার্ভার থেকে ডেটা আনা হচ্ছে, যেমন মার্কার বা বহুভুজ সম্পর্কে তথ্য। ডেটা পুনরুদ্ধার করতে, আমরা ব্রাউজারের অন্তর্নির্মিত আনা বৈশিষ্ট্য ব্যবহার করি।

  
  

মানচিত্রের সাথে কাজ করার সময় আমাদের প্রযুক্তি স্ট্যাকের আরও ভাল বোঝার জন্য প্রতিটি আইটেম পর্যালোচনা করা যাক।

প্রতিক্রিয়া

দ্য প্রতিক্রিয়া লাইব্রেরি আপনাকে পৃষ্ঠা উপাদানগুলির সাথে সুবিধামত এবং দক্ষতার সাথে কাজ করতে সক্ষম করে। এটি Facebook দ্বারা তাদের নিজস্ব ব্যবহারের জন্য তৈরি করা হয়েছে এবং এতে অসংখ্য উপাদান যেমন বোতাম, ফর্ম এবং পৃষ্ঠাগুলিতে অন্যান্য ইন্টারেক্টিভ উপাদান অন্তর্ভুক্ত রয়েছে। উদাহরণস্বরূপ, ফেসবুক একটি তৈরি করেছে পুনর্মিলন অ্যালগরিদম দ্রুত বিভিন্ন রাজ্যের তুলনা করতে।

যেহেতু একটি পৃষ্ঠায় উপাদান পরিবর্তন করা একটি ব্রাউজারের জন্য সবচেয়ে ব্যয়বহুল অপারেশন, এটি যতটা সম্ভব দক্ষতার সাথে করা অপরিহার্য। এই সমস্যাটির সমাধান করার জন্য, Facebook প্রকৌশলীরা প্রতিক্রিয়া লাইব্রেরি তৈরি করেছেন, যা একটি পৃষ্ঠায় দ্রুত এবং সহজবোধ্য উপাদান পরিবর্তন করতে সক্ষম করে। একটি পৃষ্ঠায় দ্রুত অবস্থার পরিবর্তনগুলি প্রদান করার পাশাপাশি, প্রতিক্রিয়া আমাদের সরাসরি DOM উপাদানগুলির সাথে কাজ না করে ঘোষণামূলকভাবে এটি করতে দেয়৷ পরিবর্তে, আমরা সাধারণত একটি বিমূর্ততা ব্যবহার করি জেএসএক্স , যা HTML এর মত দেখায়। আসুন একটি উদাহরণ বিবেচনা করা যাক:

 // It's our state. Is the user our friend or not? // false by default const [isFriend, setIsFriend] = useState(false) // Depending on the state, we show the text on the button const buttonText = isFriend ? 'Your my Friend' : 'Add as Friend' // There is JSX, syntax for UI // In this case, we display a button, when clicked, we change the state return ( <button onClick={() => setIsFriend(true)}>{buttonText}</button> )

অনুক্রমের নীচে ফর্ম, বোতাম এবং ইনপুটগুলির মতো সাধারণ DOM উপাদানগুলির সাথে উপাদানগুলি নেস্ট করা সম্ভব। এই সাধারণ উপাদানগুলিকে একত্রিত করে, আমরা আরও জটিলগুলি তৈরি করতে পারি, যেমন একটি সম্পূর্ণ ফর্ম:

 const Form = () => ( <form> <input name="Email"/> <input name="Password"/> </form> ) const App = () => ( <main> <h1>My form!</h1> <Form /> </main> )

মানচিত্র প্রসঙ্গে কীভাবে প্রতিক্রিয়া আমাদের সহায়তা করে? পৃষ্ঠার মানচিত্রটি একটি বোতাম বা ফর্মের মতো ইন্টারেক্টিভ হওয়ায়, আমরা মানচিত্রে ক্লিকের মতো ইভেন্টগুলির মাধ্যমে এর রেন্ডারিং এবং মিথস্ক্রিয়াকে অপ্টিমাইজ করার লক্ষ্য রাখি। প্রতিক্রিয়া এই অপ্টিমাইজেশান অর্জন করতে সাহায্য করতে পারে। এটি কিভাবে কাজ করে তার একটি উদাহরণ এখানে দেওয়া হল:

 // Use React to render the map with different event handlers // and render markers return ( <BaseMap onInitMap={() => console.log('I am alive!')} onClickMap={() => console.log('Click!')} onDestroyMap={() => console.log('Oh no!')} > <ClustersMarkers /> <PostsMarkers /> <ListingsMarkers /> </BaseMap> )

প্রতিক্রিয়ার সাথে কাজ করার সময়, এটি মনে রাখা অপরিহার্য যে এটি পৃষ্ঠার উপাদানগুলির দক্ষ হেরফের, দ্রুত পরিবর্তন এবং ইভেন্টগুলির মাধ্যমে তাদের সাথে মিথস্ক্রিয়া করার অনুমতি দেয়। এটি একটি বিমূর্ততার মাধ্যমে অর্জন করা হয় যা HTML এর সাথে সাদৃশ্যপূর্ণ, যা সহজ থেকে জটিল উপাদান তৈরি করা সহজ করে তোলে।

ম্যাপবক্স

এখন, মানচিত্র নিজেই আলোচনা করা যাক. মানচিত্র তৈরি করা এবং ব্যবহার করা চ্যালেঞ্জিং হতে পারে, এবং শুধুমাত্র কয়েকটি পণ্য কোম্পানি স্ক্র্যাচ থেকে মানচিত্র ডিজাইন করতে পারে। সাধারণত, বেশিরভাগ লোকেরা একটি ব্যবহারকারী-বান্ধব API সহ প্রাক-তৈরি লাইব্রেরির উপর নির্ভর করে যা চেষ্টা করা হয়েছে এবং পরীক্ষা করা হয়েছে।

Google Maps, Leaflet, Bing Maps, Mapbox, এবং আরও অনেক কিছু সহ অসংখ্য গতিশীল মানচিত্র প্রদানকারী উপলব্ধ। যাইহোক, আমরা ফোকাস করব ম্যাপবক্স এর ব্যাপক বৈশিষ্ট্য এবং ন্যায্য মূল্য নীতির কারণে। উদাহরণস্বরূপ, গুগল ম্যাপ চার্জ $700 প্রতি মাসে 100k মানচিত্র দর্শনের জন্য, যখন Mapbox শুধুমাত্র চার্জ করে $250 . তাছাড়া, Mapbox প্রতি মাসে 50k মানচিত্র দর্শনের জন্য বিনামূল্যে অ্যাক্সেস অফার করে।

Mapbox অফার ম্যাপবক্স স্টুডিও , একটি টুল প্রায়ই মানচিত্রের জন্য ফটোশপের সাথে তুলনা করে। এই টুলের সাহায্যে, ডিজাইনাররা কাস্টম শৈলী তৈরি করতে পারেন, অপ্রয়োজনীয় মানচিত্রের উপাদানগুলি লুকাতে পারেন এবং বাড়ির প্রদর্শনগুলি সরাতে পারেন। এর একটি সুবিধা হল এর দৃশ্যমানতা বাড়ানোর ক্ষমতা আগ্রহের বিষয় . আরেকটি সুবিধা হল কর্পোরেট রঙে মানচিত্রের স্টাইলিং নিয়ে পরীক্ষা করার সুযোগ। যাইহোক, ব্যবহারকারীর অভিজ্ঞতা বিবেচনা করা এবং সবুজ ঘাস এবং নীল জল সহ একটি পরিচিত রঙের প্যালেট বজায় রাখা অপরিহার্য। ম্যাপবক্স স্টুডিওর সর্বোত্তম অংশ হল যে এটি মানচিত্র ডিজাইনের প্রক্রিয়াটিকে সহজ করে তোলে প্রয়োজনীয়তা বিকাশ এবং স্থানান্তর করার প্রয়োজনীয়তা দূর করে, শেষ পর্যন্ত মানচিত্রের সাথে কাজ করার খরচ কমিয়ে দেয়।

উপরন্তু, Mapbox একটি প্রদান করে জিওকোডিং টুল যা ঠিকানাগুলিকে স্থানাঙ্কে রূপান্তর করতে পারে বা তদ্বিপরীত করতে পারে, একটি মানচিত্রে বিন্দু সনাক্ত করার প্রক্রিয়াটিকে সহজতর করে। যাইহোক, টুল এর বিশ্বব্যাপী কভারেজ অপর্যাপ্ত হতে পারে, যা কিছু প্রকল্পের জন্য অসুবিধার দিকে পরিচালিত করে। ম্যাপবক্স থেকে ডেটা সংগ্রহ করে অসংখ্য উৎস , যেমন সরকার, OpenStreetMap এর মত ওপেন ডেটা উদ্যোগ, এবং ব্যক্তিগত কোম্পানিগুলি।

Mapbox বিভিন্ন প্রদান করে ব্যবহারিক উদাহরণ , যদিও ডকুমেন্টেশন কিছু উন্নতি থেকে উপকৃত হতে পারে। উদাহরণস্বরূপ, মার্কার কার্যকারিতা অন্তর্ভুক্ত করার সময়, উদাহরণগুলি ডকুমেন্টেশনের চেয়ে আরও তথ্যপূর্ণ হতে পারে। উপরন্তু, মার্কার ক্লাস্টার, কাস্টম ডেটা লোডিং, স্বাভাবিককরণ, এবং মার্কার অবস্থা পরিবর্তনের মতো একাধিক উপাদান একত্রিত করার সময় চ্যালেঞ্জ দেখা দিতে পারে।

আসুন ম্যাপবক্স মানচিত্র পুনরায় দেখুন. কি করে ম্যাপবক্স API করতে?

• এটি পৃষ্ঠার একটি এইচটিএমএল উপাদানে মানচিত্রটি শুরু করে;

• এটি মানচিত্র তৈরি করে এমন ছবি লোড এবং রেন্ডার করে;

• এটি ইনপুট ডেটা হিসাবে জিওজসন ব্যবহার করে মার্কারগুলির মতো অতিরিক্ত উপাদানগুলি আঁকে;

• এটি ইভেন্টগুলি তৈরি করে, যেমন ক্লিক বা জুম পরিবর্তন, যা পরিচালনা করা যেতে পারে।

  
  

আসুন এই আইটেম প্রতিটি ঘনিষ্ঠভাবে কটাক্ষপাত করা যাক.

ম্যাপবক্স টাইলস ব্যবহার করে মানচিত্র রেন্ডারিংয়ে বিশেষজ্ঞ। টাইলস হল ছোট বর্গাকার ছবি যা বড় মানচিত্র তৈরি করে। একটি টাইলের ডিফল্ট আকার 512x512 পিক্সেল, এবং এটি উভয়ই হতে পারে ভেক্টর বা রাস্টার . ভেক্টর রাস্তা, বিল্ডিং, পয়েন্ট অফ ইন্টারেস্ট (PoI) এবং আরও অনেক কিছু প্রদর্শন করতে টাইলস ব্যবহার করা হয়। এগুলি গতিশীলভাবে স্টাইল করা যেতে পারে, হালকা ওজনের এবং মানচিত্রের সাথে মসৃণ মিথস্ক্রিয়া করার অনুমতি দেয়৷ রাস্টার টাইলস, অন্যদিকে, উপগ্রহ চিত্র প্রদর্শনের জন্য ব্যবহৃত হয়।

শুধু আপনার জানার জন্য, ম্যাপবক্স স্টুডিও আমাদেরকে নির্দিষ্ট ডেটা বেছে নিতে দেয় যা আমরা মানচিত্রের টাইলগুলিতে অন্তর্ভুক্ত করতে চাই। এই টাইলস তারপর একটি উপর স্থাপন করা হয় ক্যানভাস , যা ব্রাউজারে একটি বিশেষ DOM উপাদান যা ওয়েবে ছবি এবং অন্যান্য গ্রাফিকাল উপাদান প্রদর্শন করে। আপনাকে একটি ধারণা দেওয়ার জন্য, এটি Google ডক্সে একটি ক্যানভাসে নথিগুলি কীভাবে প্রদর্শিত হয় তার অনুরূপ৷

 <canvas width="100" height="100" />

ম্যাপবক্স টাইলসের লোডিং, সন্নিবেশ এবং আপডেট পরিচালনা করে। আমাদের যা করতে হবে তা হল আমরা মানচিত্রটি কোথায় প্রদর্শন করতে চাই এবং প্রাথমিক শর্ত যেমন জুম স্তর বা মানচিত্রের স্থানাঙ্কগুলিকে নির্দিষ্ট করতে হবে৷ Mapbox ব্যবহার করার জন্য, আপনার একটি প্রয়োজন হবে অ্যাক্সেস টোকেন , যা একটি অনন্য কী যা আপনার ম্যাপবক্স অ্যাকাউন্টে পাওয়া যাবে। একটি মৌলিক মানচিত্র সেট আপ করতে, এখানে একটি দ্রুত উদাহরণ, কিন্তু আরো তথ্যের জন্য, দেখুন লিঙ্ক প্রদত্ত:

 mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; const map = new mapboxgl.Map({ container: 'map', // we can use an Id or an element style: 'mapbox://styles/mapbox/streets-v11', // URL for styles center: [-74.5, 40], // initial coordinates [lng, lat] zoom: 9, // initial zoom });

এর পরে, আমরা পৃষ্ঠায় 'ম্যাপ' আইডি সহ একটি উপাদানে একটি মানচিত্র পাব।

ব্যবহারকারীদের মানচিত্রে আরও তথ্য প্রদান করতে, আমরা প্রায়শই একটি নির্দিষ্ট স্থাপনার অবস্থান বা একটি নির্দিষ্ট এলাকার সীমানা প্রদর্শন করি। এটি অর্জন করতে, আমরা একটি নির্দিষ্ট ডেটা ফর্ম্যাট ব্যবহার করি যাকে বলা হয় জিওজেসন এবং ম্যাপবক্সকে নির্দেশ দিন কিভাবে এই ডেটা প্রদর্শন করতে হয়।

GeoJSON হল মানচিত্রে ভৌগলিক কাঠামো সংরক্ষণের জন্য আদর্শ বিন্যাস। এটি বিভিন্ন আদিম প্রকার সংরক্ষণ করতে পারে যা ভৌগলিক বস্তু যেমন ঠিকানা, অবস্থান, রাস্তা, মহাসড়ক, সীমানা, দেশ, রাজ্য এবং এগুলোর সংমিশ্রণ বর্ণনা করে, যা মাল্টিপার্ট নামে পরিচিত। GeoJSON 2008 সালে চালু করা হয়েছিল এবং এটি এইভাবে উপস্থাপন করা হয়েছে:

 { "type": "Feature", // also can be FeatureCollection, it's collection of Feature "geometry": { "type": "Point", // also can be LineString, Polygon, MultiPolygon "coordinates": [125.6, 10.1] // for other types you can use Array with coordinates }, "properties": { // it's metadata, we can you that to show something on the map "name": "Dinagat Islands" } }

আসুন ম্যাপবক্সে ব্যবহৃত স্থানাঙ্ক সিস্টেম সম্পর্কে কথা বলি। ডিফল্টরূপে, Mapbox নিয়োগ করে EPSG 3857 , যা টাইলস দিয়ে কাজ করার জন্য পৃথিবীকে সমতল পৃষ্ঠে প্রজেক্ট করার একটি উপায়। এটি ওয়েব মার্কেটর নামে পরিচিত এবং এটি অনলাইন মানচিত্রের জন্য আদর্শ। যাইহোক, চিহ্নিতকারী এবং বহুভুজ সম্পর্কে ডেটা নিয়ে কাজ করার সময়, এটি একটি ভিন্ন সমন্বয় সিস্টেম ব্যবহার করে যাকে বলা হয় EPSG 4326 . এই সিস্টেমটি পৃথিবীর উপবৃত্তাকার স্থানাঙ্ক বর্ণনা করতে অক্ষাংশ এবং দ্রাঘিমাংশের উপর নির্ভর করে। ম্যাপবক্স এবং অন্যান্য মানচিত্র প্রদানকারীরা স্বয়ংক্রিয়ভাবে স্থানাঙ্কগুলিকে EPSG 4326 থেকে EPSG 3857-এ রূপান্তর করে। অনুমান , আমরা map.setProjection পদ্ধতি ব্যবহার করতে পারি।

এখন, আমরা আলোচনা করব কিভাবে মানচিত্রে জিওজেসন প্রদর্শন করা যায়। ম্যাপবক্স দুটি সত্তা অফার করে যা আমরা সহায়ক পাব:

• উৎস — এই তথ্য বীজ. আমরা GeoJSON ডেটা দিয়ে একটি নতুন উত্স তৈরি করতে পারি এবং এটি কনফিগার করতে পারি, উদাহরণস্বরূপ, বৈশিষ্ট্য সংগ্রহের প্রতিটি বৈশিষ্ট্যের জন্য একটি আইডি তৈরি করতে৷

• স্তর — এই তথ্য উপস্থাপনা. আমরা উৎস থেকে তথ্য বিভিন্ন উপায়ে প্রদর্শন করতে পারি, যেমন সীমানা দেখানো।

  
  

মানচিত্রে বহুভুজ বা মার্কার প্রদর্শন করতে, আমাদের অবশ্যই সার্ভার থেকে জিওজসন বিন্যাসে ডেটা পুনরুদ্ধার করতে হবে। তারপরে, আমরা একটি উত্স তৈরি করি, এতে ডেটা ইনপুট করি এবং এটি প্রয়োজনীয় স্তরের সাথে সংযুক্ত করি।

 const geoJsonFeature = { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [-67.13734, 45.13745], [-66.96466, 44.8097], [-68.03252, 44.3252], [-67.13734, 45.13745] ] } } // Create source with our data map.addSource('ourSource', { 'type': 'geojson', 'data': geoJsonFeature }); // Add layer for background map.addLayer({ 'id': 'background', 'type': 'fill', 'source': 'ourSource', // название нашего source 'layout': {}, 'paint': { 'fill-color': '#0080ff', 'fill-opacity': 0.5 } }); // Add layer for border map.addLayer({ 'id': 'border', 'type': 'line', 'source': 'ourSource', 'layout': {}, 'paint': { 'line-color': '#000', 'line-width': 3 } });

এই কোড চালানোর পরে, আমরা ফলাফল পেতে:

এই বিষয় সম্পর্কে আরো জানতে, আপনি উল্লেখ করতে পারেন ডকুমেন্টেশন Mapbox দ্বারা প্রদান করা হয়. এই টিউটোরিয়ালে, আমরা মানচিত্র শুরু করার এবং আমাদের ডেটা উপস্থাপন করার প্রক্রিয়াটি কভার করেছি। এর পরে, আমরা কীভাবে ক্লিক, টেনে আনা এবং জুম করার মতো ইভেন্টগুলি পরিচালনা করব তা অন্বেষণ করব। উদাহরণস্বরূপ, আমরা ম্যাপবক্স ব্যবহার করে ইভেন্টগুলি নিরীক্ষণ করতে পারি এবং কনসোলে স্থানাঙ্কগুলি প্রদর্শন করতে পারি যখন ব্যবহারকারী মানচিত্রে তাদের কার্সার সরে যায়। এটি অর্জনের জন্য, আমরা যেভাবে ইভেন্ট টাইপ চাই তা দিয়ে আমরা on মেথডকে কল করি, যেভাবে আমরা DOM উপাদানগুলির সাথে কাজ করি।

 map.on('mousemove', (e) => { console.log(JSON.stringify(e.point)); }); // Result: {"x":330,"y":49}

সংক্ষেপে, আমাদের কি মনে রাখা দরকার? ম্যাপবক্স আমাদের একটি মানচিত্র প্রদর্শন করতে, এর উপরে আমাদের ডেটা আঁকতে এবং মানচিত্রের ইভেন্টগুলি প্রক্রিয়া করার অনুমতি দেয়। একই সময়ে, ম্যাপবক্স ছবি (টাইলস) লোড এবং প্রদর্শনের যত্ন নেয়।

আনুন

সম্পর্কে একটি শব্দ আনা . আমরা ইতিমধ্যে দেখেছি কিভাবে একটি মানচিত্রে ডেটা রেন্ডার করতে হয়, কিন্তু প্রথমে, আমাদের অবশ্যই সার্ভার থেকে এটি পুনরুদ্ধার করতে হবে। যখন আমরা পৃষ্ঠাটি পুনরায় লোড না করেই পটভূমিতে সার্ভার থেকে গতিশীলভাবে ডেটার অনুরোধ করি, তখন আমরা এই পদ্ধতিটিকে বলি AJAX (" একটি সিঙ্ক্রোনাস J avaScript একটি nd X ML")। সার্ভার থেকে অ্যাসিঙ্ক্রোনাসভাবে ডেটা লোড করার জন্য অনেক টুল রয়েছে, যেমন Axios বা XMLHttpRequest (নেটিভ)।

কি মনে রাখবেন? আমরা সার্ভার থেকে ডেটা পুনরুদ্ধার করি, এবং এর জন্য অনেক লাইব্রেরি আছে, কিন্তু আমরা ফেচ ব্যবহার করব। এর পরে, আমরা মানচিত্রগুলির সাথে কাজ করার সময় বিশেষভাবে কীভাবে এটি করি তা আমরা দেখব, কারণ এর সূক্ষ্মতা রয়েছে।

প্রতিক্রিয়া + ম্যাপবক্স

এখন দেখা যাক কিভাবে উপরে বর্ণিত প্রযুক্তিগুলো একসাথে কাজ করে। প্রথমত, আমরা fetch ব্যবহার করে বহুভুজ প্রদর্শনের জন্য ডেটা পুনরুদ্ধার করব। তারপর আমরা মানচিত্রের প্রারম্ভিকতা ঘোষণা করব, এবং এটি লোড হওয়ার পরে, আমরা মানচিত্রে বহুভুজ যোগ করব।

এছাড়াও আপনি একটি কাজের উদাহরণ খুঁজে পেতে পারেন লিঙ্ক প্রদান করা হয়

 const useFetch = () => { /* Our data { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [-67.13734, 45.13745], [-68.03252, 44.3252], [-68.90478, 47.18479], [-67.13734, 45.13745], ] ] } } */ const [data, setData] = useState(null) useEffect(() => { fetch('https://our-api.com/polygon') .then(response => response.json()) .then(setData) .catch(e => { console.error(e) }) }, [setData]) return { data } } const BaseMap = () => { // Use the hook to fetch data const { data } = useFetch(GET_REGION); // Map instance const map = useRef(null); // DOM element const mapContainer = useRef(null); // Main logic - init the map and add the event useEffect(() => { if (map.current) { return; // initialize map only once } mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; map.current = new mapboxgl.Map({ container: mapContainer.current, style: 'mapbox://styles/mapbox/light-v10', // style URL (it's Mapbox's core style) center: [-68.137343, 45.137451], // starting position zoom: 5 // starting zoom }); // Handle event map.on('load', () => { const sourceId = 'source-region' // Add a data source containing GeoJSON data map.addSource(sourceId, { 'type': 'geojson', 'data': data.region // our data from Apollo }); // Add a new layer to visualize the polygon map.addLayer({ 'id': 'background', 'type': 'fill', 'source': sourceId, // reference the data source 'paint': { 'fill-color': '#0080ff', // blue color fill 'fill-opacity': 0.5 } }); // Add a black outline around the polygon map.addLayer({ 'id': 'outline', 'type': 'line', 'source': sourceId, 'paint': { 'line-color': '#000', 'line-width': 3 } }); }); }); return <div ref={mapContainer} />; } 

উপসংহার

আমরা প্রযুক্তির স্ট্যাকের দিকে তাকিয়েছি যা আমাদের ভবিষ্যত স্থাপত্যকে আন্ডারপিন করে। নিম্নলিখিত নিবন্ধে, আমরা সেই নীতিগুলি নিয়ে আলোচনা করব যা একটি মানচিত্র স্থাপত্য ডিজাইন করতে সাহায্য করে, কীভাবে সর্বাধিক কম কাপলিং এবং মডিউলগুলির উচ্চ সংহতি অর্জন করা যায় এবং কীভাবে একটি মাপযোগ্য মানচিত্র সিস্টেম বজায় রাখা যায় এবং বিকাশ করা যায়।

আপনার মনোযোগের জন্য অনেক ধন্যবাদ! দিন শুভ হোক.