Learn Alpine, Leaflet and Ruby

In this course, Colby is going to do a deep dive into creating a full store for your products. You'll learn how to set up and use GraphCMS as your content management system. You'll learn about the Cloudinary UI extension and how to use it to host your images. You'll learn about Snipcart and using the useSnipcart hook to handle the cart state and the checkout. You'll learn how to implement Stripe as your payment gateway. And lastly, you'll learn how to deploy a Next js app to vercel from github with environment variables.

snipcart

Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js

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

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

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

In this series, you will learn about Alpine's handy **directives**. You'll discover how to define a component scope with `x-data`, run code on mount with `x-init`, attach event listeners with `x-on`, display data with `x-text`, decide wether or not to show an element with `x-show`, iterate through data with `x-for`, retrieve a DOM element with `x-ref`, learn how to achieve _two-way data binding_ with `x-model`, and much more.

You'll also learn how **"modifiers"** can be applied and chained to directives to provide additional functionality: control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.

We'll also touch on what Alpine calls **"magic properties"**, which give you access to native browser events (`$event`), reference to DOM elements (`$refs`), and more.

You'll gradually discover Alpine's API and syntax, from building simple tabs to a mini app that fetches a dog picture based on a "breed" search field. 🐶

**Get ready to breathe some fresh air** - it's time to walk into cool, green Alpine pastures! 🏞

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.

You get to keep your DOM, and sprinkle in behavior as you see fit.

alpine

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

rails

Expanding on [Part 1](https://egghead.io/lessons/angularjs-rails-todo-api-part-1), this lesson will look at how to bootstrap AngularJS in a rails application as part of the asset pipeline. With Angular available, you'll see how to communicate with the Rails API using $resource.

Rails Todo API Part 2

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Rails makes an excellent choice for delivering data to AngularJS via REST apis. In this first lesson of a two part series, you'll see how to create a simple API for CRUD operations on TODOs using Rails. This isn't an introduction to Rails, and assumes you know the basics. 

Rails Todo API Part 1

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

leaflet

Leaflet makes creating maps in the browser *dead simple*. With some HTML and 3 lines of JavaScript, we can quickly have a map displaying.

Get Started with LeafletJS Mapping

With a basic map in place we can add shapes, like US states. We will then see how to style the shapes to make a visually appealing map.

Adding Shapes to Maps with Leaflet and GeoJSON

Rendering GeoJSON data on a map and interacting via mouse over, mouse out, and click.

Interactive Leaflet Maps with GeoJSON data

Create a search directive with AngularJS and Rails. You'll want to take a look at the related [Rails TODO API Part 1](https://egghead.io/lessons/angularjs-rails-todo-api-part-1) and [Rails TODO API Part 2](https://egghead.io/lessons/angularjs-rails-todo-api-part-2). This is **not** a Rails how-to, so some knowledge there is expected to get up and running.

Search Directive with Rails

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator".

jekyll

[Jekyll](https://jekyllrb.com/) is a static site generator built in [Ruby](https://www.ruby-lang.org/en/) and available to generate and host websites on [GitHub Pages](https://pages.github.com/). In this course, you'll install the Jekyll gem, use the command line tool to generate a new project, inspect the scaffolded project, and finally, serve the starter website.

Install Jekyll and generate initial, scaffolded website

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

Search

Search Results