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:
# 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 generateIf you have any doubts or need any help, feel free to contact me to manuelmenendezalfonso@gmail.com