Learn Elm, Leaflet and Ngrx-store

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

As your Angular application grows, it becomes more difficult to manage application state.

NgRx can help with that!

In this course, we will learn how to convert an Angular application from using stateful services into using NgRx.

We will accomplish this by adding a new feature, including building a reducer and actions. We'll also touch on using selectors to query our state, managing collections with NgRx entity, async operations, and hiding implementation details with the facade pattern.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Reactive State Management in Angular with ngrx

elm-ui is a novel iteration on declarative styling where you can use Elm types and functions to define your UI in a declarative way. The novel part is that it does not require you to know CSS to be used, you can start building layouts right away!

You'll learn how to:
- use a declarative mindset for building UIs
- position elements on the screen
- create layouts with rows and columns
- build a form with elm-ui

Elm is a programming language that provides a clean functional syntax for writing HTML web applications. It promises zero runtime exceptions, fast rendering, time-travel debugging, and much more.

Declarative UIs without CSS with elm-ui

Elm is a beginner friendly functional reactive programming language for building web applications. It contains a small but powerful set of language constructs, such as, static types, algebraic data types, immutability, and pure functions. Elm provides and requires the use of a specific architecture that’s well suited for sensible application construction. Elm’s type system and architecture may feel constraining at first, but they ultimately provide the programmer with some neat benefits including comprehensible code, and a much improved refactoring experience.

In this course you will learn the basic fundamentals of Elm so that you can start building applications today.

Start Using Elm to Build Web Applications

***Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.**

Angular has many built-in features for working closely with RxJS to help you build entirely reactive applications. This course will teach you how to use Angular with RxJS. We will learn how to use the ngrx/store library to manage state in a clean, reactive "Redux style."

This course assumes you've got a working knowledge of Angular and reactive programming with RxJS. If you don't, you might want to watch the following courses to get you up to speed! 
- [Get Started with Angular](https://egghead.io/courses/get-started-with-angular) 
- [Introduction to Reactive Programming with RxJS](
https://egghead.io/series/introduction-to-reactive-programming). 
- [Step by Step Async Programming with RxJS](https://egghead.io/series/step-by-step-async-javascript-with-rxjs) 
- [Getting Started With Redux](https://egghead.io/series/getting-started-with-redux), a course by Redux's, Dan Abramov.

We also have Intermediary Angular courses if you'd like to acquire more in-depth knowledge. 
- [Dependency Injection](https://egghead.io/courses/angular-2-dependency-injection-di-explained
- [Components, Directives](https://egghead.io/courses/building-angular-components)
- [Forms](https://egghead.io/courses/intro-to-angular-forms)
- [Router](https://egghead.io/courses/intro-to-angular-router)
- [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)



Build Redux Style Applications with Angular, RxJS, and ngrx/store

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.

Manage Map Data and Feature Shapes Together in a React Leaflet LayerGroup or FeatureGroup

In this lesson, we'll use an image to create a custom map marker icon for GeoJSON location data on our map. We'll walk through importing a custom image, creating a new Leaflet Icon and Marker instance, and use them to customize our National Parks markers.

Customize GeoJSON Data Markers with a React Leaflet Icon Image

In this lesson, we'll use the Leaflet setView and flyTo methods available on a map instance to change the location of a React Leaflet map. Using buttons to demonstrate, we'll walk through adding the setView method using a position and zoom level as well as the flyTo method which allows us to animate changing the location along with a specified duration.

Change the Location of a React Leaflet Map with Leaflet's flyTo and setView

In this lesson, we'll use geojson.io to add markers and draw shapes to create a GeoJSON document that we can add to our React Leaflet map. We'll walk through drawing the shapes, creating a new file to store the GeoJSON data, importing it to our app, and displaying it on our map with the React Leaflet GeoJSON component.

[Geojson.io](http://geojson.io/)
[Geojson.io Centered on Central Park](http://geojson.io/#map=16/40.7710/-73.9743)
[GeoJSON Spec](https://geojson.org/)

Use Geojson.io to Draw Custom Marker and Shape Features for a React Leaflet Map

In this lesson, we'll use Leaflet's map locate method to use the browser's API to find the visitor's current location and update the React Leaflet map to that location. We'll walk through what the locate method does, set an event handler to trigger when it locates, and use the accuracy and location data to add a circle to the map designating the area.


Topics

Instructors

Content Type