Ors Map Client screenshot

Ors Map Client

Author Avatar Theme by Giscience
Updated: 8 May 2025
124 Stars

Openrouteservice API web SPA client using VueJS, Vuetify and Vue2Leaflet

Categories

Overview:

The ORS Map ClientTest is a single-page application (SPA) that acts as a map client for the openrouteservice API. It serves as a multifunctional base application that can be customized through configurations and extended using plugins. Developed using VueJS, Vuetify, and custom components, this application follows a feature-by-folder design, enhancing code organization, component coupling, and overall code understanding. The use of single file components and transpiling non-native JavaScript code to native JavaScript during the build process ensures efficient performance and development.

Features:

  • Single Page Application: Implements a map client for the openrouteservice API.
  • Customizable and Extensible: Base application that can be customized through configurations and extended via plugins.
  • VueJS and Vuetify: Utilizes VueJS framework and Vuetify for a responsive user interface.
  • Feature-by-Folder Design: Organizes view, code, and translation elements in folders for easy management.
  • Transpilation Process: Transforms non-native JavaScript code to native JavaScript during the build for optimized performance.
  • VueJS Components: Enhances code organization, component coupling, and code understanding.
  • Supports Customization: Allows customization of filters, themes, and hooks for the map client.

Installation:

  1. Start by cloning the repository to access the code.
  2. Configure the application by copying files from src/config-example to src/config, removing the -example from their names.
  3. Set values in app-config.js for orsApiKey and bitlyApiKey.
  4. Customize the menu, filters, theme, and hooks as needed.
  5. Run the application using Docker, Docker Compose, or natively based on the chosen setup.
    • To run with Docker: Access the app at http://127.0.0.1:8080.
    • To run with Docker Compose: Access the app at http://127.0.0.1:8080.
    • To run natively: Set up the environment and configuration file, ensuring Node version 16 is installed.

Summary:

The ORS Map ClientTest is a versatile application serving as a map client for the openrouteservice API. Built using VueJS, Vuetify, and custom components, it offers a feature-rich experience with customizable and extensible functionalities. Through a well-structured folder design and efficient transpilation process, this application provides a seamless user interface and enhanced code organization. By following the installation guide, users can quickly set up and run the app using Docker, Docker Compose, or natively, catering to different deployment preferences.