Update README.md

README.md

@@ -1,3 +1,4 @@
+
 # Bangladesh International Flight Network
 
 This R project visualizes the international flight routes from Bangladesh using OpenFlights data and shapefiles for geographic context.
@@ -9,6 +10,112 @@ This R project visualizes the international flight routes from Bangladesh using
 - Interactive labeling and customized layout
 - Aesthetic dark-themed output image
 
+
+# How to Build an Interactive Bangladesh Flight Network Map with Embedded Flight Radar
+
+
+### 1️⃣ Set Up Your Environment
+Install R and RStudio (if not already installed).  
+Install required packages using the following command:
+
+```r
+install.packages(c("tidyverse", "sf", "leaflet", "htmltools", 
+                   "htmlwidgets", "viridis", "geosphere"))
+```
+
+### 2️⃣ Prepare Your Data
+- **Download** the shapefile for Bangladesh's administrative boundaries.
+- **Obtain** airport and route data (e.g., from OpenFlights: `airports.dat`, `routes.dat`).
+- **Read** the shapefile using:
+
+```r
+sf::st_read("path/to/shapefile")
+```
+
+- **Load** airports and routes as CSVs:
+
+```r
+read.csv("airports.csv")
+read.csv("routes.csv")
+```
+
+### 3️⃣ Filter and Clean Data
+- **Filter airports** to only include Bangladesh (`Country == "Bangladesh"`).
+- **Select** international routes departing from BD airports to destinations outside BD (no stops).
+- **Join** airport data with routes for coordinates.
+
+### 4️⃣ Create Curved Flight Lines
+- Use `geosphere::gcIntermediate()` to create smooth curved paths:
+
+```r
+geosphere::gcIntermediate(c(lon1, lat1), c(lon2, lat2), n=50, addStartEnd=TRUE)
+```
+
+- Convert paths to spatial lines:
+
+```r
+sf::st_linestring(matrix(c(lon1, lat1, lon2, lat2), ncol=2))
+```
+
+### 5️⃣ Build Your Leaflet Map
+- Initialize **Leaflet** with a preferred base map (e.g., *CartoDB.DarkMatter* or *Esri.WorldImagery*).
+- Add **Bangladesh polygon** shapefile with a semi-transparent fill.
+- Overlay **curved flight paths** with color-coded origins, dashed styles, and interactive popups.
+- Add **airport markers** with hover tooltips.
+
+### 6️⃣ Add Interactivity
+Enhance user interaction with **JavaScript event handlers**:
+
+```js
+htmlwidgets::onRender("
+  function(el,x) { 
+    el.on('mouseover', function() {
+      this.style.stroke = 'blue';
+      this.style.strokeWidth = '2';
+    });
+  }
+")
+```
+
+- Utilize `labelOptions(sticky = TRUE)` to prevent flickering hover labels.
+
+### 7️⃣ Add Title & Legend
+- Add a **bold title** at the top center:
+
+```r
+leaflet::addControl("<h2>Bangladesh International Flight Network</h2>", position = "topcenter")
+```
+
+- Include a **color-coded legend** for BD airports:
+
+```r
+leaflet::addLegend(position="bottomright", colors=colorVector, labels=airportNames)
+```
+
+### 8️⃣ Embed Live Flight Radar Map
+Embed an iframe from a flight radar website:
+
+```html
+<iframe src="https://www.flightradar24.com/" width="350" height="270" style="border:2px solid black; border-radius:10px;"></iframe>
+```
+
+### 9️⃣ Save and Share
+Save your project as a standalone HTML file:
+
+```r
+htmlwidgets::saveWidget(myLeafletMap, "BangladeshFlightNetwork.html")
+```
+
+### 🔟 Tips for Improvement
+- Optimize **hover sensitivity** by adding invisible thicker lines under routes.
+- Utilize **sticky labels** for airport names to enhance usability.
+- Experiment with **colorFactor()** and `dashArray` for customized styles.
+- Try **different Leaflet base maps** for unique presentations.
+- Expand the dataset to explore **other airports or flight sources**.
+
+---
+
+
 ## 📁 Project Structure
 
 ```text
@@ -20,59 +127,4 @@ This R project visualizes the international flight routes from Bangladesh using
 ├── .gitignore          # Files to ignore in Git
 └── LICENSE             # License info
 
-How to Build an Interactive Bangladesh Flight Network Map with Embedded Flight Radar
 
-1. Set Up Your Environment
-Install R and RStudio (if not installed).
-Install needed packages by running:
-
-install.packages(c("tidyverse", "sf", "leaflet", "htmltools", "htmlwidgets", "viridis", "geosphere"))
-
-2. Prepare Your Data
-Download the shapefile for Bangladesh administrative boundaries.
-Download airport and route data (e.g., from OpenFlights: airports.dat, routes.dat).
-Read shapefile with sf::st_read().
-Load airports and routes as CSV using read.csv().
-
-3. Filter and Clean Data
-Filter airports for Bangladesh only (Country == "Bangladesh").
-Select international routes starting from BD airports and going to airports outside BD with no stops.
-Join the airport info to the routes for coordinates.
-
-4. Create Curved Flight Lines
-Use geosphere::gcIntermediate() to create smooth curved paths between the origin and destination airports.
-Convert these to SF spatial lines (st_linestring).
-
-5. Build Your Leaflet Map
-Initialize leaflet with desired base maps (e.g., CartoDB.DarkMatter, Esri.WorldImagery).
-Add the Bangladesh polygon shapefile with a semi-transparent fill.
-Add curved flight lines with color coding by source airport, dashed lines, and pop-up info.
-Add airport points (circles) with hover tooltips using sticky labels.
-Use invisible, thicker lines under flight routes to improve hover sensitivity.
-
-6. Add Interactivity
-Add JavaScript event handlers via htmlwidgets::onRender() to:
-Highlight flight lines on hover with a thicker blue dashed style.
-Show/hide popups smoothly.
-Use sticky labelOptions(sticky = TRUE) on airports to avoid flickering hover popups.
-
-7. Add Title and Legend
-Use leaflet::addControl() to add a bold title at the top center.
-Use leaflet::addLegend() to show color-coded BD airports with full names.
-
-8. Embed Live Flight Radar Map
-Embed an iframe from a flight radar website (like AirNavRadar) in a Leaflet control at the bottom left.
-Resize iframe (e.g., 350x270 px) to fit nicely inside the map.
-Style iframe container with border and rounded corners.
-
-9. Save and Share
-Save your map as a self-contained HTML file using htmlwidgets::saveWidget().
-Open in any browser to explore and share.
-
-10. Tips for Improvement
-Adjust hover sensitivity by adding invisible, thicker lines under routes.
-You can use sticky labels to smooth the airport name hover.
-Customize colors and line styles with colorFactor() and dashArray.
-
-Explore more Leaflet providers for different map styles.
-You can just experiment with other airports or flight data sources.