React Leaflet (with hooks)

Learn how to build a map viewer application using React-Leaflet, an open-source library for creating interactive maps

4.38 (97 reviews)
Udemy
platform
English
language
Other
category
instructor
486
students
4 hours
content
Nov 2023
last update
$79.99
regular price

What you will learn

Learn and understand React Leaflet

Have a working React Leaflet application that is open for extension for personal/professional projects

Have knowledge of useful tools for geospatial web application development

Be equipped with the confidence and knowledge to use online documentation to take your map app building skills to the next level

Description

React Leaflet Version 3 (includes compatability update to React Leaflet Version 4!!), the one that has been rewritten to use hooks, is used for this course. It is based on two widely used open-source Javascript libraries - React and Leaflet. Let’s set the scene with a brief introduction:


  • React - is the most popular JavaScript library you can learn to build modern, reactive user interfaces for the web. It has become so popular because it can be implemented on an individual component basis rather than having to update an entire web-application. This is a big advantage when it comes to modernizing entire web applications. Furthermore, React.js is built with performance as its core objective. Put simply, it stores Javascript objects in memory (without the heavy rendering step!) in a “Virtual DOM”. When the Virtual DOM is updated, a diffing algorithm identifies the most efficient way to update (i.e. re-render) the components to the actual visible DOM. React is developed and maintained by Meta (Facebook) and is here to stay.

  • Leaflet - due to its simplicity, being open-source and designed with the specific intention of being easy to use, it is a very popular Javascript library for building mobile friendly interactive maps. Leaflet is trusted by Github, Facebook, Esty and Pintereset among others, and again, it is also here to stay!

As the name may indicate, React Leaflet is an integration these two well established libraries by providing bindings between them. It leverages the power of the Leaflet library, abstracting Leaflet layers as React components. By doing so:

  • Leaflet can be integrated seamlessly into React applications;

  • React third party Javascript libraries can be utilized within Leaflet components (see course contents below);

Similar to Leaflet, this course is ‘built around simplicity’!!! We won’t get bogged down with configuring web servers, or middlewares. Instead the course aims to provide exposure into all facets of the React Leaflet library while also teaching you how to access the necessary resources to deepen your knowledge and develop your own React Leaflet web applications. The completed application from each code along video is provided as a downloadable resource. This makes it possible for you to jump in just at the place you'd like to and also possible to get a working version of the code if you get stuck.

The course starts with introducing concepts for beginners and gradually progresses to some advanced topics. Each section will build on the last and by the end you’ll have a functional React Leaflet web application.


What's in this course?

  • Creating a React application with create-react-app

  • Setting up React Leaflet with create-react-app

  • Initialising a React Leaflet map

  • Configuring tile layers

  • Where to find sample spatial data and tile servers

  • Tools to generate your own sample spatial data for development purposes

  • What is GeoJSON?

  • React Leaflet hooks

  • Filtering points within a radius

  • Filtering point by clicking on a polygon

  • How Leaflet looks in the DOM

  • Adding markers

  • Implementation of third party layers from plugins

  • Marker clustering

  • Centering the map to a clicked position

  • Adding custom Icons (how to implement font-awesome icons on React Leaflet)

  • Adding and customising popups

  • Adding and customising tooltips

  • How to customise React Leaflet popups with any React UI library

  • Adding Polygon layers

  • What is a layer in React Leaflet terms

  • How to filter points based on Polygon clicks (using Turf.js)

  • Adding a layer control

  • Building your own custom controls

  • Showing Geospatial information from a different Coordinate Reference System on React Leaflet map

  • Asynchronous calls and updating React Leaflet components

  • Adding third-party Leaflet controls to a React Leaflet application

  • Leaflet Routing Machine

Content

Introduction

Course preview
Introducing each section
Who is the teacher?
Installing NodeJS
Installing VsCode
Using create-react-app to setup React application
Installing Leaflet and React-Leaflet
Customising create-react-app boilerplate

Creating your first React Leaflet map!

Initialising React-Leaflet map and Tilelayer
Note on browserslist
Immutability and bindings
THEORY - Leaflet and the DOM

Marker layers

Adding the default map marker
THEORY - What is GeoJSON format?
Cities layer as a functional component
Moving cities layer to a separate file
Highest point marker layer with tooltip
Custom mountain icon for highest points layer
Adding click event to centre map on highest point

Customising Popups and Radius Filtering

Adding custom popup using antd to cities layer
Building out custom popup with cities data
Adding filter icon and margin between cards
Radius filter state
Filtering cities based on distance
Logic for updating radius filter

Vector layers

Circle to represent radius filter
Removing radius filter with double click
Styling radius filter circle
Continents layer from GeoJSON
Setting geo-filter state with click
Filtering cities based on geo-filter
Removing geo-filter when clicking on previous geo-filter
Highlighting current geo-filter
Styling continents layer

Custom control 1 - Fitting data

Adding layer control
THEORY - What is a layer?
Adding markers to layer control as layer groups
Building fit data to bounds custom control
Fit world button
Styling control and button
Fitting the map to selected data
Vertically aligning fit bounds buttons and finishing touches
When there are no markers!

Custom control 2 - Show active filters

Creating show active filters control
Building out show active filters UI
Adding active filters to control UI

How tos

How to section introduction
Adding multiple base layers
Rendering layers from asynchronous sources
React Leaflet Marker Clustering
Reprojecting coordinates into the CRS used by React Leaflet Map
Using a third-party Leaflet Control in React Leaflet (leaflet-routing-control)

Screenshots

React Leaflet (with hooks) - Screenshot_01React Leaflet (with hooks) - Screenshot_02React Leaflet (with hooks) - Screenshot_03React Leaflet (with hooks) - Screenshot_04

Reviews

Mariana
July 22, 2023
I like the course is a very useful tool to learn how to implement different hooks in a leaflet web app, is easy to understand.
Roberto
June 15, 2023
Amazing , Tons of information and great practical examples, every example works and it is easy to follow
Roger
May 19, 2023
La librairie Leaflet est vraiment intéressante (d'autant avec le combo React) est promet tellement de possibilités. La formation est aussi courte qu'efficace, cependant il faut plus l'imaginer comme un tuto qu'une formation (et donc avoir déjà pas mal de connaissances et de notions d'algorithmie : le formateur ne rentrera pas dans les détails des logiques). Enfin j'inviterai les nouveaux apprenants à aller de suite à la dernière section "how tos" (53/54) où seront apportés les correctifs aux conflits de versions (gagner du temps sur les éventuelles erreurs)... J'aurai pu mettre 5/5 au regard des nombreuses notions et options apportées dans le projet mais le fait de ne pas mettre à jour la formation (Udemy permet de mettre des instructions, corrections, en overlay sur les vidéos) d'un temps nécessaire à corriger et corréler (d'autant que mettre en fin de formation les correctifs sans avertissement reste maladroit), et le manque de développement et informations sur certaines parties, n'ont pas rendu mon apprentissage palpitant (j'ai mis une semaine à finir la formation). Il reste que la formation est terriblement efficace pour la conseiller, mais juste de persévérer (ne pas oublier que cela semble être la première formation d'Edwin Corrigan : intéressé à partager avant tout son expérience plus sur "le fond que la forme"). Merci au formateur (juste il est dommage de ne pas mettre un peu plus à jour la formation)
Ian
May 7, 2023
There aren't many courses that cover React Leaflet in such detail. It's a great collection of features and commonly used tasks. The explanations were clear and thorough. Looking forward to implementing a lot of these techniques into my projects in the future. Would love to see more lessons from Edwin in the future that cover other commonly used features to keep building on this solid foundation. Thanks again!
Varun
April 22, 2023
I recently completed this course and am thoroughly impressed. The instructor provided clear and concise explanations, making even the most complex topics easy to understand. The course was well-structured and provided plenty of hands-on exercises to reinforce the concepts. Overall, I would highly recommend this course to anyone looking to expand their React skills and learn how to integrate maps into their web applications.
Christopher
January 11, 2023
This is a fantastic course. I've learned a ton. The instructor works through the material at an appropriate pace, with lots of instruction.
Giri
September 6, 2022
No framework implimention kindly take any backend framework like geodjango and react leaftlet and your teching missing GIS CURD operations on GIS Fields like marker and Line and Polygon.....
Pawandeep
July 8, 2022
radiusFilter should have been first explain theoretically. I mean, all the changes that he did to implement this filter should have been explained logically and then implement it.
David
June 6, 2022
This is a great course to learn many important feature of React Leaflet. The examples are useful and interesting. At some points it is not so easy to understand the concepts behind some geospasial stuff so a bit of prior leaflet knowledge can be a advantage for the learners. Otherwise I really recommend this course.
CEDRIC
May 30, 2022
c'est un super cours je l'adpate au sein d'un composant Sharepoint et ça se passe tres bien j'apprend plein de chose trés interessante pour le moment vraiment cool comme cours
Shane
May 10, 2022
A really good overview of React Leaflet, would highly recommend to anyone starting out with Leaflet. Learned a lot from it!
Liam
April 15, 2022
Really helped to develop my knowledge and increase my confidence in applying my skills. The narration is clear, unrushed and descriptive. 100% recommended.
Andrew
April 8, 2022
Well structured course with easy to follow lessons. The instructor gets you up to speed in no time at all. For anyone interested, I highly recommend this course.
Jane
April 4, 2022
This course has been great and I've learned a lot. Edwin clearly teaches the information (both theory and code alongs) and the topics covered are instantly applicable for use in a project I'm beginning to work on
Chris
April 4, 2022
This course really helped me with some personal projects I've been working on and cleared up some things I apparently misunderstood about React-Leaflet

Charts

Price

React Leaflet (with hooks) - Price chart

Rating

React Leaflet (with hooks) - Ratings chart

Enrollment distribution

React Leaflet (with hooks) - Distribution chart

Related Topics

4560566
udemy ID
2/20/2022
course created date
5/6/2022
course indexed date
Bot
course submited by