React Leaflet Tutorial using GeoJSON to Create a Map - For Beginner and Intermediate Developers
A React Leaflet tutorial to build a world map using GeoJson data. Through this video we will build functionality to display different colors for the countries on the map. You will learn how to style the various elements of the map. How to display a leaflet popup or tooltip and add events for click and mouseOver.
This tutorial uses version 2 of react leaflet.
React leaflet allows react developers to use components to build a leaflet map. We will be using the Map component, GeoJSON component to build a map.
To generate random colors for each country we will use 2 different approaches. One will be to set the opacity level i.e transparency level to show lighter and darker colors. The second will be to use an array of colors and utilize Math.random javascript utility function.
We will learn how to change the style of the map at different levels. At the css level to change the background color with .leaflet-container. Second is setting the map size on the Map component. Third, globally apply country colors on the GeoJSON component. Lastly change the color of individual countries drawn on the screen.
You will also be introduced on how to add click and mouse events to layers using react leaflet. This will be demonstrated by changing the country(layer) colors and displaying a pop with (bindPopup)
Github project from the video
https://github.com/CodingWith-Adam/ge...
Snippets
Ocean background color
background-color: rgb(178, 210, 222);
Links
Leaflet
https://leafletjs.com/
React Leaflet
https://react-leaflet.js.org/
GeoJson file datahub web page
https://datahub.io/core/geo-countries
GeoJson direct link to file
https://datahub.io/core/geo-countries...
ISOA3 country codes
https://en.wikipedia.org/wiki/ISO_3166-1
Wikipedia GeoJSON
https://en.wikipedia.org/wiki/GeoJSON
On this page of the site you can watch the video online React Leaflet Tutorial using GeoJSON to Create a Map - For Beginner and Intermediate Developers with a duration of hours minute second in good quality, which was uploaded by the user Coding With Adam 08 August 2020, share the link with friends and acquaintances, this video has already been watched 52,130 times on youtube and it was liked by 857 viewers. Enjoy your viewing!
