React Map Gl - map not rendering. code seems to be correct
Unanswered
Blanc de Hotot posted this in #help-forum
Blanc de HototOP
So here Im trying to use React Map Gl, and I think I've all correcty.
but the mao is not showing up in the page, and Im getting this error on console.
but actually I have my api token acess as you can see in teh file next.config.js on line 9.
and also on Map.js on line 26.
can anyone help me here?
but the mao is not showing up in the page, and Im getting this error on console.
but actually I have my api token acess as you can see in teh file next.config.js on line 9.
and also on Map.js on line 26.
can anyone help me here?
204 Replies
Blanc de HototOP
anyone ?
Atlantic herring
in the error its saying that there's a token missing
@Blanc de Hotot
Blanc de HototOP
but can you see that I have the token ?
line 9
@Blanc de Hotot line 9
why not simply use
.env just for testing purposes?Blanc de HototOP
how??
create a
.env file in your app root directory and define your keymapbox_key=KEY
Blanc de HototOP
ok
like "mapAPI.env" in src ?
@Blanc de Hotot line 9
and i don't think it's wise sending your token publicly so i'd recommend you to delete this image, if you want, repost but hide at least a good part of your key
@Blanc de Hotot like "mapAPI.env" in src ?
no, create a
.env file, the file name is .env, nothing else@CyberNinja mapbox_key=KEY
then do this
Blanc de HototOP
like this
yes, but the quote aren't neccesary since your app systematically process it as string
Blanc de HototOP
and you've forgot to hide your token again...
Blanc de HototOP
try to log they key wherver you're calling it to make sure your app is able to access it
Blanc de HototOP
console.log(pk.eyJ1IjoiaW5kaWFiYWxjb2......) ??
if it does and the error still happens, it's probs cause your key is wrong so you might want to check ReactMAPGL docs and cisit this link to make surre your key is valid https://docs.mapbox.com/help/getting-started/access-tokens/
no, you're calling
process.env.mapbox_key so you want to log thatBlanc de HototOP
so..
what do I need to do ?
look, this is how my code is right now
can you see something wrong from there?
@Blanc de Hotot what do I need to do ?
i can't know, depends on what's happening rn, is there still an error in your logs about the key?
Blanc de HototOP
@Blanc de Hotot can you see something wrong from there?
i've never heard about ReactMapGL before today so i can't say xd
Blanc de HototOP
ah..
lool
@Blanc de Hotot Click to see attachment
than make sure your key is valid
Blanc de HototOP
weird..
key is correct.. and I keep having some issue about "API access token is required"
https://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens you're trying to parse
mapBoxApiAccess token, looks like you want to get mapboxAccessTokenyou need the key in the browser, so you need to use the
NEXT_PUBLIC_ prefix in the name so it gets available: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#exposing-environment-variables-to-the-browserrename the key to
NEXT_PUBLIC_MAPBOX_KEYhere drops a legend
@Rafael Almeida rename the key to `NEXT_PUBLIC_MAPBOX_KEY`
Blanc de HototOP
so ..
use a
.env file instead like how they are showing in the docs, you don't want to commit secrets to the repoBlanc de HototOP
yes.. but it is just a test account
so I think its not dangerous
Blanc de HototOP
Beveren
if its in next.config.js you dont need to prefix it with NEXT_PUBLIC
@Blanc de Hotot Click to see attachment
wait, what? no, take off the env object, only use the key
@Blanc de Hotot Click to see attachment
Beveren
.env file should be like this
NEXT_PUBLIC_MAPBOX_KEY=YOUR_KEYBlanc de HototOP
like this you mean ?
@Blanc de Hotot Click to see attachment
you're still calling mapbox_key in our component when you have
NEXT_PUBLIC_MAPBOX_KEY in your envBlanc de HototOP
<ReactMapGL
mapStyle="mapbox://styles/mikepine/clisoi902009q01qygsk4dj6c"
mapboxAccessToken={process.env.mapbox_key}
{...viewport}
onViewportChange = {(nextViewport) => setViewport(nextViewport)}
> is this correct?
Blanc de HototOP
hmm
<ReactMapGL
mapStyle="mapbox://styles/mikepine/clisoi902009q01qygsk4dj6c"
mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_KEY}
{...viewport}
onViewportChange = {(nextViewport) => setViewport(nextViewport)}
> Blanc de HototOP
ahh ok
1 sec
now i HAVE THIS
give it a shot?
Blanc de HototOP
weird...
hmmm
set your key to this
REACT_APP_MAPBOX_ACCESS_TOKEN and update accordingly in your componentBeveren
well, try printing process.env.NEXT_PUBLIC_MAPBOX_KEY to console and check if its there
this too 
Blanc de HototOP
i cant console log :S
huh? why not?
Beveren
why?
Blanc de HototOP
bruh, no
Blanc de HototOP
😅
how come you are learning nextjs before at least the b asics of react or js?
Beveren
move it before return keyword
bud, that ignores that console.log statement, move it before
//...
console.log(process.env.NEXT_PUBLIC_MAPBOX_KEY)
return (
// ... stuff, div, p tag, etc
)Giant panda
Just saying that the server needs to be restarted most of the time to pick up on new variables.
@deathlybower959 how come you are learning nextjs before at least the b asics of react or js?
i learned both js and nextjs on the fly xd
@CyberNinja i learned both js and nextjs on the fly xd
you can definetely do it, not saying its not possible
Blanc de HototOP
@Giant panda Just saying that the server needs to be restarted most of the time to pick up on new variables.
yup i was just about to say that
now restart your dev server
@deathlybower959 you can definetely do it, not saying its not possible
aye, tha's why most of my errors are due to skill issue too ig 😂
Blanc de HototOP
im restarting the sv
stop the running terminal, and run
next devmk
Blanc de HototOP
npm run dev
yea that to
i dont use npm, so i wasnt sure what you used
yarn?
@CyberNinja i learned both js and nextjs on the fly xd
you dont need to learn react before, but i feel like understanding the concept of csr, then moving to other rendering methods helps in knowing what nextjs is doing and stuff. You can learn it all at once, its just a preference
Blanc de HototOP
@Blanc de Hotot Click to see attachment
doubt it, but it might be the weird formatting
@deathlybower959 you dont need to learn react before, but i feel like understanding the concept of csr, then moving to other rendering methods helps in knowing what nextjs is doing and stuff. You can learn it all at once, its just a preference
yup, i haven't learned react at all, i think i can code in react now only cuz i use nextjs
Blanc de HototOP
remove the extra spaces, remove the quotes
@deathlybower959 yarn
yarn best 🙂
there should be absolutely no spaces, and no quotes
@deathlybower959 remove the extra spaces, remove the quotes
Blanc de HototOP
where ?
.env file
in your .env
havent tried pnpm, but yarn is rlly nice
remove the quotes wrapping the key
Blanc de HototOP
Giant panda
The environment variable is undefined because the .env file itself is in a completely wrong folder
@Blanc de Hotot Click to see attachment
and the correct prop name is
mapboxAccessTokenits supposed to be in your root
Giant panda
Now folks, do me a favor please and reduce the offtopic spam. It suffices having multiple cooks spoiling the broth in here.
its supposed to be in your root folder
Giant panda
The .env file should be in the root outside of app dir
you put the .env in the
app dir, it should be in the / root directoryso in the area where README.md, and pacakge.json are
on that level
Blanc de HototOP
1 sec guys
so ...
.env in app dir right?
no, root
Blanc de HototOP
ah root.. ok
we just said put it in the root dir
main root, same level with your package.json
Blanc de HototOP
ahh ok
Blanc de HototOP
ok, lets make a point
should be in this root folder
Blanc de HototOP
¨
i will restart the server just in case
aye, do that
Blanc de HototOP
wow
you guys are masters
ayyyy
Blanc de HototOP
but now I have the same issue as the very beggining ... look at that guys ... the pins are completly outside of the map
Giant panda
And what did you do to investigate this issue or what did you try to solve it?
Or are you instantly asking for help without investing time to analyze the problem?
Blanc de HototOP
?
i think near's trying to say you should try and find what's causing the issue since no one here can directly help you with that
what near is saying is are you troubleshooting the problem, through debugging, reading the docs, or inspecting your code? or immediately asking for help
Blanc de HototOP
I searched yes ... and a lot .. and I saw somewhere it could be because of 40 and 41
I already tried to modify some stuff
these helps servers and stuff are great, but make sure that you dont hinder your learning
well since the pins are too low
try settings the offsetTop to a negative value
Blanc de HototOP
Im trying diferent aproaches
@Blanc de Hotot I already tried to modify some stuff
then trey again but stick to the docs 🙂
docs are going to be super helpful, as its other developers telling you how to use their software
i know nothing about reactmapgl but i saw your were using the wrong props by checking the docs, so you might as well debug your code by reading the docs and comparing your code with the docs, you can also search google for solutions
Beveren
try removing additional div inside your map function 
you could remove the other div, doesnt seem lik that should be there
@Beveren try removing additional div inside your map function <a:pepeShrug:766258321027497984>
Blanc de HototOP
but this div has a
key={result.long}" then apply the key to the Marker instead
i would also suggest setting the key to
${result.lat}.${result.long}as there may be two points which have the same longitude
Blanc de HototOP
@deathlybower959 i would also suggest setting the key to
`${result.lat}.${result.long}`
Blanc de HototOP
where is suposed to put this ?
on the marker, add
key={${result.lat}.${result.long}`}Blanc de HototOP
put back the longitude and latitude
longitude and latitude is party of the library you are using
the mabpbox
the key is part of react
Blanc de HototOP
it helps react know when looping through items, which values need to be changed
yea
Blanc de HototOP
ah
I get it !
now Im trying negtive numbers, and still the same .. its exactly in the same place
you can try the Mapbox server for help, this is offtopic for this server
Beveren
try removing width height from your viewport state and try if its going to show them properly or not
this is probably my last idea to help you 😄