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
github.com/CodingWith-Adam/ge...
Snippets
Ocean background color
background-color: rgb(178, 210, 222);
Links
Leaflet
leafletjs.com/
React Leaflet
react-leaflet.js.org/
GeoJson file datahub web page
datahub.io/core/geo-countries
GeoJson direct link to file
datahub.io/core/geo-countries...
ISOA3 country codes
en.wikipedia.org/wiki/ISO_3166-1
Wikipedia GeoJSON
en.wikipedia.org/wiki/GeoJSON
Негізгі бет Ғылым және технология React Leaflet Tutorial using GeoJSON to Create a Map - For Beginner and Intermediate Developers
Пікірлер: 138