View

MMU Maps

HTML
CSS
Python
JS
Here Maps
JSON

Github repository of this project

MMU Maps is an interactive web-based mapping application designed to assist users in navigating the intricate layout of a university building. Initially developed as a group project at university, I undertook the responsibility of creating the entire application on my own, leveraging my burgeoning web development skills. This project was instrumental in understanding the practical application of combining geographic information systems (GIS) with web technologies to solve real-world problems.

Functionality and Steps:

  1. Floor Plan Analysis:
    • The project commenced with the acquisition of a digital floor plan for a single floor, as additional floors were not available.
    • I developed a Python script to analyze the floor plan image, identify the boundaries of each room, and calculate their coordinates relative to the image. The output was structured as JSON, a format chosen for its compatibility with web technologies and ease of use in JavaScript.
  2. Web Application Development:
    • I created the user interface using HTML and CSS, establishing a clean and navigable layout. The Here Maps API was integrated to render an interactive map that serves as the canvas for the application.
    • JavaScript functions were written to dynamically load the JSON data representing each room. This data included coordinates, links to other rooms, and metadata like room names.
  3. Interactivity:
    • Interactive features include clickable room polygons that reveal detailed information about each room and allow users to select a destination.
    • A custom navigation system was implemented where users can enter a starting point and a destination. The application then calculates and displays the shortest path between these points, visually represented on the map.
    • Additional controls, such as floor selection and search functionality, were added to enhance user experience and accessibility.
  4. Responsive Design:
    • The application is responsive, meaning it adjusts smoothly to different screen sizes and orientations, ensuring usability across various devices.

Challenges and Learning Outcomes:

  • Algorithmic Thinking: Implementing the shortest path calculation required an understanding of graph theory and algorithms, specifically Dijkstra’s algorithm, which was adapted for navigating the complex paths between rooms.
  • GIS Integration: Integrating and customizing the Here Maps API to overlay custom data onto the base map was a complex task that improved my skills in using geographic information systems in web development.
  • Frontend Design: Designing a user-friendly interface that is intuitive and responsive was crucial, as it directly impacts user engagement and satisfaction.
  • Data Handling: The handling of JSON data for dynamic content loading taught me about efficient data structures and the importance of asynchronous programming in web applications.

Conclusion:

MMU Maps represents a significant step in my journey as a web developer, providing practical experience in using a variety of technologies and solving real-world problems through coding. This project not only honed my technical skills but also improved my problem-solving abilities and deepened my understanding of how interactive web applications are designed and developed from the ground up.