logo

Travis Burns

InteractiveMap

Fantasy interactive map that displays location data

InteractiveMap

GitHub Repository

Github Link: https://github.com/travisburns/interactiveMap

Technologies Used

HTMLCSSJavaScriptleaflet.jschart.js

Project Details

Using leaflet.js and chart.js, created a interactive fantasy map that allows users to click on a specific map icon on the map that displays that locations information. The key process involved creating a custom API with fantasy location data and integrating it to fetch location data and dynamically render map elements. The project also included a chart.js component that displays the location data in a visually appealing way. Throughout the development process, skills such as API integration, data visualization, and user interface design were enhanced. The project provided valuable experience in creating an interactive map system that engages users and presents information in an interactive and engaging way.

Project Goals

  • - Create an engaging and interactive fantasy map experience:Develop a visually appealing and immersive fantasy map interface that captures the user's attention and encourages exploration. Utilize leaflet.js to provide smooth and responsive map navigation and interaction.
  • - Integrate custom API with fantasy location data: Design and develop a custom API that serves fantasy location data to the application. Implement data fetching mechanisms to retrieve location data from the API and dynamically render map elements based on the retrieved data.
  • - Enhance user experience through data visualization: Incorporate chart.js to display location data in a visually appealing and informative manner. Present location statistics, demographics, and other relevant information using interactive charts and graphs.
  • - Optimize performance and ensure cross-platform compatibility: Utilize webpack to create a production build of the project, optimizing assets and improving loading times. Ensure the interactive map system is responsive and compatible across various devices and browsers.
  • - Deploy the project to a live server: Configure and deploy the project to a live server, making it accessible to users via a web URL. Ensure smooth deployment and seamless functionality in the production environment.
  • - Enhance skills in web development and data visualization: Gain hands-on experience in using technologies such as HTML, CSS, JavaScript, leaflet.js, and chart.js. Improve proficiency in API integration, data visualization, and user interface design.

Key Accomplishments

  • - Developed a custom interactive map system using html, css, javascript, leaflet.js and chart.js
  • - Using webpack, created a production build of the project and deployed it to a live server
  • - Created a custom API with fantasy location data and Integrated to fetch location data and dynamically render map elements

Learnings

  • Learned how to create an interactive map using leaflet.js and chart.js
  • Gained experience in API integration and data visualization
  • JSON Data handling and manipulation
  • Custom API Development
  • Modular Code Design using ES6 classes to encapsulate functionality
  • AJAX Requests, implementing AJAX GET requests to fetch and display data dynamically
  • Debugging Leaflet Icons and Popups
  • Dynamic Data Binding to UI elements with Chart.js
  • Learning to use Webpack for creating optimized production builds of the project