Home › Roadmap › GIS Fundamentals › Part 10

Web Mapping Leaflet Folium

📘 ইন্টারঅ্যাক্টিভ ওয়েব মানচিত্র।

🌐 Interactive web maps.

🗺️ জিআইএস মৌলিক🎚 Advanced📍 Part 10 / 12🧩 3 সাব-টপিক

🗺️

ধারণা · Concept

কী এবং কেন

📘 বাংলা ব্যাখ্যা:
ইন্টারঅ্যাক্টিভ ওয়েব মানচিত্র।

🌐 English:
Interactive web maps.

🗂 কোথায় পড়ে

৫. জিওএআই → জিআইএস মৌলিক → Web Mapping Leaflet Folium

🎯 এই শাখার লক্ষ্য

Handle CRS, vector/raster data, spatial SQL and web maps

🧰 টুলস

QGIS, GeoPandas, PostGIS, Leaflet

🪜

ধাপে ধাপে শিখুন · Step-by-step

কেন শিখবেন → কীভাবে শিখবেন → উদাহরণ → সাধারণ ভুল

💡 কেন গুরুত্বপূর্ণ?

বিশ্লেষণ ওয়েবে সবার কাছে—ইন্টারঅ্যাক্টিভ মানচিত্র।

ধাপ 1
Leaflet (JavaScript): L.map, টাইল লেয়ার (OpenStreetMap), মার্কার, পপআপ
ধাপ 2
GeoJSON লেয়ার ও style ফাংশন দিয়ে কোরোপ্লেথ
ধাপ 3
Folium (Python): folium.Map, Choropleth, MarkerCluster → HTML
ধাপ 4
লেয়ার কন্ট্রোল, লেজেন্ড, হিটম্যাপ প্লাগইন

🧪 বাস্তব উদাহরণ

হিটওয়েভ সাইটে ইউনিয়নভিত্তিক ঝুঁকি কোরোপ্লেথ Leaflet দিয়ে—ক্লিকে বিস্তারিত পপআপ।

⚠️ সাধারণ ভুল

হাজার হাজার মার্কার একসাথে—ক্লাস্টারিং ব্যবহার করুন।

🔑 মূল শব্দ (Key terms)

LeafletFoliumtile layerchoroplethpopupmarker cluster

সাব-টপিক ও বিস্তারিত · Sub-topics

টপিক → সাব-টপিক → সাব-সাব টপিক

10.1 Leaflet10.1.1 টাইল লেয়ার10.1.2 মার্কার10.1.3 পপআপ

10.2 Folium10.2.1 পাইথন থেকে Leaflet

10.3 কোরোপ্লেথ মানচিত্র

🎬

ভিডিও · Videos (বাংলা ও English)

ক্লিক করলে সাইটের ভেতরেই ফ্লোটিং প্লেয়ারে চলবে · ভিডিও MySQL-এ সংরক্ষিত

📺 আরও খুঁজুন

🇧🇩 Bangla QGIS tutorial ↗Bangla GIS ↗
🌐 Spatial Thoughts ↗Qiusheng Wu ↗

💻

হাতে-কলমে · Try it (GIS Fundamentals)

এডিট করে Run চাপুন · Ctrl+Enter

import numpy as np, matplotlib.pyplot as plt
# Buffer & point-in-polygon without GIS libs
poly=np.array([[90.3,23.7],[90.5,23.7],[90.5,23.9],[90.3,23.9]])  # Dhaka bbox (lon,lat)
pts=np.random.default_rng(1).uniform([90.2,23.6],[90.6,24.0],(60,2))
inside=(pts[:,0]>=90.3)&(pts[:,0]<=90.5)&(pts[:,1]>=23.7)&(pts[:,1]<=23.9)
print("Points inside polygon:",inside.sum(),"/",len(pts))
plt.fill(*poly.T,alpha=.25); plt.scatter(*pts.T,c=np.where(inside,"#059669","#ef4444"),s=18)
plt.gca().set_aspect(1); plt.title("Point-in-polygon (spatial join idea)"); plt.show()

❓

সেল্ফ-চেক · Self check

1. “টাইল লেয়ার, মার্কার, পপআপ” — এটি কোন সাব-টপিকের বর্ণনা?

2. “পাইথন থেকে Leaflet” — এটি কোন সাব-টপিকের বর্ণনা?

🔗

সংযুক্ত কনসেপ্ট · Connected concepts