<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>
