yandex map

package-lock.json

@@ -29,6 +29,7 @@
         "vue-i18n": "^9.6.2",
         "vue-moment": "^4.1.0",
         "vue-router": "^4.2.5",
+        "vue-yandex-maps": "^2.1.4",
         "vuestic-ui": "^1.9.0"
       },
       "devDependencies": {
@@ -6452,7 +6453,7 @@
       "version": "15.7.10",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.10.tgz",
       "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/qs": {
       "version": "6.9.10",
@@ -6470,7 +6471,7 @@
       "version": "18.2.37",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz",
       "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -6481,7 +6482,7 @@
       "version": "0.16.6",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.6.tgz",
       "integrity": "sha512-Vlktnchmkylvc9SnwwwozTv04L/e1NykF5vgoQ0XTmI8DD+wxfjQuHuvHS3p0r2jz2x2ghPs2h1FVeDirIteWA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/semver": {
       "version": "7.5.8",
@@ -7254,6 +7255,27 @@
         }
       }
     },
+    "node_modules/@yandex/ymaps3-types": {
+      "version": "0.0.28",
+      "resolved": "https://registry.npmjs.org/@yandex/ymaps3-types/-/ymaps3-types-0.0.28.tgz",
+      "integrity": "sha512-xPXIDeN5zXWJB29o8yXgaOCLbQpHqqQrn6PaqPhqk4/0SM/pWWBuR9dI6wrM9ZBV7xnIrFIAbdF6hk3tqqs9Pg==",
+      "peerDependencies": {
+        "@types/react": "16-18",
+        "@types/react-dom": "16-18",
+        "@vue/runtime-core": "3"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
+        "@vue/runtime-core": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@yarnpkg/esbuild-plugin-pnp": {
       "version": "3.0.0-rc.15",
       "resolved": "https://registry.npmjs.org/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.15.tgz",
@@ -18122,6 +18144,30 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/vue-yandex-maps": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/vue-yandex-maps/-/vue-yandex-maps-2.1.4.tgz",
+      "integrity": "sha512-W/vJPbBRkSXpGxeDgHBYQmyViq4ct4T4Vih7RM2uhXMJySSHrVMl1yKUDE0qpg2Or4ZD9BiwYOm3HG/JtvcHxg==",
+      "dependencies": {
+        "@yandex/ymaps3-types": ">=0.0.27"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": ">=1",
+        "nuxt": "^2.16 || ^3",
+        "vue": "^2.7 || ^3.3"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "nuxt": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue/node_modules/@vue/shared": {
       "version": "3.3.9",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.9.tgz",

package.json

@@ -42,6 +42,7 @@
     "vue-i18n": "^9.6.2",
     "vue-moment": "^4.1.0",
     "vue-router": "^4.2.5",
+    "vue-yandex-maps": "^2.1.4",
     "vuestic-ui": "^1.9.0"
   },
   "devDependencies": {

src/main.ts

@@ -9,6 +9,7 @@ import vuesticGlobalConfig from "./services/vuestic-ui/global-config";
 import App from "./App.vue";
 import axios from 'axios';
 import { AxiosResponse } from "axios";
+import { createYmaps } from 'vue-yandex-maps';
 
 const HOST = "https://cycle-rider.ru";
 // const HOST = "http://localhost:8000";
@@ -82,6 +83,9 @@ app.use(stores);
 app.use(router);
 app.use(i18n);
 app.use(createVuestic({ config: vuesticGlobalConfig }));
+app.use(createYmaps({
+  apikey: '6f86a7b9-e51a-4708-8ac3-ac1285807fa1',
+}));
 
 app.provide('HOST', HOST);
 if (import.meta.env.VITE_APP_GTM_ENABLED) {

src/pages/workouts/WorkoutItem.vue

@@ -1,14 +1,38 @@
 
 <template>
     <h1 class="page-title">Tренировка</h1>
-    <!-- @vue-ignore -->
+    <yandex-map
+        v-model="map"
+        :settings="{
+            location: {
+            center: mapCenter,
+            zoom: 9,
+            },
+        }"
+        width="100%"
+        height="500px"
+    >
+        <yandex-map-default-scheme-layer/>
+        <yandex-map-default-features-layer/>
+        <yandex-map-feature
+        :settings="{
+            geometry: {
+                type: 'LineString',
+                coordinates: lineCoordinates,
+            },
+            style: {
+                stroke: [{ color: '#007afce6', width: 4 }],
+            },
+        }"
+    />
+    </yandex-map>
     <LineWithLineChart id="my-chart-id" :options="chartOptions"  :data="data" />
 </template>
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
 import 'chartjs-adapter-moment';
 import { AxiosResponse, AxiosInstance } from "axios";
-import { ref, inject } from 'vue'
+import { ref, inject, shallowRef } from 'vue'
 import { useToast } from "vuestic-ui/web-components";
 import zoomPlugin from 'chartjs-plugin-zoom';
 import { 
@@ -24,7 +48,13 @@ import {
     TimeScale
 } from 'chart.js'
 import LineWithLineChart from './components/LineWithLineChart.js'
+import type { YMap } from '@yandex/ymaps3-types';
+import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapFeature, YandexMapDefaultFeaturesLayer } from 'vue-yandex-maps';
 
+//Можно использовать для различных преобразований
+const map = shallowRef<null | YMap>(null);
+let mapCenter = ref<Array<number>>([37.617644, 55.755819]);
+let lineCoordinates = ref<Array<Array<number>>>([]);
 ChartJS.register(
     Title, 
     Tooltip, 
@@ -52,7 +82,28 @@ type ChartData = {
     "labels":Array<string> ,
     "datasets":Array<ChartDataset> ,
 }
-
+type Attachment = {
+  url: string;
+}
+type WorkoutItem = {
+  id: string;
+  name: string;
+  created_by: string;
+  created_at: string;
+  updated_at: string;
+  description: string;
+  cadence: number;
+  heart_rate: number;
+  temperature: number;
+  speed: number;
+  power: number;
+  duraion_sec: number;
+  distantion: number;
+  attachment: Attachment;
+  latitude: number;
+  longitude: number;
+};
+let workoutItem = ref<WorkoutItem>();
 const data = ref<ChartData>({
     labels: [],
     datasets: [],
@@ -98,16 +149,26 @@ const initWorkout = (id: string) => {
     axiosAuth
     .get(`/api/v0/workouts/${id}`)
     .then((response: AxiosResponse) => {
+        workoutItem.value = response.data.workout;
+        let latitude = [];
+        let longitude = [];
         let times = [];
         let speed = [];
         let heart_rate = [];
         let power = [];
         for (let i in response.data.results) {
+            response.data.results[i].lang;
+            response.data.results[i].lang;
             times.push(response.data.results[i].time);
             speed.push(msToKmh(response.data.results[i].speed));
             power.push(response.data.results[i].power);
             heart_rate.push(response.data.results[i].heart_rate);
+            latitude.push(response.data.results[i].latitude);
+            longitude.push(response.data.results[i].longitude);
+            lineCoordinates.value.push([response.data.results[i].longitude, response.data.results[i].latitude]);
         }
+        console.log(lineCoordinates);
+        mapCenter.value = [longitude[0], latitude[0]];
         data.value = {
             labels: times,
             datasets: [
@@ -130,4 +191,14 @@ initWorkout(route.params.id as string);
 </script>
   
     
-  
+  
+<style>
+.image-container {
+    cursor: pointer;
+    height: 300px;
+    width: 100%;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+</style>

yarn.lock

@@ -2757,7 +2757,7 @@
   resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^16.9.0 || ^17.0.0 || ^18.0.0", "@types/react@>=16":
+"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^16.9.0 || ^17.0.0 || ^18.0.0", "@types/react@>=16", "@types/react@16-18":
   version "18.2.37"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz"
   integrity sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==
@@ -3196,7 +3196,7 @@
   dependencies:
     "@vue/shared" "3.3.9"
 
-"@vue/runtime-core@3.3.9":
+"@vue/runtime-core@3", "@vue/runtime-core@3.3.9":
   version "3.3.9"
   resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.9.tgz"
   integrity sha512-xxaG9KvPm3GTRuM4ZyU8Tc+pMVzcu6eeoSRQJ9IE7NmCcClW6z4B3Ij6L4EDl80sxe/arTtQ6YmgiO4UZqRc+w==
@@ -3258,6 +3258,11 @@
   dependencies:
     vue-demi ">=0.14.6"
 
+"@yandex/ymaps3-types@>=0.0.27":
+  version "0.0.28"
+  resolved "https://registry.npmjs.org/@yandex/ymaps3-types/-/ymaps3-types-0.0.28.tgz"
+  integrity sha512-xPXIDeN5zXWJB29o8yXgaOCLbQpHqqQrn6PaqPhqk4/0SM/pWWBuR9dI6wrM9ZBV7xnIrFIAbdF6hk3tqqs9Pg==
+
 "@yarnpkg/esbuild-plugin-pnp@^3.0.0-rc.10":
   version "3.0.0-rc.15"
   resolved "https://registry.npmjs.org/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.15.tgz"
@@ -9258,7 +9263,14 @@ vue-tsc@^1.8.22:
     "@vue/language-core" "1.8.27"
     semver "^7.5.4"
 
-"vue@^2.6.14 || ^3.3.0", vue@^3.0.0, "vue@^3.0.0-0 || ^2.6.0", "vue@^3.0.0-0 || ^2.7.0", vue@^3.0.4, vue@^3.2.0, vue@^3.2.25, "vue@>= 3.2.0 < 4.0.0", vue@>=1.x.x, vue@>=2, vue@3.3.9:
+vue-yandex-maps@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.npmjs.org/vue-yandex-maps/-/vue-yandex-maps-2.1.4.tgz"
+  integrity sha512-W/vJPbBRkSXpGxeDgHBYQmyViq4ct4T4Vih7RM2uhXMJySSHrVMl1yKUDE0qpg2Or4ZD9BiwYOm3HG/JtvcHxg==
+  dependencies:
+    "@yandex/ymaps3-types" ">=0.0.27"
+
+"vue@^2.6.14 || ^3.3.0", "vue@^2.7 || ^3.3", vue@^3.0.0, "vue@^3.0.0-0 || ^2.6.0", "vue@^3.0.0-0 || ^2.7.0", vue@^3.0.4, vue@^3.2.0, vue@^3.2.25, "vue@>= 3.2.0 < 4.0.0", vue@>=1.x.x, vue@>=2, vue@3.3.9:
   version "3.3.9"
   resolved "https://registry.npmjs.org/vue/-/vue-3.3.9.tgz"
   integrity sha512-sy5sLCTR8m6tvUk1/ijri3Yqzgpdsmxgj6n6yl7GXXCXqVbmW2RCXe9atE4cEI6Iv7L89v5f35fZRRr5dChP9w==