- 194
- 3 089 968
Leigh Halliday
Canada
Приєднався 16 бер 2007
Hey folks! In this channel I'll be adding tutorials about JavaScript and React. For more information about me, please check out my website at www.leighhalliday.com and my Next.js Course at next.leighhalliday.com
Geocoding Addresses in React
Using Google's new @vis.gl/react-google-maps we'll geocode an address, going from "10 Front St, Toronto" to its Latitude and Longitude.
Переглядів: 2 273
Відео
Free Next.js Course: 4 / Layout & Nav
Переглядів 2,3 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/c0cbefb06ed8cef7b8cc3bc8ddaecd85ed981f33
Free Next.js Course: 23 / Highlight Hover
Переглядів 1,5 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/a8ff4977fde7955181822393c4ee913e2b55c478
Free Next.js Course: 7 / Render Mapbox
Переглядів 9 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/8db36f3f3483c19faafff2071304f91ecb370645
Free Next.js Course: 2 / Requirements
Переглядів 3,5 тис.Рік тому
Free Next.js Course: 2 / Requirements
Free Next.js Course: 28 / Vercel Deploy
Переглядів 364Рік тому
Free Next.js Course: 28 / Vercel Deploy
Free Next.js Course: 18 / Nearby Houses
Переглядів 439Рік тому
Free Next.js Course: 18 / Nearby Houses
Free Next.js Course: 15 / House Mutation
Переглядів 647Рік тому
Free Next.js Course: 15 / House Mutation
Free Next.js Course: 22 / Houses on Map
Переглядів 1 тис.Рік тому
Free Next.js Course: 22 / Houses on Map
Free Next.js Course: 29 / HttpOnly Cookie Authentication
Переглядів 9 тис.Рік тому
Free Next.js Course: 29 / HttpOnly Cookie Authentication
Free Next.js Course: 19 / Remember Location
Переглядів 301Рік тому
Free Next.js Course: 19 / Remember Location
Free Next.js Course: 11 / Initialize Prisma
Переглядів 963Рік тому
Free Next.js Course: 11 / Initialize Prisma
Free Next.js Course: 14 / Upload Image
Переглядів 6 тис.Рік тому
Free Next.js Course: 14 / Upload Image
Free Next.js Course: 13 / Initialize Apollo Client
Переглядів 2,7 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/3b4c8c167a07021fb3c2dce8726ae8d02edc8313
Free Next.js Course: 5 / Init Firebase
Переглядів 1,6 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/d08dc9b7f9aabe164796a6a0fe509547e4011472
Free Next.js Course: 12 / Initialize GraphQL & Apollo Server
Переглядів 1,8 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/ccaba0605869b61e8a761d7d342a7c36ca4ffbdc
Free Next.js Course: 10 / Image Preview
Переглядів 3 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/eaee0e8b3292a4127beadf19dec399fa260150b5
Free Next.js Course: 9 / Google Places
Переглядів 7 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/e192f5d7f5ee04fcd7b5deb14ce8be7de3775d0a
Free Next.js Course: 24 / Map Search
Переглядів 1,3 тис.Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/640d8c2d81cf47c533bb4cbb80f8b9cbeaa71470
Free Next.js Course: 25 / Restricted Route
Переглядів 528Рік тому
Welcome to Next Level Next.js! Over 500 copies of this course have been sold, but it's now time to give it away for free. I hope you enjoy it!! Links Source Code - github.com/leighhalliday/house-course/commit/5f01a96969edb1500a225436381893cdbc554395
Hi Leigh, i am not sure why my map is not appearing on the web even after following the same instructions. Is there in any change for it in 2024.
Thank you for a thorough, yet concise, explanation!
Great explanation! As others have mentioned there's a staggerChildren property too, but this is arguably simpler to implement as you don't need to set up a relationship between parent and child elements. Love the tip on applying different animations to even/odd indexed items too.
How can I get same dataset?
I'm working with a poject which the user can make a post with an image/video or audio file, or a post with only "text", i made that solution, it cancel the posting request, however the text is been created, and database create an instance of the post with only "text", do i have to handle the cancellation in server side too ! ?
Great content man and just when i needed it, can one add an option to ask for the users current location?
Thanks. You've literally saved me
thank you for your content <3 :)
tysm bro, you made my day
Great video. Thanks a lot Mr Leigh 🙏
thank you
hi sir , i have some doubt in fetch direction , acording your code ui direction is pointing A to B even for me from lat & lang or coming correctly nut ui drection is connenting , can give me solutions for this ...
learned a lot
what's your vscode theme?
I’m working on a project and this lectures is truly amazing and helpful for me. Thank you.
Why didn't you go just stp by step?😔
Hi Guys, I have a requirement in my application, need to show construction zone in Google Maps API. Can you please help me on this
I would appreciate same tutorials for MapBox instead. Google Map API is just crazy expensive.
Nice, thank you.
Thank you so much. It was useful and helped me
hi, how do i manage the priority and lastmod? currently it show all with same priority and lastmod.
Love videos like this that go straight to the point with great and concise explanation, thank you!
absolutely amazing and to the point comparison!
thank you so much!!
now can not be implemented. documentation is changed of mapbox. i tried it but didn't work works with new documentation process :)
Greetings! First of all, thank you for the amazing tutorial. I'm currently working on a project using the Google Maps API and this is really helping. However, I'm encountering an error in map.tsx. Namely this line: const onLoad = useCallback((map) => (mapRef.current = map),[]); The error message says: "Parameter 'map' implicitly has an 'any' type.ts(7006)" When I try to specify the type e.g. useCallback((map:google.maps.Map)) or map:GoogleMap, either the later onLoad function or the mapRef.current... breaks. During development in localhost this isn't a big deal, but I can't build the project with this error. Do you have an idea, how to fix this?
Hey, i am stuck at the initial step itself!, line : const geocodingApiLoaded = useMapsLibrary("geocoding"); im not able to load geocodingApiLoaded with the api key im using, it is working for loading the map, but im getting null value for this variable(geocodingApiLoaded ) and not able to generate the address
Thanks!
"Very well explained! Thank you for sharing."
amazing
So awesome
Would be great if you would show us how to change dynamically from light mode maps to dark mode maps with this mapId stuff 😢
Check out the full video by searching 'How to load Maps JavaScript API in React (2023)' on UA-cam. goo.gle/GoogleMapsPlatform
Thanks dude, massive help, explained really well. Subbed
Hi, the video is awesome, however, it's already been 4 years! I wonder if there's a new approach to this problem?
stop it, get some help. Check these things in your pipelines flow not on commits
Beginner here bro, the backend usually will setup the httponly: true? not the frontend will setup the httponly: true? the frontend will just received the secure token with httponly: true attached already to store directly to the cookies?
Beginner here bro, the backend usually will setup the httponly: true? not the frontend will setup this? the frontend will just received the secure token to store directly to the cookies?
Awesome. This new package is fantastic. Thanks for making this
This tutorial is really very helpful , I shared it with all my friends Great Explanation :)
In the below program spinner-border is a bootstrap class for showing a spinner. Using setLoading() inside finally block doesn't render the spinner. That's why I need to use this method inside both .then() and .catch(). I don't know why such happening. import { useEffect, useState } from "react"; import axios, { CanceledError } from 'axios'; interface User{ id:number; name:string; } const App = () => { const [users, setUsers] = useState<User[]>([]); const [error, setError] = useState(''); const [isLoading, setLoading] = useState(false); useEffect(() => { const controller = new AbortController(); setLoading(true); axios.get<User[]>("jsonplaceholder.typicode.com/users", {signal: controller.signal}) .then((res)=> { setUsers(res.data); // setLoading(false); }) .catch((e)=>{ console.log(e.name); if (e instanceof CanceledError) return; setError(e.message); // setLoading(false); }) .finally(()=>{ setLoading(false); }) return () => controller.abort(); },[]); return ( <> {error && <p className="text-danger">{error}</p>} {isLoading && <div className="spinner-border"></div>} <ul> {users.map(user => <li key={user.id}>{user.name}</li>)} </ul> </> ); };
How you find more than one data .... i think and idea
We missed you man!
I'm trying to send coordinates to back-end...
Awesome! Hope you will be back with your tutorials and courses soon here in UA-cam!
Check out the full video by searching 'How to create and customize cluster markers in React' on UA-cam.
We need more 20 minute tutorials on your channel. We have been waiting patiently.
Haha thanks! But this one is me too!
Check out the full video by searching 'How to show directions on a map in React' on UA-cam. goo.gle/GoogleMapsPlatform
So no one is talking about how the api_key is exposed for the whole world to see or y'all are not working on live projects where things like api_key is supposed to be confidential?
Hey! I delete the API keys after posting the video. That said, to use google maps on your site, the key must be public, because you'll need to have it in the browser. They key is to restrict its use, tying it to your domain and which services you require.
@@leighhalliday oh really? I'm sorry if I sounded harsh. I was working on a live project so I thought it was safer to hide the apikey and so I searched but didn't see a solution so I got frustrated. But thanks for this information, you are the second person who has told me this and now I have confirmed that I can leave it like that in the index.html...thanks and great video btw!