Leaflet map turns white when adding coordinates for Polyline

21 Views Asked by At

My version of nuxt is "^3.10.3", "nuxt3-leaflet" version: "^1.0.12". In nuxt.config: "nuxt3-leaflet" The problem is that when I transfer the coordinates to the polyline, the map becomes white, if I delete them, it becomes normal. My component:

<template>
  <div style="height: 100%; width: 100%">
    <client-only>
      <LMap ref="map" :zoom="zoom" :center="[55.751244, 37.618423]">
        <LTileLayer
          url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&amp;copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
          layer-type="base"
          name="OpenStreetMap"
        />
        <l-marker :lat-lng="[55.751244, 37.618423]"></l-marker>
        <LPolyline
          :lat-lngs="data.polyline.latlngs"
          color="blue"
          :weight="3"
        ></LPolyline>
      </LMap>
    </client-only>
  </div>
</template>
<script setup>
const data = {
  // center: [47.31322, -1.319482],
  polyline: {
    latlngs: [
      [55.751244, 37.618423],
      [47.216073, 1.554759],
    ],
    color: "green",
  },
};
const zoom = ref(6);
</script>

<style></style>

Screenshot:

enter image description here

I tried the same thing only with Google TileLayer, but there was the same error. Help please!!!

0

There are 0 best solutions below