Creating Custom Web Maps

Name: Creating Custom Web Maps
Rating: 4.4 (192 reviews)

Enhance your Web Application Using Leaflet, Mapbox, or OpenStreetMap

Created byInfinite Skills

Last updated 1/2017

English

What you'll 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

Course content

6 sections • 29 lectures • 2h 2m total length

Important - Download These First - Working Files0:01
Introduction To Web Maps1:48
Discover how web maps provide geographic context with slippy maps and Ajax loading, easily customizable with free open source platforms for office locations and real-time data.
About The Author1:20
Meet Matt Cedar, a front-end developer with a GIS background who explains how he creates interactive web maps using Leaflet, Mapbox, and OpenStreetMap to visualize campus energy data.
History Of Web Maps2:40
Understanding Raster Vs. Vector Data1:49
Explore the differences between raster and vector data in web maps. Raster images are grids of pixels, while vector data uses points, lines, and polygons projected on raster base tiles.

Introduction To Leaflet2:06
Explore Leaflet, a fast, lightweight, open source web mapping library. Learn how its small footprint, cross-browser compatibility, mobile support, and plug-in rich ecosystem enable customizable, performant web maps.
Setting Up Your Project4:32
Setting Up Your First Map - Part 16:25
Setting Up Your First Map - Part 24:12
Add a tile layer as the map’s base with the Open Street Map basic tile service, including required attribution. Center the map and link HTML, CSS, and JavaScript files.

Markers - Part 14:56
Learn to add markers to a leaflet map using latitude and longitude, starting with a single marker and extending to multiple markers with a nested array and a for loop.
Markers - Part 26:07
Bind interactive popups to map markers in Leaflet, customize content with HTML and images, manage markers via an array, and prepare to replace default icons with a custom image.
Markers - Part 34:57
Replace default map markers with custom icons, using the Open Source Macchi park icons in a Leaflet map, and fine-tune icon and popup anchors for precise placement.
Polylines, Polygons, And Circles - Part 14:41
Learn to create polyline, polygons, and circles on maps using latitudes and longitudes with Leaflet, and customize them with color, weight, and other path options.
Polylines, Polygons, And Circles - Part 26:18
Events - Part 13:57
Learn leaflet map events in javascript by binding marker actions such as click and hover, and update an info div with content triggered by those events.
Events - Part 27:58

Overview Of Base Map Tile Services3:11
Explore base map tile services for Leaflet, from Open Street Map vector data to customizable raster tiles, with options from Mapquest, Stayman, Mapbox, or your own server.
Creating A Mapbox Account6:25
Sign up for a Mapbox account, copy your public access token, and switch your map.js to use Mapbox base map tiles and styles.
Custom Base Maps In Mapbox Studio - Part 15:19
Custom Base Maps In Mapbox Studio - Part 22:18

Introduction To OpenStreetMap2:19
Editing OpenStreetMap6:11
Learn how to create an OpenStreetMap account, edit features using satellite imagery, add buildings and roads with anchor points, save with notes, and publish live updates.
Extracting OpenStreetMap Data3:18
Learn to extract open street map data and create a vector layer for leaflet maps by downloading features with josm and saving osm files for use in web maps.
Introduction To QGIS3:25
Explore open source QGIS across Windows, Mac, and Linux, load shapefile vector layers, save projects, and prepare GeoJSON for leaflet web maps.
Filtering And Exporting Data In QGIS5:53
Learn to filter and export selected features in QGIS as GeoJSON for Leaflet, set the correct WGS 84 CRS, and save with a full file path.
Overview Of GeoJSON Format6:01
Explore GeoJSON, an open standard for storing vector features - points, lines, and polygons - in web maps. Learn how coordinates and properties organize data for Leaflet and OpenStreetMap workflows.
Importing Data In Leaflet - Part 17:05
Importing Data In Leaflet - Part 26:27

Requirements

PC or MAC
Working files are included, allowing you to follow along with the author throughout the lessons

Description

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.

Who this course is for:

This course is designed for users that already have experience with building web applications
Web application developers

Creating Custom Web Maps

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 8min

Getting Started4 lectures • 17min

Features And Events7 lectures • 39min

Customizing The Base Map4 lectures • 17min

Adding Geospatial Data8 lectures • 41min

Conclusion1 lecture • 1min

Requirements

Description

Who this course is for: