mapbox/mapbox-gl-leaflet

Error at L.mapboxGL

Chaitu15 opened this issue · 13 comments

Chaitu15 commented

I am facing issue like below. Can anyone help, what i am missing

TypeError: leaflet__WEBPACK_IMPORTED_MODULE_3___default.a.mapboxGL is not a function

at below

var map = L.map('root').setView([38.912753, -77.032194], 15);
L.marker([38.912753, -77.032194])
.bindPopup("Hello Leaflet GL!
Whoa, it works!")
.addTo(map)
.openPopup();
var gl = L.mapboxGL({
accessToken: "no-token
Capture
",
style: 'mapbox://styles/mapbox/bright-v8'
}).addTo(map);

markslawton commented

I had that problem as well. I think it was because i hadn't installed mapbox-gl-leaflet correctly.

Chaitu15 commented

By chance have you got it resolved?
But its just npm install right, nothing special i hope.

markslawton commented

I forget how I resolved it and am hesitant to guess because I'm kind of a beginner.

Chaitu15 commented

Thank you. But No Problem, i got it resolved. But facing other issues, mapboxgl.getMapboxMap().on('click') event is not firing.

Any suggestions?

  • 👎1
TanguyDucky commented

Solved by adding import "mapbox-gl-leaflet"; on top of my file

Noraddeen commented

how did you solve it
I have the same problem mopboxGL is not function.
how did you solved
I do import "mapbox-gl-leaflet"; but didn't work

Chaitu15 commented
neelduttahere commented

I am getting the same error
TypeError: leaflet__WEBPACK_IMPORTED_MODULE_1__.default.mapboxGL is not a function

It seems it's not able to recognize L.mapboxGL

I tried the above possible fixes, but none worked. Any suggestions? @Chaitu15

this is my code:

import { useEffect } from "react";
import { useMap } from "react-leaflet";
import L from "leaflet";
import * as mapboxGL from "mapbox-gl-leaflet";

export default function MapboxLayer({ styleUrl }) {
  const map = useMap();
  useEffect(() => {
    L.mapboxGL({
      accessToken: "",
      //   style: `${styleUrl}`,
    }).addTo(map);
  });
  return null;
}
Chaitu15 commented

Have you installed mapbox-gl-leaflet ??

Chaitu15 commented

I am getting the same error TypeError: leaflet__WEBPACK_IMPORTED_MODULE_1__.default.mapboxGL is not a function

It seems it's not able to recognize L.mapboxGL

I tried the above possible fixes, but none worked. Any suggestions? @Chaitu15

this is my code:

import { useEffect } from "react";
import { useMap } from "react-leaflet";
import L from "leaflet";
import * as mapboxGL from "mapbox-gl-leaflet";

export default function MapboxLayer({ styleUrl }) {
  const map = useMap();
  useEffect(() => {
    L.mapboxGL({
      accessToken: "",
      //   style: `${styleUrl}`,
    }).addTo(map);
  });
  return null;
}

Have you installed mapbox-gl-leaflet ??

neelduttahere commented

I am getting the same error TypeError: leaflet__WEBPACK_IMPORTED_MODULE_1__.default.mapboxGL is not a function
It seems it's not able to recognize L.mapboxGL
I tried the above possible fixes, but none worked. Any suggestions? @Chaitu15
this is my code:

import { useEffect } from "react";
import { useMap } from "react-leaflet";
import L from "leaflet";
import * as mapboxGL from "mapbox-gl-leaflet";

export default function MapboxLayer({ styleUrl }) {
  const map = useMap();
  useEffect(() => {
    L.mapboxGL({
      accessToken: "",
      //   style: `${styleUrl}`,
    }).addTo(map);
  });
  return null;
}

Have you installed mapbox-gl-leaflet ??

Hey sorry for the late reply! mapbox-gl-leaflet is also installed as peer dependency. But none the less, the issue doesn't happen to be arising anymore for some reason on a new project that I was working on, so I moved on. Thanks for the reply!

Chaitu15 commented
neelduttahere commented

Hi, Just try import "mapbox-gl-leaflet";
…
On Mon, Oct 17, 2022 at 11:21 AM Neel Dutta @.> wrote: I am getting the same error TypeError: leaflet__WEBPACK_IMPORTED_MODULE_1__.default.mapboxGL is not a function It seems it's not able to recognize L.mapboxGL I tried the above possible fixes, but none worked. Any suggestions? @Chaitu15 https://github.com/Chaitu15 this is my code: import { useEffect } from "react"; import { useMap } from "react-leaflet"; import L from "leaflet"; import * as mapboxGL from "mapbox-gl-leaflet"; export default function MapboxLayer({ styleUrl }) { const map = useMap(); useEffect(() => { L.mapboxGL({ accessToken: "", // style: ${styleUrl}, }).addTo(map); }); return null; } Have you installed mapbox-gl-leaflet ?? Hey sorry for the late reply! mapbox-gl-leaflet is also installed as peer dependency. But none the less, the issue doesn't happen to be arising anymore for some reason on a new project that I was working on, so I moved on. Thanks for the reply! — Reply to this email directly, view it on GitHub <#128 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMSMI3SB33XPCODYZXYFRDDWDTSN5ANCNFSM4TMIIOFA . You are receiving this because you were mentioned.Message ID: @.>

Yes, I have just added import "mapbox-gl-leaflet" as the first line in my component. But now I get a new error => typeError: Cannot read properties of null (reading 'addLayer')

my code:

let mapbox = L.mapboxGL({
     style: <my own style link from mapbox>,
     accessToken: <my accessToken>
}).addTo(map)

UPDATE

Turns out I was trying to addLayer before map was even initialized. @Chaitu15 Your solution works nonetheless.