Create maps using Leaflet in React JS (Tutorial)

[@cryptofelix5242]

Honestly very cool video for getting started with maps in web development and making them interactive. The music had me hooked as well! Thank you!

[@MiroStoj12]

The entire code used for mapping the state outlines, which isn't able to include the multi polygon states, can be replaced by 1 import and line of code: Thankfully 'react-leaflet' can do a lot for us

[@demetriusrobinson6000]

Can you post this code?

[@mikolaj7238]

9:36 - 9:38 what did you press?

[@theartofcoding3058]

This is "Format document" shortcut. It's depend on your setup. You can right click in the file and find your own shortcut

[@danielbisceanu2861]

At the 8:25 step, after the copyright attribution has been written, my map doesn't display anything, it's still grey

[@theartofcoding3058]

Do you create your own key from maptiler, because I already disabled the key in video. If because of that, you can create your own key, it free

[@ammaralfayyadh7720]

@@theartofcoding3058 how can I get the copyright attribution?

[@theartofcoding3058]

@@ammaralfayyadh7720 You can change it here

[@Daniel-us8vk]

Why are some us states not colored in? Michigan, washington state, dc, virginia, ? How do i fix? Thx

[@theartofcoding3058]

Maybe I do not have data of that state in json file

[@Daniel-us8vk]

@@theartofcoding3058 thanks for the reply! The states were included in the data file i believe the issue was because they were “multipolygons” i ended up using geojson isntead of polygon and it worked. Your video was alot of help thank you!!

[@yernar7.084]

Hello , good content, what about the click event? There is an idea when you click on region there will be pop-up(modal) with info about the region how to do it?((

[@sairam9638]

is there is available geojson for other country

[@GeekSP1]

i was like 💃💃💃 the whole time. 😂😂😂

[@HaxeHere]

Hey, thanks for the tutorial! Some of the states are left borderless on the map. Have you found out any reason why this happens? I've tried different things but I can't find the solution.

[@theartofcoding3058]

I think maybe we do not have data border for that state so some of it left borderless.

[@HaxeHere]

@@theartofcoding3058 I actually found a solution (kinda). Only the states that have the data type 'polygon' work, the data needs to be modified manually from multipolygon to polygon if you want this code to work perfectly (it would be a huge amount of work, especially for the states of Alaska and Texas). I managed to split Finland into it's counties perfectly with this tutorial and free data online, so thanks again!

[@arghavan9325]

Super cool, thanks! Can we get the name or other info from the states when we click on each one of them (in the end)?

[@theartofcoding3058]

Sure, we can. everything in the JSON object can get and displayed as you want.

[@arghavan9325]

@@theartofcoding3058 thanks! How can (or from where) I get such a JSON file? I have no clue 😅

[@theartofcoding3058]

@@arghavan9325 of, in JSON file we already have field name of state: item.properties.name

[@axoltl2261]

PS C:\xampp\htdocs\System> npm install react react-dom leaflet npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + npm install react react-dom leaflet + ~~~ + CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException I tried to follow the tutorial but this is the error I encountered.

[@theartofcoding3058]

npm is node package manager, you need to install it before do anything else

[@Addy__]

Great tutorial! Where can I find GeoJson files for other countries?

[@theartofcoding3058]

you can query from google maps API or bing maps API for other country

[@longlifelearner654]

Are those Google maps or bing maps API free?

[@victoriduh3130]

My map does not display, still shows gray

[@theartofcoding3058]

Do you mean your map show gray color in 7:00. If it's that, you should create your own Maptiler, cloud.maptiler.com/maps/, because I already disable the key I use in this video.

[@victoriduh3130]

@@theartofcoding3058 thanks, I already figured it.

[@block4671]

how you convert json o js object just change extention of json

[@theartofcoding3058]

Oh, Visual Studio Code have extension for format js file. So I just need add const variable = before json object and press format button, extensions will change json object to js object for me.

[@rizkiwijaya6327]

@@theartofcoding3058 Hi same problem from me. May I know the extension for this? Thank you for the great video

[@ghosting7550]

the tutor is bboy ?_? that song make me want to battle

[@iambao1940]

Hay qua anh oi

[@theartofcoding3058]

Thank you =))

[@chovycon3056]

Hello ae Việt Nam

[@theartofcoding3058]

Hello my brothers =))

[@RoadSafety1]

A WA number or email it is not available in your profile, How could I contact you?

[@theartofcoding3058]

Oh, sorry, my bad, you can contact with me via Gmail: [e-mail]

[@RoadSafety1]

@@theartofcoding3058 Please check your email. Daniel