React Leaflet (with hooks)
What you'll 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
- A basic knowledge of React
- No prior Leaflet or geospatial experience is required!
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;
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
Implementation of third party layers from plugins
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
Who 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
I'm a Software engineer with a lengthy previous experience working with spatial data/analysis, documentation, university teaching and mapping. I did all this through 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!