Learn Figma, Leaflet and Particle

If you've ever worked on a website for a business, there's a good chance you've included a map.

A Google Map embed is sufficient for showing a location, but doesn't leave you many customization options.

React Leaflet to the rescue!

In this course, Colby Fayock will guide you through a series of lessons and challenges that will build your map making skills as you build out a web app for a fictional restaurant.

You'll get practice with handling API keys and using React Hooks to implement a custom interactive map complete with metadata and additional overlays.

This course has built-in challenges that you are encouraged to pause and work through, but feel free to just watch.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Build Maps with React Leaflet

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

In this collection, you'll learn the basics of creating a new map in your React application with React Leaflet. We'll walk through adding the map itself as well as adding markers with popups, different shapes, and increasingly complex features to your map!

Mapping with React Leaflet

Figma is a collaborative prototyping tool that allows you to responsively design your applications, with resolution presets for all of the most popular devices. In this course, we will explore the fundamentals of Figma’s toolset that you can use for various design functions. 

We will start from scratch, then walk through scenarios you may encounter when designing a website or application. We will cover building reusable designs — known as “components” in Figma — all the way up to prototyping your designs to show screen transitions and animations between state. 

By the end of the course, you will understand the basics of Figma so you can use it to your advantage when building your next app or website.

Design, prototype, and gather feedback all in one place with Figma.

figma

The Beginner's Guide to Figma

Figma is a powerful design tool built with web technologies. Using the same technologies you can extend it with plugins.
You can use Typescript and/or javascript, you can load your favorite UI frameworks like Vue.js or React.js and build powerful plugins.

Using a plugin you can:

* Load Real Data from your server and visualize it 
* Change elements in your design programmatically 
* Convert your design to JSX or HTML, the sky is the limit

Learning these skills will help you make your design workflow faster by making Figma doing exactly what you want





JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Create a Figma Plugin Using Typescript

In this video, you will learn how to bootstrap a Basic Figma plugin using the Figma app

Bootstrap a Figma Plugin

In this video, you will learn how to send and receive data from Figma to use it in your plugin

Communicate between the plugin and Figma 

In this video, you will learn how, in your plugin, to change the text value of a selected text node in Figma 

Change the text value of a select node

Now you have your plugin built and ready it's time to publish it.

In this video, you will learn to publish your Figma plugin to the public

Publish a Figma Plugin

Figma is a web-based collaborative interface design tool that we can use to prototype the look and feel of our OpenGraph cards. We dive into a few of the basic features using [Ryan Warner's](https://twitter.com/ryanwarnercodes) community [social branding templates](https://twitter.com/ryanwarnercodes/status/1239578329340170240), such as text placement, using the eyedropper and color tools, as well as pulling in gradients as images to fit our working area.

* [Social Branding Template](https://www.figma.com/community/file/820337605519256142)
* [Gradient Magic](https://www.gradientmagic.com/)

Designing OpenGraph unfurls in Figma

In this lesson, you will learn how to add a map to your React application using React Leaflet. We will walk through importing and configuring the Map and TileLayer components from React Leaflet to set up the new map.

Create a New Map using React Leaflet

In this lesson, you will learn how to add a Marker and Popup component to a Map when using React Leaflet. We'll walk you through importing the components and adding each one to the Map. Additionally, we'll resolve an issue with loading marker images that's inherent to creating a new React Leaflet map in Create React App, which we'll fix by manually importing the image from Leaflet and configuring those images to the marker.

Add a React Leaflet Marker with a Popup to a Map

In this lesson, you will learn how to add the Polygon and Circle shape components to a Map when using React Leaflet. We'll walk you through importing both components, adding each component to the Map, and setting a unique color for each shape.

Add Shapes to a Map in React Leaflet

In this lesson, you'll learn how to style shapes on your map to change the look and feel using React Leaflet's API. We'll use React component props like color and weight on our shapes to change the colors and styles.

Style React Leaflet Shapes using Component Props

In this lesson, you'll learn how to use CSS to style and animate shapes on your React Leaflet map. We'll use the className prop to add a custom class and add CSS to customize our shapes.

Style and Animate a React Leaflet Shape with Custom CSS

In this lesson, you will learn how to use React hooks to interface with the Leaflet Map API in React Leaflet. We'll connect a ref to our Map component using the useRef hook and then use the useEffect hook to access that ref, find our Map instance, and use it to fly to a new location.

[More details on the Leaflet Map API](https://leafletjs.com/reference-1.6.0.html#map)

Interface with the React Leaflet Map API with the useRef and useEffect React Hooks

In this lesson, you learn how to use the React Leaflet ZoomControl component to add a custom zoom control to your map. We'll walk through removing the default control to avoid duplicates, using the ZoomControl position prop to change its location, and setting custom icons with the zoomInText and zoomOutText props.

Change the React Leaflet Map ZoomControl Location and Icons

In this lesson, you will learn how to add GeoJSON data to a map in React Leaflet. Using the National Parks in the United States, we'll import a GeoJSON document, create a new Leaflet GeoJSON instance, and add a marker with a popup for each park.

[Parks Locations Example](https://www.nps.gov/maps/tools/npmap.js/examples/geojson-layer/)
[Parks GeoJSON](https://www.nps.gov/lib/npmap.js/4.0.0/examples/data/national-parks.geojson)

Add GeoJSON Location Data to a Map Using Markers and Popups in React Leaflet

In this lesson, we'll add a new tile service as our basemap in React Leaflet. Using the NASA GIBS Blue Marble, we'll update the TileLayer component's url and attribution props to the new service. We'll also add the maxNativeZoom prop which allows us to configure the maximum zoom allowable for the service.

[More info about NASA GIBS imagery](https://earthdata.nasa.gov/eosdis/science-system-description/eosdis-components/gibs)
[GIBS Imagery API](https://wiki.earthdata.nasa.gov/display/GIBS/GIBS+Available+Imagery+Products)

### NASA GIBS Blue Marble Tile Server
Endpoint: https://gibs-{s}.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_ShadedRelief_Bathymetry/default//EPSG3857_500m/{z}/{y}/{x}.jpeg
Attribution: NASA Blue Marble, image service by OpenGeo

Change the Map Tile Service of a React Leaflet TileLayer Basemap to NASA GIBS Blue Marble

In this lesson, we'll add a LayersControl toggle to allow us to change between multiple TileLayer basemaps in React Leaflet. Using the NASA GIBS Blue Marble, we'll add an additional TileLayer component, wrap our two TileLayers in BaseLayer components, and wrap all of our layers in a LayersControl to toggle our basemaps.

[More info about NASA GIBS imagery](https://earthdata.nasa.gov/eosdis/science-system-description/eosdis-components/gibs)
[GIBS Imagery API](https://wiki.earthdata.nasa.gov/display/GIBS/GIBS+Available+Imagery+Products)

### NASA GIBS Blue Marble Tile Server
Endpoint: https://gibs-{s}.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_ShadedRelief_Bathymetry/default//EPSG3857_500m/{z}/{y}/{x}.jpeg
Attribution: &copy; NASA Blue Marble, image service by OpenGeo

Add a LayersControl Toggle to Switch Between TileLayer Basemaps in React Leaflet

In this lesson, we'll use the LayerGroup and FeatureGroup components to organize feature shapes on our map. Using these grouping features, we'll learn how the LayerGroup is used for organizational purposes like adding or removing multiple layers at once and how we can update the color of all of our grouped shapes with the color prop on our FeatureGroup.

Topics

Instructors

Content Type