React Leaflet (with hooks)-0daytown

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

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 a 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!
Description
React Leaflet Version 3, 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

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

Password/解压密码www.tbtos.com