Mobile GIS and Mapping Applications with Leaflet

Name: Mobile GIS and Mapping Applications with Leaflet
Rating: 4.6 (85 reviews)

Take your applications outside, with or without connectivity

Highest Rated

Created byMichael Miller

Last updated 11/2019

English

What you'll learn

Students will learn to format web mapping applications to deal with small screens, touch screens, and screens of varying sizes. They will also learn how to take advantage of the GPS sensor on mobile devices, store data on board, create an application cache so the application can be loaded off-line, and create custom base maps that can be used off-line.

Course content

4 sections • 21 lectures • 3h 59m total length

Introduction8:22
Develop a cross-device web mapping app using Leaflet for mobile and desktop. Learn to handle offline access, elevation data, and aid-station information along a 100-mile course.
Considerations for mobile applications5:20
Adapt a web mapping app for mobile by handling small screens, touch interactions, and responsive design with CSS. Leverage GPS, offline storage, and tile caching to work with limited connectivity.
Making adjustments for mobile use - Part 114:56
Learn to optimize a Leaflet web app for mobile with viewport meta tags, mobile web app capabilities, and a separate mobile page, plus testing with the device toolbar.
Making adjustments for mobile use - Part 214:37
Increase button and icon sizes, adjust font sizes and padding for mobile, and apply responsive CSS with media queries to keep the sidebar usable on phones and tablets.
Detecting a mobile user7:39
Detect mobile devices by inspecting navigator.userAgent with a regular expression, wrap the check in isMobile, and redirect to the mobile page, optionally using confirm to load the desktop site.
Project Review14:01
Explore how the project integrates Leaflet maps, elevation charts, and vector layers. Understand data loading, station handling, and interactive controls for mobile GIS applications.

Geolocation in Leaflet - Part 16:35
Learn geolocation in Leaflet by using the map locate method, handling location found and location error events, and configuring options like watch, set view, timeout, and high accuracy.
Geolocation in Leaflet - Part 210:49
Set up a 60-second interval to call the map locate method in Leaflet, update the position and accuracy in the UI, handle errors, and reflect status with color changes.
Controlling the location frequency16:04
Explore how to add a user controlled interval slider to a mobile GIS app using Leaflet, JavaScript, and DOM events to adjust location polling and display current interval.
Customizing the Elevation Profile8:23
Learn to compute the minimum and maximum elevations between two points along a trail, adjust the y axis for a 20-mile window, and update the elevation profile during zoom.

Moving off-line8:31
Discover offline capabilities for a mobile GIS web app by storing data on device with web storage and IndexedDB, using offline APIs, and caching base maps.
Storing data locally on the device17:38
Store map data locally, including leaf layers and elevation data, using local storage; load from storage when available, refresh from the server when needed, and persist the position interval setting.
Storing your application locally on the device - Part 18:37
Use the application cache API and manifest to cache files for offline access, while noting limitations and the eventual shift to service workers.
Storing your application locally on a device - Part 214:51
Learn to cache your application on a local device, manage the manifest and update the application cache, then test offline behavior with browser tools and an online status check.
The Application Cache API and JavaScript17:48
Explore the application cache interface with JavaScript to monitor status, respond to events, handle manifest updates, and swap caches for a seamless offline experience.
Creating custom base maps in QGIS10:02
Explore loading base maps offline with MBTiles in a single sqlite-like file, using a Leaflet plugin and QGIS to create zoomed tiles for local areas, including topographic and aerial layers.
Adding custom base maps to your local device13:00
Learn how to add custom base maps to a local device using the Leaflet tile layer MBTiles plugin, and cache them in the app for offline use.

Installing the XAMPP package and Brackets text editor14:14
Install the XAMPP package and Brackets text editor to set up a local web development environment, and learn the Apache web server, MySQL/MariaDB, and PHP components accessible via localhost.
Anatomy of a URL3:45
Explore the anatomy of a url by breaking down the protocol, host name, domain, and file path, and learn how localhost testing leads to public hosting.
Creating a custom Icon for your app.7:38
Create an app icon by cropping topographic map image to a 196 by 196 circle with a transparent background, and declare it as the shortcut icon, updating the cache manifest.
Bonus Lecture: How to get the most from my series of Udemy courses.16:16
Explore the economics of Udemy courses, including pricing, discounts, coupons, and sales. Understand the instructor's philosophy on value, ratings, and creating geospatial gis content for professionals.

Requirements

This course builds on the knowledge learned in two previous courses "Introduction to Web Programming for GIS Applications" and "Display and Analyze GIS Applications on the Web with Leaflet". If you are familiar with leaflet and with JavaScript, you may be able to follow without having taken the pre-requisites but that level of knowledge will be assumed.

Description

This course is focused on designing web-based mapping applications for mobile devices. I start with an example of a desktop app showing the course of a trail ultramaraton with aid stations, elevation profiles, etc. Then we modify some formatting to deal with issues arising from small screens, add the ability to track the user automatically with the devices GPS, and add the ability to use it off-line in all situations.

Who this course is for:

GIS analysts and/or web developers who are interested in learning how to create web applications that are designed for mobile devices and take advantage of the capabilities of those devices.

Mobile GIS and Mapping Applications with Leaflet

What you'll learn

Explore related topics

Course content

Introduction6 lectures • 1hr 5min

Geolocation4 lectures • 42min

Making your app available off-line7 lectures • 1hr 30min

Bonus Lectures4 lectures • 42min

Requirements

Description

Who this course is for: