Simple WebGIS Dashboard

Building My First WebGIS Project: From QGIS Struggles to Leaflet Maps

This was my very first project diving into the world of GIS (Geographic Information Systems). The journey took me from understanding raw shapefiles in QGIS to building an interactive web map using Leaflet JS. Here is a breakdown of my process, the mistakes I made, and how I solved them.

1. Understanding the Data

I started by downloading the shapefiles for the whole of Bangladesh. Initially, I was confused because the folder contained four specific files ending in BGD1, BGD2, BGD3, and BGD4.

To understand what they meant, I dragged and dropped all of them into the QGIS layer panel. After exploring the attributes, I realized these files represented the administrative hierarchy of Bangladesh:

2. Processing Data in QGIS

For my initial test, I decided to work only with the Khulna District. Since I needed high detail, I selected the BGD4 map (Union level).

Filtering the Data:

1. I opened the Attribute Table to understand the data columns.
2. I identified the key columns: NAME_1 (Division), NAME_2 (District), NAME_3 (Upazila), and NAME_4 (Union).
3. Using the Filter tool, I selected NAME_2 and filtered out "Khulna".

The "Refactor Fields" Mistake:

Once filtered, I exported the layer. This is where I made a critical error. I used the Refactor Fields tool to rename the columns (e.g., changing NAME_1 to Division) and remove unwanted data. However, I accidentally renamed the "Source Expression" as well.

Lesson Learned: In the Refactor Fields tool, you should only change the Field Name (output), not the Source Expression. Changing the source breaks the link to the data, resulting in NULL values.

This mistake caused a lot of pain later. When I connected the file to Leaflet JS, the map loaded, but no data appeared. I had to debug using the browser console to realize my values were empty, forcing me to go back to QGIS and fix the attribute table.

Exporting for the Web:

For WebGIS, coordinate systems are crucial. I exported the final file in GeoJSON format using the EPSG:4326 CRS (Coordinate Reference System), which is the standard for web mapping.

My QGIS Key Takeaways:

• Layer management & Selection
• Attribute Table manipulation & Filtering
• Processing tools (Refactor Fields)
• Importance of EPSG:4326 & GeoJSON

3. The WebGIS Implementation (Leaflet JS)

After exporting the GeoJSON, I set up a basic HTML, CSS, and JS environment.

The UI/UX Problem:

Initially, I loaded the detailed map of the whole country. I noticed two problems:

1. Poor UX: Clicking a region auto-zoomed aggressively, which felt jarring.
2. Performance: Loading the detailed BGD4 file for the entire country made the browser very slow.

The Solution: A Dual-Map Viewer

To fix this, I decided to create two separate map viewers: a static map of the whole country (Left Screen) and a detailed map showing the specific selected district (Right Screen). To optimize performance, I stopped using the heavy BGD4 file for the overview map. Instead, I used the BGD2 (District level) file.

Javascript Configuration:

To improve the user experience, I disabled map interactions (zooming/dragging) to make it feel like a dashboard.

var mapOptions = {
  zoomControl: false,
  dragging: false,
  scrollWheelZoom: false,
  doubleClickZoom: false,
  boxZoom: false
};

How the Logic Works:

Currently, the app works in two stages. Map 1 (Overview) checks if the heavy data is loaded before proceeding. Map 2 (Detail) loops through the data to find matching unions. I placed the Upazila layer on top of the Union layer but set interaction: false. This allows the visual border of the Upazila to be seen, but clicks pass through to the Union layer underneath.

4. Solving the GitHub File Size Limit

When I tried to upload my project to GitHub, I hit a wall. My original GeoJSON files were massive (200MB - 400MB). GitHub does not support files this large, and it is terrible for web performance.

The Fix:

I used a tool called Mapshaper.

1. Uploaded my GeoJSON files.
2. Simplified the polygons by 5-10% (enough to reduce size but keep the shape accurate).
3. Reduced file sizes to manageable chunks (5MB - 20MB).

Conclusion

This wraps up the workflow of my first GIS project! It was a steep learning curve moving from QGIS analysis to JavaScript debugging, but I learned a lot about data optimization and coordinate systems. I am still new to the WebGIS field. If you have any advice, guidelines, or feedback, please feel free to reach out to me!