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/geoJson-map-with-react-leaflet

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/r/countries.geojson

ISOA3 country codes
https://en.wikipedia.org/wiki/ISO_3166-1

Wikipedia GeoJSON
https://en.wikipedia.org/wiki/GeoJSON