Healthcare Accessibility Analysis with Map Functionalities and Geospatial Analysis

App Objectives

The main objective of this web application is to allow users to analyze healthcare accessibility and environmental factors in various regions using interactive maps. The application provides tools to visualize and analyze the proximity of healthcare facilities, the air quality through the AQI (Air Quality Index), and important geographic data such as district boundaries and airports.

• Healthcare Accessibility: Displaying healthcare facilities on a map to assess proximity to areas of interest, helping in the identification of underserved regions.
• Air Quality Monitoring: Real-time AQI data is fetched and displayed on the map to monitor air pollution and its potential impact on health.
• Geospatial Data Layering: Allows the overlay of multiple geographic features, such as districts, airports, and provinces, on the map.
• User Interaction: Interactive map interface with zoom, pan, and layer toggle capabilities for easy exploration of geographic data.

Technology Stack

Frontend:

• HTML5: Provides the fundamental structure of the webpage, including elements such as headings, div containers, and script inclusion.
• CSS: Used to style the webpage, ensuring it is visually appealing and responsive. The styling mainly ensures that the map container (#map) occupies the full viewport height.
• JavaScript: Handles all dynamic functionalities of the map, including initializing the map, adding layers, making API calls, and handling user interaction.
• Leaflet.js: A powerful JavaScript library used for rendering interactive maps. Leaflet is responsible for initializing the map and handling tile layers, geospatial data layers, and markers.
• Axios.js: A promise-based HTTP client that handles API requests. Axios is used to fetch data from external APIs and GeoJSON files.

Backend:

• GeoServer: A server that serves geospatial data through services like WMS (Web Map Service). This is used to fetch the province-level boundaries and render them as a layer on the map.
• Django: A high-level Python web framework that encourages rapid development and clean, pragmatic design. Django handles the backend logic, user authentication, and API requests, connecting the frontend to geospatial data and APIs.

Database:

• GeoJSON Files: Geospatial data is stored in GeoJSON format, which includes datasets for healthcare facilities, student locations, district boundaries, and airports. These files are dynamically loaded and rendered on the map.

APIs:

• OpenWeatherMap API: Provides real-time air quality data (AQI) that is fetched using geographical coordinates (latitude and longitude). The AQI data includes information such as PM2.5, CO, NO2, and O3 levels.
• Custom GeoJSON Files: Used to load and display geospatial data such as healthcare facilities, district boundaries, and airports.

Functionality of Each System Component

Map Initialization and Base Layers:

The map is initialized with Leaflet.js, displaying a default map view centered over Nepal with coordinates [27.7172, 85.3240] and a zoom level of 7.

• Base Layers: The application uses three tile layers:
  • OpenStreetMap: Default map style for general navigation.
  • Satellite View: Satellite imagery of the map area.
  • Terrain View: A terrain-based map style for topographical insights.

Healthcare Facility Layers:

• GeoJSON Data: Healthcare facility data is loaded dynamically from Namrata.geojson, Prajina.geojson, and Asmita.geojson. Each marker is clickable, and when clicked, a popup displays detailed information about the healthcare facility, including its name and services.

Air Quality Index (AQI) Monitoring:

• OpenWeatherMap API: Fetches AQI data for different locations based on latitude and longitude. This data includes pollutant levels like PM2.5, CO, NO2, and O3.
• AQI Markers: The AQI data is displayed as markers on the map, each showing the current air quality for the region. Clicking on an AQI marker opens a popup with detailed pollution statistics.

Geospatial Data Layers:

• District Layer: Displays the boundaries of Nepalese districts, loaded from the nepal-districts-new.geojson file. Each district boundary is represented by orange lines, and clicking on a district shows additional information such as its area and length.
• Airport Layer: Displays airport locations in Nepal, based on data from hotosm_npl_airports_polygons_geojson.geojson. Each airport has its own marker with relevant details in the popup.
• Province Layer (WMS): The application integrates a WMS layer served by GeoServer to display province-level boundaries.

Interactive Layer Control:

The map includes a layer control panel that allows users to toggle between various layers. This includes base layers (OpenStreetMap, Satellite, Terrain) and overlay layers (Districts, AQI, Healthcare Facilities, Airports).

User Documentation (Step-by-Step Guide for Using the App)

Opening the App:

Upon accessing the app in a browser, the map will load automatically, displaying a map of Nepal. The map will include a default base layer and several map overlays.

Navigating the Map:

• Zoom: Use the mouse wheel or the zoom buttons in the map's corner to zoom in or out on the map.
• Pan: Click and drag anywhere on the map to move to different regions.

Changing Base Layers:

In the top-right corner, you can select between three base map views:

• OpenStreetMap: A standard, detailed map view.
• Satellite View: Displays satellite imagery.
• Terrain View: Displays topographic terrain data.

Viewing Healthcare Facilities:

• Healthcare Facility Layers: Three different layers represent healthcare facilities with different icons. These are indicated by colored markers.
• Selecting Layers: Use the layer control on the right to toggle visibility of the healthcare facility layers (Layer 1, 2, and 3).
• Popup Information: Clicking on a healthcare facility marker will open a popup containing details about the facility, such as its name, services, and other relevant information.

Viewing Air Quality Data:

• AQI Markers: The app shows air quality levels for different regions. These markers are displayed in real-time based on AQI data fetched from the OpenWeatherMap API.
• Popup Information: Clicking on any AQI marker will show detailed information about the air quality, including PM2.5, CO, NO2, and O3 levels.

Viewing District and Airport Data:

• District Boundaries: Click on any district boundary to view detailed information, such as its name, area, and length.
• Airport Information: Airports in Nepal are shown as markers on the map. Clicking on an airport marker will display a popup with details about the airport.

Layer Control Panel:

At the top-right corner of the map, there is a layer control panel. From here, users can toggle the visibility of different map layers. This includes:

• Base Layers: OpenStreetMap, Satellite, and Terrain.
• Overlay Layers: Districts, AQI, Healthcare Facilities, Airports, etc.

Interacting with Popups:

Popups provide additional information about specific markers on the map (e.g., healthcare facilities, air quality, districts). Simply click on a marker to open the associated popup.