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.

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

Snippets

Ocean background color
background-color: rgb(178, 210, 222);

Links

Leaflet

React Leaflet

GeoJson file datahub web page

GeoJson direct link to file

ISOA3 country codes

Wikipedia GeoJSON

[CodingWithAdam]

Attention: (Attempted import error: 'Map' is not exported from 'react-leaflet'.) This tutorial was created with an older version of React leaflet version 2.7.0. To fix this error use MapContainer instead of the Map Component. For example
import { MapContainer, GeoJSON } from "react-leaflet"; instead of import { Map, GeoJSON } from "react-leaflet";
and in the JSX use
instead of <Map...

Thanks for taking my tutorial :)

[Mayrazamora]

This video gave me the spark I didn’t know I needed. I’ve been trying to connect GIS and programming for years but kept hitting walls and losing motivation. Thankfully, my interest in AR/VR kept me curious enough to hang on. Seeing this approach with React Leaflet and GeoJSON finally helped things click again. It reminded me why I got into tech in the first place. Thank you for helping me come full circle 🙌

[antonnalivayko]

Thank Adam. This is the best tutorial for React-Leaflet-GeoJson.

[orangecoating]

Great tutorial, thanks for this. I know this is a late comment but really appreciate your map tutorials!

[la_creatura_enigmática]

Thank you so much for this video! You couldn't even imagine how helpful it was.

[lsagar]

omg, this is gold. this channels needs a million subs!! 😀😀

[pawananubhav]

one of best tutorials ever, thanksa lot for this!!

[MrJuanRolo]

Thank you for the video mate, is exactly what I was looking for.

[simond]

Thank you so much for this tutorial, helped me out a lot!!

[darinaibragimova]

omg, i likethe way how he is explaining everything !!!

[lxxmi_]

Thanks for this tutorial! Was looking for exactly something similar :D

[emersonrocha]

Thanks Adam! Video was very explanatory and objective! It helped me a lot in a real work problem :). Successfully subscribed to the channel.

[fernandoparra]

I really anjoyed this tutorial, i dont have a good level of english but i can understand you, thanks!

[GISYavnet]

Dear Adam, nice to follow your instruction, I am struck on 21:12, it doesn't tell any error but it can't sight the map like you do. Do you have any idea?

[heanokim]

Dude thank you so much this was great! For me I couldn't change my background color by changing the .leaflet-container css so I had to instead add a "style" property to my <MapContainer> component and pass in an object with background: "transparent". Anyway, super helpful video. Learned a lot

[serhii-fpv]

Thanks, Adam! Interesting topic and comprehensive tutorial

[kevinnacario]

Thanks, Adam. You deserve a subscribe! 😄

[Deddy]

Best tutorial video about React Leaflet as long as i try to find !! After following this video i try some experiment, so when i click some layer it do this.setState, but i got a problem, my current color from mouseover is gone ! i already also adding setStyle when on click but it also still gone! had you meet this problem?

Much apreciate if i can get any advice from you sir

[ianvillar]

Thank you for this tutorial! Though I am having trouble in the 17:34 mark of this video. I had encountered error in the 'Map' (imported as 'Map') was not found in 'react-leaflet'. Hope somebody can help me with this

[GISYavnet]

Is is a wonderful lesson, I have tried to follow you, but on 8:59 it said missing semicolon (3:5). I don't know where is that. can you instruct me please, here is my code
import React, { Component } from "react";

class MyMap extends Component {
state = { };
render () {
return (
<div>
<h1> May Map</h1>
</div>
);
}
}

export default MyMap;