Mobile GIS data collection apps with Leaflet and PostGIS

Get started by building a basic mobile data collection app using generic mobile files, leaflet, bootstrap, and a CSS file, optimized for touch devices.

Initialize a mobile-friendly leaflet map using a document-ready script, set a Mexico City location, and configure base layers, controls, and measurement tools for GIS data collection.

Add center crosshairs to the Leaflet map for precise mobile location selection, overlaying a Font Awesome icon with absolute positioning and responsive centering.

Build a responsive five-button footer with bootstrap button groups, center it with CSS, replace text with icons, and plan event handlers to toggle overlay screens over the map.

Add event handlers for control buttons to toggle sub screens (info, points, layers, settings) using a single open_up_screen function and jQuery show/hide techniques.

Use Leaflet's locate method to center the map on the device location. Handle location found and error events, display a latlong marker with accuracy radius, and refresh with set interval.

Demonstrates going live by uploading mobile GIS app to a server with SSL certificate, enabling secure origins, and showing login and access to lecture 10 via a home screen app.

Turn auto locate on and off from the settings screen to control location updates. Implement a toggle button that uses setInterval and clearInterval to start or stop locating, default off.

Add a slider to set the auto-location interval, display its value, and restart the timer on change; refactor into start and stop functions for cleaner, programmable control.

Add a breadcrumb trail by placing timed markers on a map, controlled by an on/off button and a five to sixty second interval slider, using a breadcrumbs layer for markers.

Clean up and test the breadcrumb trail by making it green while the blue current-location marker stays visible. Adjust radius using accuracy with min and max and test on mobile.

Build an information screen that shows current position data—latitude, longitude, altitude, accuracy, and time since the last fix—updating at a set interval, with direction, speed, and climb from consecutive fixes.

Build an info screen that shows the current position and the previous position, updates time since the last fix every second, and syncs with breadcrumbs interval for distance and velocity.

Explore how the info screen tracks current and previous positions every five seconds, computing distance, altitude difference, bearing, speed, and time difference to reveal rates on a mobile GIS map.

Add an accuracy filter to filter out points that fail a selected accuracy threshold, controlled by a toggle and a 5–50 meter slider with default 30, affecting breadcrumbs and positions.

Implement an accuracy filter to gate location updates and update breadcrumbs and markers. Display current accuracy and time since last fix on the map while filtering.

Learn to add and manage breadcrumbs on a Leaflet map by toggling their display with a layer control, and binding informative popups showing id, creation time, and accuracy.

Learn to list breadcrumb points by populating a dynamic table from the breadcrumb layer, auto-refreshing on each new breadcrumb, with bootstrap-styled formatting.

Learn to calculate distance and bearing between consecutive breadcrumb points in a Leaflet-based mobile GIS app using previous and current lat/long.

Summarize breadcrumb distances by calculating a running total in a table, styling the header, and adding a clear breadcrumbs button with a jQuery handler and local storage for settings.

Persist user preferences by building a JavaScript object of settings (auto locate, breadcrumbs, filter, slider) and storing it in local storage on every change, then restore on map initialization.

Retrieve and apply saved map settings from local storage on first map load, parse json, and initialize auto locate, sliders, breadcrumbs, and filters to restore the user’s preferences.

This live test demonstrates breadcrumb trails, distance calculations, bearing changes, and altitude considerations as the app tracks location and fixes in a park, with UI timing and reset behavior.

Learn to load generic points for a mobile GIS app, filtering by the current user with a created by clause, using Leaflet and PostGIS.

Create and populate generic layers—points, lines, and polygons—by assigning the created by field, then test multi-user access and popup displays in Leaflet maps.

Extend the generic data loading from points to lines and polygons, filtering by user, implementing per-feature processing, popups, and styling for targeted items.

Populate the layers subscreen by adding event handlers to add, list, refresh, and download icons, then test by refreshing data and viewing the feature list.

Populate the features list from a project-specific bhp script and use data attributes with jQuery event handlers to search, navigate, edit, or delete features.

Replace the search alert with a find feature function that uses AJAX to fetch the feature by table and id, parse the response, and pan the map to it.

Continue refining the search function in leaflet by styling the search layer, rendering point features as tomato circle markers, removing existing layers, and centering the map on results.

Create a reusable data collection form as a sub screen, handling generic point, line, and polygon types with id, name, and comments fields and coordinates, wired to the database.

Collect point data by inserting records into the post database, using manual latitude and longitude or the current location button, with simple event handlers to submit the form.

Submit point data to PostGIS by using a generic insert workflow that gathers form data, builds a geometry object from GPS latitude and longitude, validates inputs, and refreshes the map.

Learn how to collect map points in a mobile GIS app using multiple methods to obtain coordinates, including context menu long-press, center-screen crosshairs, and timestamped records with Leaflet and PostGIS.

Explore collecting points in a Leaflet and PostGIS mobile GIS app using crosshairs and center-screen capture, with buttons for GPA, average, and screen point that update latitude and longitude fields.

Learn to collect a GPS point by averaging locations over a set period, using a one-minute countdown, a Leaflet LatLng array, and UI safeguards during averaging.

Implement gps averaging by summing latitude and longitude values from a readings array and computing their average each second to update the displayed coordinates.

Enable a confirmation dialog for long-press point creation to prevent accidental database entries, while refining Bootstrap and CSS layout for padding, margins, and slider width on mobile.

Demonstrate averaging locations using a mobile GIS app, capture points with screen capture when needed, and save named points to the database, noting six decimal places for higher accuracy.

Enable streaming mode to record lines and polygons by collecting points at intervals as vertices, building a line or polygon, and saving stream interval settings in local storage for submission.

Set up and manage stream controls to collect vertices for lines and polygons, switching between stream and vertex modes, and updating user interface elements like text areas and buttons.

Learn to enable streaming collection of line vertices by starting and stopping streams, adding red vertex markers with timestamps to a vertex layer, and managing end-of-stream behavior.

Convert the points in lyrVertices to a geojson line or polygon as a DOJ mindstream object, then populate and insert it into the database, handling line strings and closed polygons.

This lecture shows submitting lines and polygons to the database by generalizing the insert function for multiple geometry types, streaming vertex data, updating layers, and debugging common shape errors.

Learn to collect lines and polygons in Virtex mode by using streaming and crosshairs to add vertices and manage vertex layers in a mobile GIS app.

Compare streaming mode and Virtex mode for collecting lines, showing how streaming yields zigzags and gaps while Virtex mode yields straighter lines and more compact data.

View and manage vertex points for line data by switching the display from breadcrumbs to layer vertices, update the header to reflect vertex points, and show vertices across collection modes.

Add a cancel button to stop streaming and clear vertices, then delete features with a delete record function that refreshes the point, line, or polygon table and asks for confirmation.

Enable editing a feature by loading its id and attributes into the form, then update records for points, lines, and polygons in the database.

Learn to navigate to a specific feature by creating a navigation target and a dotted navigation line from your current location, while displaying distance and direction in navigation mode.