<commit_before><template>
  <div class="map-flyto-container">
    <div class="map-flyto-header">
      <div class="site_header_image">
        <a :href="homeUrl">
          <img
            :alt="siteName"
            :src="logoUrl">
        </a>
      </div>
      <div class="map-flyto-header-btns">
        <button
          class="btn-reload-tour-virtual"
          @click="reloadTour">
          <i class="fas icon fa-redo-alt"/>{{ buttonReload }}
        </button>
        <button
          class="btn-back-tour-virtual"
          @click="backInvestments">
          {{buttonExit}}<i class="fas icon fa-sign-out-alt"/>
        </button>
      </div>
    </div>
    <template>
      <MglMap
        :accessToken="accessToken"
        :mapStyle.sync="mapStyle"
        :scrollZoom="scrollZoom"
        v-if="loadData"
        @load="onMapLoaded">
        <MglMarker
          :coordinates="coordinatesMarker">
          <img
            slot="marker"
            src="/packs/media/images/marker-icon-2273e3d8.png"
          />
        </MglMarker>
      </MglMap>
      <div class="container-card">
        <div
          @click.stop.prevent="navTo(item)"
          class="container-card-element">
          <div class="investments-home-main--photo">
            <img
              v-if="photoCard"
              :src="photoCard"
            />
          </div>
          <div class="investments-home-main--data">
            <a href
              @click.stop.prevent="navTo(item)"
              class="investments-home-main--link">{{ titleCard }}
            </a>
          </div>
        </div>
      </div>
      <div class="container-counter-elements">
        <div class="container-counter-elements-circle">
          <span class="counter-elements-text">
            {{ activeCardId }}
          </span>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import Mapbox from "mapbox-gl";
import {
  MglMap,
  MglMarker
} from "vue-mapbox";
import Wkt from "wicket";
import axios from "axios";
import { CommonsMixin, baseUrl } from "./../mixins/common.js";

export default {
  name: "MapTour",
  mixins: [CommonsMixin],
  components: {
    MglMap,
    MglMarker
  },
  data() {
    return {
      url: "https://api.tiles.mapbox.com/styles/v1/{username}/{style_id}/tiles/{tilesize}/{z}/{x}/{y}?access_token={token}",
      mapStyle: "mapbox://styles/gobierto/ck18y48jg11ip1cqeu3b9wpar", // your map style
      username: "gobierto",
      style_id: "ck18y48jg11ip1cqeu3b9wpar",
      tilesize: "256",
      accessToken: "<KEY>",
      buttonExit: I18n.t("gobierto_investments.projects.exit"),
      buttonReload: I18n.t("gobierto_investments.projects.see"),
      scrollZoom: false,
      geojsons: [],
      zoomDefault: 15,
      mapbox: null,
      activeCardId: 0,
      titleCard: null,
      photoCard: null,
      projectId: null,
      item: null,
      coordinatesMarker: [-4.0654947, 40.199867],
      homeUrl: this.$root.$data.homeUrl,
      logoUrl: this.$root.$data.logoUrl,
      siteName: this.$root.$data.siteName,
      loadData: false
    };
  },
  computed: {
    center() {
      return this.geojsons.length !== 0 ? Object.values(this.geojsons).reverse() : this.coordinatesMarker;
    },
  },
  created() {
    this.mapbox = Mapbox;

    this.labelSummary = I18n.t("gobierto_investments.projects.summary");

    axios.all([axios.get(baseUrl), axios.get(`${baseUrl}/meta?stats=true`)]).then(responses => {
      const [{
          data: { data: items = [] }
        },
        {
          data: { data: attributesDictionary = [], meta: filtersFromConfiguration }
        }
      ] = responses;

      this.dictionary = attributesDictionary;
      this.items = this.setData(items);

      this.subsetItems = this.items;

      this.setGeoJSONs(this.items);
      this.loadData = true
    })

  },
  methods: {
    onMapLoaded(event) {
      this.map = event.map;
      this.cardsOnScreen(this.activeCardId)
    },
    convertWKTtoGeoJSON(wktString) {
      const wkt = new Wkt.Wkt();
      wkt.read(wktString);
      return wkt.toJson();
    },
    setGeoJSONs(items) {
      this.geojsons = [];

      // get the Well-Known Text (WKT)
      const markerWithLocation = items.reduce((acc, i) => {
        if (i.location && i.location !== null) {
          acc.push(i);
        }
        return acc;
      }, []);<commit_msg>watch data<commit_after><template>
  <div class="map-flyto-container">
    <div class="map-flyto-header">
      <div class="site_header_image">
        <a :href="homeUrl">
          <img
            :alt="siteName"
            :src="logoUrl">
        </a>
      </div>
      <div class="map-flyto-header-btns">
        <button
          class="btn-reload-tour-virtual"
          @click="reloadTour">
          <i class="fas icon fa-redo-alt"/>{{ buttonReload }}
        </button>
        <button
          class="btn-back-tour-virtual"
          @click="backInvestments">
          {{buttonExit}}<i class="fas icon fa-sign-out-alt"/>
        </button>
      </div>
    </div>
    <template>
      <MglMap
        :accessToken="accessToken"
        :mapStyle.sync="mapStyle"
        :scrollZoom="scrollZoom"
        @load="onMapLoaded">
        <MglMarker
          :coordinates="coordinatesMarker"
          >
          <img
            slot="marker"
            src="/packs/media/images/marker-icon-2273e3d8.png"
          />
        </MglMarker>
      </MglMap>
      <div class="container-card">
        <div
          @click.stop.prevent="navTo(item)"
          class="container-card-element">
          <div class="investments-home-main--photo">
            <img
              v-if="photoCard"
              :src="photoCard"
            />
          </div>
          <div class="investments-home-main--data">
            <a href
              @click.stop.prevent="navTo(item)"
              class="investments-home-main--link">{{ titleCard }}
            </a>
          </div>
        </div>
      </div>
      <div class="container-counter-elements">
        <div class="container-counter-elements-circle">
          <span class="counter-elements-text">
            {{ activeCardId }}
          </span>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import Mapbox from "mapbox-gl";
import {
  MglMap,
  MglMarker
} from "vue-mapbox";
import Wkt from "wicket";
import axios from "axios";
import { CommonsMixin, baseUrl } from "./../mixins/common.js";

export default {
  name: "MapTour",
  components: {
    MglMap,
    MglMarker
  },
  mixins: [CommonsMixin],
  data() {
    return {
      url: "https://api.tiles.mapbox.com/styles/v1/{username}/{style_id}/tiles/{tilesize}/{z}/{x}/{y}?access_token={token}",
      mapStyle: "mapbox://styles/gobierto/ck18y48jg11ip1cqeu3b9wpar", // your map style
      username: "gobierto",
      style_id: "ck18y48jg11ip1cqeu3b9wpar",
      tilesize: "256",
      accessToken: "<KEY>",
      buttonExit: I18n.t("gobierto_investments.projects.exit"),
      buttonReload: I18n.t("gobierto_investments.projects.see"),
      scrollZoom: false,
      geojsons: [],
      zoomDefault: 15,
      mapbox: null,
      activeCardId: 0,
      titleCard: null,
      photoCard: null,
      projectId: null,
      item: null,
      coordinatesMarker: [-4.0654947, 40.199867],
      homeUrl: this.$root.$data.homeUrl,
      logoUrl: this.$root.$data.logoUrl,
      siteName: this.$root.$data.siteName,
      loadData: false
    };
  },
  computed: {
    center() {
      return this.geojsons.length !== 0 ? Object.values(this.geojsons).reverse() : this.coordinatesMarker;
    },
  },
  created() {
    this.mapbox = Mapbox;

    this.labelSummary = I18n.t("gobierto_investments.projects.summary");

    axios.all([axios.get(baseUrl), axios.get(`${baseUrl}/meta?stats=true`)]).then(responses => {
      const [{
          data: { data: items = [] }
        },
        {
          data: { data: attributesDictionary = [], meta: filtersFromConfiguration }
        }
      ] = responses;

      this.dictionary = attributesDictionary;
      this.items = this.setData(items);

      this.subsetItems = this.items;

      this.setGeoJSONs(this.items);
      this.loadData = true
    })

  },
  watch: {
    loadData: {
      inmediate: true,
      handler() {
        setTimeout(() => { this.cardsOnScreen(this.activeCardId) }, 1000)
      }
    }
  },
  methods: {
    onMapLoaded(event) {
      this.map = event.map;
    },
    convertWKTtoGeoJSON(wktString) {
      const wkt = new Wkt.Wkt();
      wkt.read(wktString);
      return wkt.toJson();
    },
    setGeoJSONs(items) {
      this.geojsons = [];

      // get the Well-Known Text (WKT)
      const markerWithLocation = items.reduce((acc, i) => {
        if (i.location && i.location !== null) {
          acc.push(i);
        }
        return acc;
      }, []);
{'fraction_non_alphanumeric': 0.15495984617124758, 'fraction_numerical': 0.012668250197941409, 'mean_word_length': 2.041623667010664, 'pattern_counts': {'":': 0, '<': 93, '<?xml version=': 0, '>': 98, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6202313', 'n_tokens_mistral': 2979, 'n_tokens_neox': 2885, 'n_words': 465}