Interactive maps with Mapbox!

This course is a wide survey of using Mapbox in modern web applications. It covers everything you need to know: finding and formatting data, styling and understanding the web interface of Mapbox Studio, and building truly responsive and complex web maps using the modern Mapbox GL JS.

This course assumes you come with little knowledge of programming and geographic information, and there are videos to walk you through each step. You'll learn to create big, beautiful custom maps and all the different ways your users can interact with those maps.

This course was made with a slightly different interface from what Mapbox Studio uses today, but the concepts are still recognizable and you will do well to get a strong grasp on Mapbox through this course. This is a solid foundation for building online web maps, or even making a move into building mobile apps with Mapbox, although we don't go over that specifically in this course.

It's going to be a great time. Let's get mapping.

Just a note: this course is a bit old, and I don't use Udemy a lot, so I won't always be available to respond to questions here in Udemy. If you have a question, please email me at [email protected] to get a quick response.

What's inside

Learning objectives

Create interactive maps with custom data in mapbox
Understand data flow and requirements within mapbox

Be able to create a totally custom styled map in mapbox studio
Feel confident using a huge variety of properties for mapbox features

Create interactive maps with custom data in mapbox
Understand data flow and requirements within mapbox
Be able to create a totally custom styled map in mapbox studio
Feel confident using a huge variety of properties for mapbox features

Syllabus

Introduction

Get to know your instructor and what we'll be covering in the course.

We go over some different mapping APIs, strengths, weaknesses, and the differences between them.

So, we're going with Mapbox! Why use it over other maps? What's hard about it?

The crowning glory: Mapbox GL JS. What makes it special-er than other mapping APIs?

What are the common data formats and file types that you'll find online and use for Mapbox? This episode goes over general data information when it comes to geography.

Data can come in a few flavours, but most data is either static (relatively unchanging) or dynamic (from an API or a live source). This and the following episode go over some examples of finding and working with data online.

Data can come in a few flavours, but most data is either static (relatively unchanging) or dynamic (from an API or a live source). This and the previous episode go over some examples of finding and working with data online, including Open Street Map exports.

Datasets can come into Mapbox as geoJSON or CSV. They have to have specific formats that Mapbox can be very strict about, and they have size limits as well.

This video goes over the Mapbox interface for editing datasets. See the previous video for more information about datasets more generally.

Datasets generally represent geoJSON data uploaded to Mapbox, or created inside the Dataset editor. This episode goes over the interface and concept briefly.

Tilesets are pre-rendered collections of vector data generated from datasets or uploaded on their own. There are many data formats allowed, and specific size formats.

Tilesets can be a little confusing, since you can't edit the data much directly, but you can style it and use the data in your analyses. Zoom levels may be restricted, we will touch on that in later episodes.

There's tons of things that can go wrong with your Mapbox uploads -- size, complexity, zoom extent, and more. GeoJSONs and shapefiles need to be manipulated at times as well.

Zoom extent in particular is a problem for many people new to Mapbox maps. This episode shows you a few strategies for making sure your shapes show up at all zoom levels.

Mapbox Studio Classic is deprecated, but it can still be useful and sometimes even Mapbox recommend you use it. You can print, upload huge files and style them, and do a lot more, but it can be a little old at times!

What is a Mapbox Style? How do you navigate in the interface? This episode gets you introduced to the Studio tool and its complexities.

Learn a bit about how to interact with layers, add and hide them, and style line features.

Learn more about Mapbox Studio breakpoints when styling at zoom levels. More complex line styling also included here.

Learn how to style markers, symbols, and text in Mapbox Studio.

Learn some of the ways to style and change polygons or fills.

How do you set up your geoJSON so you'll be able to style different features differently? This episode shows you how to create a dataset in Mapbox for filtering.

Filtering data inside Mapbox Studio is really useful for "splitting up" data layers by shape or property.

Learn how to load up a GL JS map and setting some basic options.

It takes a little while to understand how data connects between Mapbox Studio and GL JS. This lesson begins to explain that connection!

Learn to add geoJSON sources as well as vector layer sources to your map, and how to interact with them.

Access sources and layers loaded in your Mapbox Style.

Solidify your knowledge of the connection between GL JS and Studio by learning to style in both places. Learn a little about text styling as well in GL JS.

Learn how to change symbols used in vector icons on the front-end. Also a general discussion on updating Layout and Paint properties.

Another way to create markers -- pure HTML, with custom images or content.

We have already used some events, but in this video I go over them a little more closely and point out some common issues.

Use queryRenderedFeatures and querySourceFeatures to get data out of the map, and use it for your analyses.

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Develops visualizing and mapping skills, which are useful for real world applications like geographically exploring data, understanding user behavior, or convening with remote teams

Offers the chance to interact with industry recognized expert, Victor Temprano, in the field

Walk throughs in the form of videos for each step of the learning process, which may be helpful for novice learners or those who appreciate that learning style

Teaches skills needed for modern web applications, which may give learners an edge in the job market

Assumes learners have no background in programming or geographic information, which makes it suitable for those new to the field

Provides hands-on labs and interactive materials, which may help learners retain information and fully understand the material

Reviews summary

Comprehensive mapbox web mapping foundation

According to learners, this course offers a comprehensive foundation for creating interactive web maps with Mapbox. It's praised for covering everything from data handling and Mapbox Studio styling to building responsive maps with Mapbox GL JS. However, a significant concern is that the course content uses an outdated Mapbox Studio interface, which some learners found could lead to confusion. Additionally, students noted that instructor support on the platform is limited, requiring direct email for questions. Despite being a bit old, it's considered a solid starting point for understanding Mapbox's core concepts.

Course strongly focuses on web map creation, not mobile development.

"I appreciated the clear focus on web applications, though I was hoping for a bit on mobile mapping too."

"The course explicitly states it's for web maps, which is what I needed, so it delivered well on that promise."

"While it lays a foundation for mobile, the course doesn't delve into building Mapbox apps for phones specifically."

Suitable for learners with little prior programming or GIS knowledge.

"I had very little programming experience, but the instructor walked through each step clearly and patiently."

"The course assumes almost no prior knowledge in GIS or coding, which was perfect for me as a complete beginner to web mapping."

"It was easy to follow even without a strong background in geographic information or web development, thanks to the explanations."

Offers a wide-ranging introduction to Mapbox for web applications.

"I learned everything from finding and formatting data to building complex web maps with Mapbox GL JS, it was very thorough."

"This course provided a solid foundational understanding of Mapbox Studio and GL JS, exactly what I needed to get started."

"It covers a great breadth of topics, making me confident in using Mapbox for various projects after completing it."

Instructor availability on the platform is limited, requiring external contact.

"I had questions, but the instructor advised to email them directly, which isn't ideal for platform-based learning and quick answers."

"Getting timely responses within the Udemy Q&A section was difficult; the instructor is rarely active there."

"While the course content is good, don't expect much interaction or support directly on the course forum or Q&A."

The course uses an older Mapbox Studio interface, requiring adaptation.

"I found that the Mapbox Studio interface in the videos was different from the current version, making it a bit challenging to follow along at times."

"The course materials feel a bit old, and I had to figure out some UI changes on my own to match the current Mapbox Studio."

"It's a solid course, but I wish the instructor could update the sections related to the latest Mapbox Studio for better clarity."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Interactive maps with Mapbox! with these activities:

Learn About Mapbox Web Mapping Tools

Show steps

Guides you through the basics of Mapbox Studio and its web mapping tools. This will get you started quickly!

Show steps

Create a new map in Mapbox Studio
Add layers to your map
Style your map
Export your map

Network with Other Mapbox Users

Show steps

Expand your professional network and connect with people who share your interest in Mapbox.

Show steps

Attend Mapbox events
Join the Mapbox community online
Follow Mapbox on social media

Attend a Mapbox Workshop

Show steps

Take your skills to the next level by attending a workshop.

Show steps

Find a Mapbox workshop in your area
Register for the workshop
Attend the workshop
Complete the workshop exercises

Six other activities

Expand to see all activities and additional details

Show all nine activities

Create a Leaflet Map for a Real-World Project

Show steps

Provides hands-on experience in applying Leaflet to a real-world project, reinforcing skills and knowledge.

Browse courses on Geospatial Analysis

Show steps

Identify a project idea that can benefit from a custom map
Gather and prepare the necessary data
Develop the Leaflet map using the collected data and style it appropriately
Deploy the map and make it accessible to users

Practice Creating Maps with Mapbox

Show steps

Explore how Mapbox can be used to reinforce your foundational knowledge and build out your skills.

Show steps

Create a map from scratch using Mapbox Studio
Add data to your map
Style your map
Export your map

Participate in a Mapbox hackathon

Show steps

Participating in a Mapbox hackathon will allow you to apply your skills to solve real-world problems and showcase your abilities to potential employers.

Show steps

Find a Mapbox hackathon that aligns with your interests
Form a team or work individually
Develop a creative and innovative map-based project
Submit your project and present it to the judges

Build a Web Mapping Application Using OpenLayers

Show steps

Challenges students to apply their skills and knowledge to a larger project, fostering critical thinking and problem-solving.

Browse courses on Web Mapping

Show steps

Define the scope and objectives of the web mapping application
Design the architecture and user interface of the application
Implement core functionalities using OpenLayers
Integrate additional features and data sources
Test and deploy the application for use

Contribute to the Mapbox GL JS open-source project

Show steps

Contributing to the Mapbox GL JS open-source project will give you hands-on experience with the codebase and allow you to make a valuable contribution to the mapping community.

Show steps

Identify a potential contribution, e.g., fixing a bug, adding a feature, improving documentation
Familiarize yourself with the codebase and contribution guidelines
Make changes to the source code
Submit a pull request with your changes

Build a Portfolio of Maps

Show steps

Creates a portfolio of your best work by building on concepts learned in the course.

Show steps