Routing Visualizer using Vue, Vuetify and Leaflet

Description

This is a simple project where you can see how to:

• Use Vue 2, Nuxt.js and Vuetify together to create a map project
• Load a JSON file using the file selector
• Show the JSON contents on a Leaflet map
• Filter the data showed on the map using a v-selector

The data on the JSON tries to represent imaginary routes. On each route you can find stops. Everything starts on an imaginary origin point.

Look inside the static folder to locate the JSON.

Here's how your project would look like:

As you can see you start at an imaginary point of origin after you load the JSON.

You can also filter your data by days and at the same time only see the stops for the routes:

Build Setup

# install dependencies
$ npm run install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

Contact

If you have any doubts or need any help, feel free to contact me to manuelmenendezalfonso@gmail.com