Map-Track

Use the map to place markers. Navigate to the Polyline icon to measure the distance between the markers. The first marker clicked will retrieve the current weather data and display it below the map.

Features to add

• GPX export of markers
• Altitude
• Delete markers reset

Build status

Currently deployed

• Map Track

Screenshots

Tech used

• vue.js
• vue2 leaflet
• vue2 leaflet polyline measure
• Open Weather

Setup

To run this project, fork and git clone to your directory.

• Run yarn
• Yarn serve to run locally

visit Map Track

Helpful links

• https://github.com/tdcook/vue2-leaflet-gpx

• https://vue2-leaflet.netlify.app/examples/feature-showcase.html

• https://vue2-leaflet.netlify.app/plugins/#vue2-leaflet-path-transform

• https://github.com/mikeu/vue2-leaflet-polyline-measure/blob/master/example.vue

• https://travishorn.com/interactive-maps-with-vue-leaflet-5430527353c8

• https://leafletjs.com/reference-0.7.7.html#marker

• https://gis.stackexchange.com/questions/302190/getting-elevation-data-in-leaflet

• https://developer.aliyun.com/mirror/npm/package/vue2-leaflet-polyline-measure

• https://alligator.io/vuejs/global-event-bus/

• https://openweathermap.org/current

• https://medium.com/devmarketer/how-to-add-conditional-statements-to-v-for-loops-in-vue-js-c0b4d17e7dfd

• Leaflet/Leaflet#4686

• https://www.mediawiki.org/wiki/API:Web_APIs_hub

• https://docs.w3cub.com/dom/streams_api/concepts/

• https://www.tutorialsplane.com/vue-js-change-image-src/