We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Interactive maps with Mapbox!

Victor Temprano

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.

Read more

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.

Enroll now

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

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.

Read more

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?

Understand how geographic data works online

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.

Understand datasets, tilesets, data problems, and Mapbox Classic

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!

Work inside Mapbox Studio

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.

Mapbox GL JS: Coming from Studio

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.

Mapbox GL JS: Layers, other topics

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.

Lines, Fills, Fill Extrusions, Circles

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.

Map Data: Setting Data Dynamically

Good to know

Know what's good
, what to watch for
, 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

Save this course

Save Interactive maps with Mapbox! to your list so you can find it easily later:
Save

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
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
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
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
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
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
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
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
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
Creates a portfolio of your best work by building on concepts learned in the course.
Show steps
  • Choose a theme for your portfolio
  • Create a variety of maps related to your theme
  • Write short descriptions of each map
  • Publish your portfolio online

Career center

Learners who complete Interactive maps with Mapbox! will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Share

Help others find this course page by sharing it with your friends and followers:
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser