Disclosure: when you buy through links on our site, we may earn an affiliate commission.

React Leaflet (with hooks)

Learn how to build a map viewer application using React-Leaflet, an open-source library for creating interactive maps
4.9
4.9/5
(18 reviews)
95 students
Created by

9.9

CourseMarks Score®

10.0

Freshness

9.9

Feedback

9.3

Content

Platform: Udemy
Video: 4h 2m
Language: English
Next start: On Demand

Top Leaflet courses:

Detailed Analysis

CourseMarks Score®

9.9 / 10

CourseMarks Score® helps students to find the best classes. We aggregate 18 factors, including freshness, student feedback and content diversity.

Freshness Score

10.0 / 10
This course was last updated on 4/2022.

Course content can become outdated quite quickly. After analysing 71,530 courses, we found that the highest rated courses are updated every year. If a course has not been updated for more than 2 years, you should carefully evaluate the course before enrolling.

Student Feedback

9.9 / 10
We analyzed factors such as the rating (4.9/5) and the ratio between the number of reviews and the number of students, which is a great signal of student commitment.

New courses are hard to evaluate because there are no or just a few student ratings, but Student Feedback Score helps you find great courses even with fewer reviews.

Content Score

9.3 / 10
Video Score: 8.2 / 10
The course includes 4h 2m video content. Courses with more videos usually have a higher average rating. We have found that the sweet spot is 16 hours of video, which is long enough to teach a topic comprehensively, but not overwhelming. Courses over 16 hours of video gets the maximum score.
Detail Score: 9.9 / 10

The top online course contains a detailed description of the course, what you will learn and also a detailed description about the instructor.

Extra Content Score: 9.9 / 10

Tests, exercises, articles and other resources help students to better understand and deepen their understanding of the topic.

This course contains:

6 articles.
48 resources.
0 exercise.
0 test.

Table of contents

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

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

Requirements

• JavaScript + HTML + CSS fundamentals.
• A basic knowledge of React
• No prior Leaflet or geospatial experience is required!

This course is for

• You are interested in map-based applications for professional or personal reasons
• Have a background in React and would like to learn how mapping applications work
• You are somewhat familiar with Leaflet and are considering a move to React Leaflet

How much does the React Leaflet (with hooks) course cost? Is it worth it?

The course costs $14.99. And currently there is a 57% discount on the original price of the course, which was $26. So you save $11 if you enroll the course now.

Does the React Leaflet (with hooks) course have a money back guarantee or refund policy?

YES, React Leaflet (with hooks) has a 30-day money back guarantee. The 30-day refund policy is designed to allow students to study without risk.

Are there any SCHOLARSHIPS for this course?

Currently we could not find a scholarship for the React Leaflet (with hooks) course, but there is a $11 discount from the original price ($26). So the current price is just $14.99.

Who is the instructor? Is Edwin Corrigan a SCAM or a TRUSTED instructor?

Edwin Corrigan has created 1 courses that got 18 reviews which are generally positive. Edwin Corrigan has taught 95 students and received a 4.9 average review out of 18 reviews. Depending on the information available, Edwin Corrigan is a TRUSTED instructor.
Geo-spatial software engineer and maps enthuaist
Hello Everybody,
I’m a Software engineer with a lengthy previous experience working with spatial data/analysis, documentation, university teaching and mapping. I did all this though a Phd, PostDoc, working for Public agencies and a variety of startups.
I’m enthuaistic to learn and enthuaistic to teach. Through contributing to Internet forums, I’ve been helping people out on on the internet for years and feel I can offer very clear and easy to understand explanations of technical content.
Looking forward to sharing my knowledge and helping you out!


9.9

CourseMarks Score®

10.0

Freshness

9.9

Feedback

9.3

Content

Platform: Udemy
Video: 4h 2m
Language: English
Next start: On Demand

Students are also interested in

Review widget (for course creators):

React Leaflet (with hooks) rating
Code for the widget (just copy and paste it to your site):
<a href="https://coursemarks.com/course/react-leaflet-with-hooks/" target="_blank" title="React Leaflet (with hooks) on Coursemarks.com"><img border="0" src="https://coursemarks.com/widget/99.svg" width="200px" alt="React Leaflet (with hooks) rating"/></a>