Creating Custom Web Maps

Enhance your Web Application Using Leaflet, Mapbox, or OpenStreetMap

4.55 (186 reviews)

Udemy

platform

English

language

Web Development

What you will learn

Once you have completed this training course, you will have learned how to create your own custom web maps using Leaflet, Mapbox, or OpenStreetMap

Learn how to create your own custom web maps

Why take this course?

In this Creating Custom Web Maps training course, expert author Matt Sidor will teach you how to create custom web maps using Leaflet, Mapbox, or OpenStreetMap. This course is designed for users that already have experience with building web applications.

You will start with an introduction to Leaflet and learning how to set up your first map. From there, Matt will teach you about custom basemaps in Mapbox Studio. This video tutorial also covers OpenStreetMap, including how to edit in OpenStreetMap, extract OpenStreetMap data, and filter and export data in QGIS. Finally, you will learn how to import GeoJSON data in Leaflet.

Once you have completed this computer based training course, you will have learned how to create your own custom web maps using Leaflet, Mapbox, or OpenStreetMap. Working files are included, allowing you to follow along with the author throughout the lessons.

Content

Introduction

Important - Download These First - Working Files

Introduction To Web Maps

About The Author

History Of Web Maps

Understanding Raster Vs. Vector Data

Getting Started

Introduction To Leaflet

Setting Up Your Project

Setting Up Your First Map - Part 1

Setting Up Your First Map - Part 2

Features And Events

Markers - Part 1

Markers - Part 2

Markers - Part 3

Polylines, Polygons, And Circles - Part 1

Polylines, Polygons, And Circles - Part 2

Events - Part 1

Events - Part 2

Customizing The Base Map

Overview Of Base Map Tile Services

Creating A Mapbox Account

Custom Base Maps In Mapbox Studio - Part 1

Custom Base Maps In Mapbox Studio - Part 2

Adding Geospatial Data

Introduction To OpenStreetMap

Editing OpenStreetMap

Extracting OpenStreetMap Data

Introduction To QGIS

Filtering And Exporting Data In QGIS

Overview Of GeoJSON Format

Importing Data In Leaflet - Part 1

Importing Data In Leaflet - Part 2

Conclusion

Wrap Up

Reviews

Praveen

August 5, 2022

excellent work in demonstrating mapbox, leaflet, OSM etc., just that the content is old and some part of the code is not working.

John

June 20, 2021

Exactly the introductory course I needed. I have a good handle on using leaflet.js and will be implementing it in my project.

Hoang

June 7, 2021

fundamental and fast course to create a web map, still, expect to learn more so 4,5 star would be suitable

Patrick

September 11, 2020

This was a great overview of leaflet. Some parts were a bit out of date but a quick google search and it was solved.

Ettore

July 11, 2020

Very easy to understand and very clearly explained, useful especially at the beginning. On the other hand the course is now pretty dated and some passages you will have to search out by yourself, particularly regarding Mapbox.

Edward

April 4, 2020

This may be a bit outdated, but still extremely useful. I put the speed on 1.5 which fit for the instructor and my absorption of the content. It serves as a beautiful overview of Leaflet, Mapbox and the overall concepts of maps on the web. For understanding how the pieces all fit together, and to demo how simple it can be, this is the best place to start. As a side benefit, in going through the course I've filled in a few holes in my knowledge of JS. With simple practical examples, and how he steps through the code to say what does what, it cemented some rather abstract pieces that normal JS courses usually give trivial and hard to follow examples on. Here you learn that as a consequence - a great reason to start here as well if you plan to build any map based apps.

Gina

June 12, 2017

It's a good class. That said, I'm not a developer and I would have liked five or ten minutes discussion about how you start a project when you've never done a map before. Like where will the map be hosted? Shortcuts for adding markers. Etc.

Sam

May 8, 2017

A good (brief) introduction to web maps. Instruction is very clear. Some chapters need to be updated. In particular, Mapbox has changed its Studio from desktop to web application. It's not too hard to apply the concepts to the new software, but you can't help feeling a bit short changed. Would increase rating if some of the videos were updated to reflect this.

Daniel

May 3, 2017

Me and another student named Ryan cannot show the map. Instructor never replied back to Ryan for his question 10 months ago.

Neil

April 29, 2017

I found this course interesting and helpful. The concepts and processes were explained clearly, building on what went before. It is in need of an update: a number of the sites have changed, but it is still possible to follow along with a little hunting. However, the instructor is nowhere to be seen.

Deen

January 11, 2017

A great introduction to Web Maps. Just the basics though. I'll come back and update my review later after I start implementing some of these in my own code.

kris

January 4, 2017

The instructor is very clear. The clarity with which he explains the concepts allows them to come fairly quickly. This is a very brief course, I completed it in one 6 hour sitting.

Marek

January 1, 2017

short but comprehensive course - after that I have some good ideas how to implement my geographical data into my website and where to look for more knowledge

Klaas

August 12, 2016

It's great and easy to follow. It clarifies Leaflet very much. And it gives a sneak preview of other apps (like mapbox, OpenStreetMap, QGIS) for creating GeoJSON. Many thanks.

June 27, 2016

This was a fantastic brief tutorial on Leaflet, Mapbox, and OpenStreetMap. The lecturer gives just enough information to get you going with these tools. Adding additional information on website integration would have been helpful, but it's not totally necessary for the course.

Charts

Price

Rating

Enrollment distribution

Creating Custom Web Maps - Distribution chart