GeoHealth Web Application: Analyzing Health Accessibility in Kathmandu Valley with Interactive Maps

Here is a detailed summary of the steps and processes we followed to successfully complete this project. In this, we have included all relevant information regarding the technical tools, datasets, and the Django framework and libraries utilized in this project.

Below is an outline of the methodology we followed, the framework we developed, the tools we employed, and the datasets that contributed to shaping the final product.

Data Collection

The initial stage of the project focused on collecting vital data, which included geographic information regarding healthcare facilities and pertinent demographic details within the Kathmandu Valley. The hospital dataset was sourced from OpenStreetMap, while the shapefile for Kathmandu Valley was derived from a clipped version of the overall Nepal shapefile. This information was then organized into a structured CSV file, which was later converted into GeoJSON format to facilitate seamless integration with the mapping interface.

Setting Up the Django Framework

Here are the essential steps we followed to create the Django environment for this project. The image below illustrates the process needed to initiate our project.

Below are the basic steps to follow to create Django environment.

1.???? Install Django: Run?pip install Django.

2.???? Start a Django Project: Execute?django-admin startproject project_name?and navigate to the project directory with?cd project_name.

3.???? Create an App: Run?python manage.py startapp app_name.

4.???? Register the App: Add?app_name?to the?INSTALLED_APPS?list in?settings.py.

5.???? Load Hospital Data: loading hospital data of Kathmandu valley from Geoserver.

6.???? Run the Development Server: Start the server using?python manage.py runserver

GeoServer Integration in the GeoHealth Application

GeoServer plays a critical role in the GeoHealth application by managing and serving spatial data seamlessly. It is used to host and publish geospatial datasets, including the Kathmandu Valley shapefile and hospital location data, as Web Map Services (WMS). These services enable dynamic retrieval and visualization of spatial data in the application.

The GeoServer setup ensures compatibility with GeoDjango and interactive map frameworks like Leaflet.js, allowing smooth integration of overlays. GeoServer’s ability to handle large spatial datasets and provide on-the-fly rendering ensures real-time performance for user queries, such as displaying hospitals within specified radii or buffer zones.

Base Map Integration

The GeoHealth application integrates four base layers for enhanced visualization and user interaction: OpenStreetMap for general navigation, Esri Imagery for high-resolution satellite views, Carto Light for a minimalist and clear map style, and Dark Matter for effective low-light visualization. These layers provide diverse perspectives, catering to different user needs and analytical purposes. Each base layer is seamlessly integrated using Leaflet.js within the GeoDjango framework. Users can switch between layers to explore data in varying contexts. The base maps form the foundation for overlaying health accessibility and spatial analysis data.

Weather API Integration

We integrated a Weather API to provide real-time weather data within the application. When users click on the map, the API retrieves current weather information, including temperature and conditions, for that specific location. This functionality was implemented using Axios to make API calls to the WeatherAPI service, with the weather details displayed in an interactive popup. For reference, the website used for this integration is WeatherAPI.com.

Custom Popup Interface

The GeoHealth web application features a custom popup interface to enhance interactivity and user experience. When users click on hospital markers, dynamic popups display detailed information such as the hospital's name and type also popup weather data ?from the user. The popups are designed with a clean and intuitive layout, using HTML and CSS for customization. They integrate seamlessly with Leaflet.js to provide responsive and visually appealing interactions. This feature allows users to access essential details directly from the map, streamlining the exploration of healthcare facilities.

Frontend Section

The frontend of the GeoHealth Web Application is designed to offer an interactive and user-friendly interface. Built using HTML, CSS, and JavaScript, the frontend integrates seamless mapping functionalities. It utilizes the Leaflet.js library for interactive maps, enabling users to search for hospitals, visualize buffer zones, and view real-time weather information. The layout is responsive, ensuring accessibility across different screen sizes. Bootstrap is used for creating a flexible design, enhancing the overall user experience while providing detailed healthcare accessibility insights.

Demonstration of Our GeoHealth application

Here is a short demonstration of our project. The platform combines dynamic map layers, a weather API, and a hospital locator around a given radius to provide comprehensive geospatial insights.

By sharing this project, We hope to inspire others to create meaningful geospatial applications that address real-world problems, leveraging the power of APIs and interactive map visualizations.

Stay tuned for future updates and more geospatial projects that aim to make a difference.