Help me !!! leaflet window is not defined
maneewihok opened this issue · 2 comments
maneewihok commented
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?
maneewihok commented
<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:
'© <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>