Project files

src/pages/Index.vue

@@ -0,0 +1,54 @@
+<template>
+  <q-page class="flex flex-center">
+    <mapbox-map :accessToken="accessToken" mapStyle="light-v10" height="500px">
+      <mapbox-geogeometry-raw :source="myGeoJSON">
+        <mapbox-geogeometry-line />
+      </mapbox-geogeometry-raw>
+    </mapbox-map>
+  </q-page>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import {
+  MapboxMap,
+  MapboxGeogeometryRaw,
+  MapboxGeogeometryLine,
+} from "vue-mapbox-ts";
+
+export default defineComponent({
+  components: {
+    MapboxMap,
+    MapboxGeogeometryRaw,
+    MapboxGeogeometryLine,
+  },
+  setup() {
+    return {
+      accessToken:
+        "pk.eyJ1Ijoicm9ic29ubSIsImEiOiJjbDBtZHg5cmIwNWJ6M2NwYTZ2cGhsOHlnIn0.Ks3J5AWTbFfaBPXq5qoOmA",
+      myGeoJSON: {
+        type: "FeatureCollection",
+        features: [
+          {
+            type: "Feature",
+            properties: {
+              stroke: "#545454",
+              "stroke-width": 9.6,
+              "stroke-opacity": 1,
+            },
+            geometry: {
+              type: "LineString",
+              coordinates: [
+                [40.078125, 56.559482483762245],
+                [25.3125, 31.353636941500987],
+                [-10.546875, 45.089035564831036],
+                [-8.4375, 56.75272287205736],
+              ],
+            },
+          },
+        ],
+      },
+    };
+  },
+});
+</script>