TypeError: Cannot read properties of undefined (reading 'addAttribution')

[dasturchioka]

Hi. Nice work on that plugin! I am using leaflet to make an interactive map for my web app. I am having this problem:

Here is my code for causing this problem:

sharedMap.value = L.map(id, {
          zoomControl: false,
          maxZoom: 20,
          attributionControl: false,
        }).setView(
          [originCoords.value.lat, originCoords.value.lng],
          defaultZoom.value
        );

        const mtLayer = new L.MaptilerLayer({
          // Get your free API key at https://cloud.maptiler.com
          apiKey: "MY_API_KEY",
        }).addTo(sharedMap.value);

Here is my imports:

import { defineStore, storeToRefs } from "pinia";
import { useOriginCoords } from "./origin";
import { useDestination } from "./destination";
import { ref } from "vue";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { LayerGroup, Map } from "leaflet";
import { useRoute } from "vue-router";
import OriginMarkerIcon from "@/assets/origin-marker-icon.svg";
import DestinationMarkerIcon from "@/assets/destination-marker-icon.svg";
import RealLocationPointIcon from "@/assets/real-location-point.svg";
import "@maptiler/leaflet-maptilersdk";

My package.json:

"dependencies": {
    "@capacitor/android": "^5.6.0",
    "@capacitor/app": "^5.0.6",
    "@capacitor/core": "^5.6.0",
    "@capacitor/geolocation": "^5.0.6",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/ios": "^5.6.0",
    "@capacitor/keyboard": "5.0.6",
    "@capacitor/network": "^5.0.6",
    "@capacitor/preferences": "^5.0.6",
    "@capacitor/push-notifications": "^5.1.0",
    "@capacitor/status-bar": "5.0.6",
    "@ionic/vue": "^7.6.6",
    "@jcesarmobile/ssl-skip": "^0.2.0",
    "@maptiler/leaflet-maptilersdk": "^2.0.0",
    "@radix-icons/vue": "^1.0.0",
    "@vue-leaflet/vue-leaflet": "^0.10.1",
    "@vueuse/core": "^10.7.2",
    "@webzlodimir/vue-bottom-sheet": "^3.0.5",
    "axios": "^1.6.6",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "google-maps": "^4.3.3",
    "hammerjs": "^2.0.8",
    "leaflet": "^1.9.4",
    "lucide-vue-next": "^0.312.0",
    "maska": "^2.1.11",
    "pinia": "^2.1.7",
    "radix-vue": "^1.3.2",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5",
    "vue3-toastify": "^0.1.14"
  },
  "devDependencies": {
    "@capacitor/cli": "^5.6.0",
    "@types/hammerjs": "^2.0.45",
    "@types/leaflet": "^1.9.8",
    "@types/node": "^20.11.6",
    "@vitejs/plugin-legacy": "^5.3.0",
    "@vitejs/plugin-vue": "^4.6.2",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/test-utils": "^2.4.3",
    "autoprefixer": "^10.4.17",
    "cypress": "^13.6.3",
    "eslint": "^8.56.0",
    "eslint-plugin-vue": "^9.20.1",
    "jsdom": "^22.1.0",
    "postcss": "^8.4.33",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3",
    "vite": "^5.0.12",
    "vite-plugin-mkcert": "^1.17.3",
    "vitest": "^0.32.4",
    "vue-tsc": "^1.8.27"
  },

Thanks in advance for the answer!

[dasturchioka]

I found a solution for this error right after creating this issue :)

The solution is just remove the attributionControl in creating a new leaflet map. Here is my updated code for this:

sharedMap.value = L.map(id, {
          zoomControl: false,
          maxZoom: 20,
        }).setView(
          [originCoords.value.lat, originCoords.value.lng],
          defaultZoom.value
        );

[dasturchioka]

Have you ever faced these warnings before? They are appearing as soon as the tile gets loaded.

[jonathanlurie]

Hey @dasturchioka , thanks for reporting this! I'll look into it!

[bolollo]

Have you ever faced these warnings before? They are appearing as soon as the tile gets loaded.

Hello @dasturchioka, could you send us the coordinates of the center of the map and the zoom level? These warnings seem like the style is trying to load images of the POI icons and does not find them. Thank you so much