vue-leaflet/Vue2Leaflet

Help me !!! leaflet window is not defined

maneewihok opened this issue · 2 comments

node_modules/leaflet/dist/leaflet-src.js:230:17
node_modules/leaflet/dist/leaflet-src.js:7:65
node_modules/leaflet/dist/leaflet-src.js:10:2
internal/modules/cjs/loader.js:1138:30
Module._compile
internal/modules/cjs/loader.js:1158:10
Module._extensions..js
internal/modules/cjs/loader.js:986:32
Module.load
internal/modules/cjs/loader.js:879:14
Module._load
internal/modules/cjs/loader.js:1026:19
Module.require
internal/modules/cjs/helpers.js:72:18
require
node_modules/vue2-leaflet/dist/vue2-leaflet.cjs.js:7:15


console
Failed to load resource: the server responded with a status of 500 (RuntimeError)

mikeu commented

@maneewihok can you provide a few more details about your setup, what you are trying to do, what your source code looks like, anything like that? Are you trying to use SSR?

<template>
  <div class="p-2">
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet-geosearch@2.6.0/assets/css/leaflet.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/vue-select@3.0.0/dist/vue-select.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet-geosearch@2.6.0/assets/css/leaflet.css"
    />
    <div class="flex">
      <v-select
        @input="LocationID()"
        v-model="referObjectInput"
        :options="referObjectOptions"
        placeholder="เลือกโครงการ"
        label="projectNameTH"
        track-by="projectNameTH"
        class="overflow-y w-full appearance-none rounded"
      ></v-select>
      <button
        v-on:click="search"
        class="bg-white hover:bg-gray text-gray hover:text-white rounded shadow hover:shadow-lg py-1 px-3 border border-light hover:border-transparent"
      >
        Search
      </button>
      <button
        @click="showMap = !showMap"
        class="bg-primary-blue hover:bg-gray text-white hover:text-white rounded shadow hover:shadow-lg py-1 px-3 border border-light hover:border-transparent"
      >
        Map
      </button>
      <button
        @click="showDeatil = !showDeatil"
        class="bg-primary-blue hover:bg-gray text-white hover:text-white rounded shadow hover:shadow-lg py-1 px-3 border border-light hover:border-transparent"
      >
        Detail
      </button>
      <button
        @click="checkConsole"
        class="bg-danger hover:bg-gray text-white hover:text-white rounded shadow hover:shadow-lg py-1 px-3 border border-light hover:border-transparent"
      >
        Console
      </button>
    </div>
    <div class="flex flex-wrap mb-3">
      <div class="w-full md:w-1/4 px-3 mt-3">
        <input
          v-model="resLocaitonId.cityCode"
          class="input border border-gray rounded w-full"
          type="text"
          placeholder="cityCode"
          disabled
        />
      </div>
      <div class="w-full md:w-1/4 px-3 mt-3">
        <input
          v-model="resLocaitonId.district"
          class="input border border-gray rounded w-full"
          type="text"
          placeholder="district"
          disabled
        />
      </div>
      <div class="w-full md:w-1/4 px-3 mt-3">
        <input
          v-model="resLocaitonId.subdistrict"
          class="input border border-gray rounded w-full"
          type="text"
          placeholder="subdistrict"
          disabled
        />
      </div>
      <div class="w-full md:w-1/4 px-3 mt-3">
        <input
          v-model="referObjectInput.propertyType"
          class="input border border-gray rounded w-full"
          type="text"
          placeholder="propertyType"
          disabled
        />
      </div>
    </div>
    <div class="border-8 border-white">
      <l-map ref="leafmap" v-if="showMap" :zoom="zoom" :center="center">
        <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
        <v-marker-cluster v-if="geoJsonLoaded" :options="clusterOptions">
          <l-marker
            ref="mapMarkers"
            :lat-lng="[markers.lat, markers.lon]"
            v-for="markers in referObjectOptions"
            :key="markers.id"
          >
            <l-popup>
              {{ markers.projectNameTH }}
            </l-popup>
            <l-tooltip>
              {{ markers.projectNameTH }}
            </l-tooltip>
          </l-marker>
        </v-marker-cluster>
      </l-map>
      <Detail
        v-if="showDeatil"
        :referObjectInput="referObjectInput"
        :resLocaitonId="resLocaitonId"
      />
    </div>
  </div>
</template>

<script>
import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from "vue2-leaflet";
import Vue2LeafletMarkercluster from "vue2-leaflet-markercluster";
import * as L from "leaflet";
import Vue from "vue";
import vSelect from "vue-select";
import Detail from "~/components/Map/Detail.vue";
Vue.component("v-select", vSelect);
const controller = new AbortController();
const { signal } = controller;
export default {
  name: "MapApp",
  components: {
    Detail,
    "v-select": vSelect,
    "l-map": LMap,
    "l-marker": LMarker,
    "v-tilelayer": LTileLayer,
    "v-marker-cluster": Vue2LeafletMarkercluster,
    "l-popup": LPopup,
    "l-tooltip": LTooltip
  },
  data() {
    return {
      referObjectOptions: [],
      referObjectInput: "",
      resLocaitonId: [],
      zoom: 7,
      // eslint-disable-next-line prettier/prettier
      center: L.latLng(15.020896242939, 102.13795468211),
      url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      clusterOptions: {
        disableClusteringAtZoom: 18,
        chunkedLoading: true
      },
      geojson: "",
      geoJsonLoaded: true,
      showMap: true,
      showDeatil: false
    };
  },
  async fetch() {
    try {
      // eslint-disable-next-line prettier/prettier
      const { value: Pjresponse } = await this.$http.$get(`api/project/Search?publishonly=true`, { signal });
      this.referObjectOptions = Pjresponse;
    } catch (error) {
      console.log(error);
    }
  },
  methods: {
    search(event) {
      const item = this.referObjectInput;
      if (!item.lat && !item.log) {
        return;
      }
      this.$refs.leafmap.mapObject.flyToBounds([[item.lat, item.lon]]);
      this.openPopups();
    },
    openPopups() {
      const item = this.referObjectInput;
      for (let index = 0; index < item.length; index++) {
        this.$refs.mapMarkers[index].mapObject.openPopup();
        // this.$refs.mapMarkers[index].mapObject.openPopup();
      }
    },
    checkConsole(event) {},
    async LocationID() {
      try {
        // eslint-disable-next-line prettier/prettier
      const { value: Loresponse } = await this.$http.$get(`api/location/${ this.referObjectInput.locationId }`, { signal });
        this.resLocaitonId = Loresponse;
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style scoped>
@import "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css";
@import "https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css";
.leaflet-container {
  height: 50vh;
}
.input {
  height: 38px;
  width: 212px;
  padding-left: 30px;
  padding-right: 30px;
}
</style>