WebGIS: From Beginner to Advanced

Install jam to create a local web development environment with an Apache server for testing and debugging before deployment, including downloading and launching the latest 64-bit Windows installer.

Install sublime text, set up package control via the command palette, and install key packages—image, file icon, bracket highlighter, and JavaScript/PHP snippets—with Node.js support.

Learn HTML basics, including structure and elements, and how CSS styles and JavaScript adds interactivity, then practice building pages with headings, paragraphs, links, and images using a local server.

Explore HTML basics by building lists, tables, and forms with various input types, including text, email, password, file, and date, plus basic form validation and submit button.

Learn how bootstrap, an external css library, uses a 12-column grid to divide the screen into columns with row and column classes and how to include bootstrap in your project.

Master bootstrap basics for a web portal by creating versatile buttons, implementing alerts for success, info, warning, and danger, and building tables with hover and border styles.

Explore JavaScript basics for WebGIS by practicing variables, arithmetic operations, and logs. Learn to manipulate arrays, objects, loops, conditionals, switches, and simple functions, with DOM manipulation ahead.

Learn what the document object model is and how JavaScript manipulates HTML elements, changing content, styles, and attributes, and adding or removing elements via event listeners and DOM methods.

Learn to build an interactive web page that collects comma-separated numbers, splits and trims input, validates data, converts to decimals with parseFloat, and computes and displays the average using jQuery.

Explore the Leaflet API, including how to set up the page, include CSS and JS, create maps with markers and tooltips, and leverage extensions for rich web mapping.

Initiate a web map with leaflet, create a map div, add an OpenStreetMap base layer, style height with CSS, and center on Dhaka with a chosen zoom.

Learn to add and switch between multiple base maps in a Leaflet web map, using CartoDB Positron, imagery, OpenStreetMap, and Google tile layers, with custom controls.

learn to extend a Leaflet web map with plugins—sidebar, easy button, and a scale bar—by loading their CSS/JS, initializing the controls, and using Font Awesome icons.

Explore adding the polyline measure tool and mouse position control to a Leaflet web map, including plugin integration, position settings, and measuring ground, cumulative, and segment distances.

Learn to add Leaflet Pro draw controls to draw markers, lines, rectangles, polygons, and text, capture draw events to export geojson, and implement a minimap with a topo map layer.

Learn to add zoom and layer controls to a Leaflet map, configure positions, and manage base layers and overlays like Google Maps, OpenStreetMap, Esri imagery, and OpenTopoMap.

Learn the basics of geojson, its structure and features, how to convert shapefiles to geojson, and the advantages and RFC 7946 compliance with the default wgs 84 coordinate system.

Explore the advantages of GeoJSON over shapefile, including readability, a single-file format, and easy web transfer. Validate GeoJSON and enable seamless integration with Leaflet, OpenLayers, and Mapbox for web maps.

Load GeoJSON data into a web map with leaflet's ajax extension, using L.GeoJSON.Ajax to fetch from the data directory and customize point features with pointToLayer, style, and onEachFeature.

Style point features in Leaflet by coloring markers from JSON properties, use circle markers for responsive size, and bind tooltips showing id, type, diameter and location while auto-fitting map bounds.

Load and style line features in Leaflet using GeoJSON data, apply category-based styling for pipelines, and bind tooltips with key properties while leveraging layer controls to toggle overlays.

Load and style polygon buildings in Leaflet with category-based colors. Bind popups to show category, history, location, and account number, and note data cleaning in PostgreSQL later.

Practice attribute queries in Leaflet by adding pipeline and building panels, implementing a find-by-attribute function, and iterating over map layers to match a valve ID against feature properties.

Query and display a map layer's point features by extracting latitude and longitude, rendering a circle marker, and zooming to the feature while showing its properties in an attribute table.

Demonstrates querying and displaying line features by automating valve and pipeline ID selection with autocomplete, converting data to GeoJSON, and styling routes on a Leaflet map.

Explore PostgreSQL and PostGIS as open-source tools for storing and serving spatial data in web maps. Learn about multi-user editing, spatial indexing, and secure access through SQL and privileges.

Set up a local PostgreSQL server, create a database, enable the PostGIS extension, and connect PostgreSQL with QGIS to load and render spatial data.

Learn the basics of SQL and perform create, read, update, and delete operations in PostgreSQL by creating a table, inserting data, and querying records.

Explore reading data with SQL in a hotel list: select all or specific columns, apply filters, order and group results, and compute sums, averages, counts, max, and min.

Learn data cleaning for a WebGIS project by dropping unnecessary columns, renaming tables and fields, and keeping only essential data to improve database size and portal performance.

Clean pipelines and buildings data by removing unused columns and renaming fields. Explore hosting PostgreSQL remotely and connecting to the remote instance with pgAdmin and QGIS, and pushing data.

Discover the benefits of cloud PostgreSQL instances, including always-online access, global reach, secure authentication, and how to connect PgAdmin and QGIS to a remote cloud database.

Create a free cloud-based PostgreSQL instance on IBM, using the latest version 16, in the Asia Pacific region on AWS, and prepare to connect with PgAdmin and QGIS.

Connect a remote PostgreSQL instance to PgAdmin and QGIS, configuring host, port 7007, and a web map database; verify extensions and functions, then load spatial data in the next lecture.

Learn to implement spatial indexing in PostgreSQL using gist, enabling faster data retrieval and efficient spatial queries for large WebGIS datasets.

Explore PHP basics as a backend language for web GIS portals, learning to echo output, declare variables, perform arithmetic, manipulate arrays, use conditionals, loops, and functions.

Explore building a basic php form, sending data with get and post, observing how get exposes values in the url and post secures input via $_GET and $_POST.

Establish a PostgreSQL connection in PHP using PDO, via an init.php file, with try-catch error handling, and include it in scripts to read data from the bulbs table.

Collect data via an HTML form and send it with jQuery Ajax to a PHP endpoint for insertion into PostgreSQL database, with POST requests and success or error handling.

Learn to build PHP server side code to receive AJAX post data, create a PostgreSQL table for user information, and insert first name, last name, email, organization, designation, and nation.

Validate user data before inserting into PostgreSQL by using email as the unique identifier and preventing duplicates. Enable live insert and update in a web portal.

Develop a fully functional webgis portal using server-side technologies to fetch and display data from a PostgreSQL server and allow real-time user data input and updates with leaflet integration.

Load point features from a server and build a feature collection using php and json decode. Send geojson via ajax and prepare it for display with json encode and parse.

Convert server responses into map features by parsing json, handling errors, and rendering GeoJSON with Leaflet, including styling, tooltips, and layer management to avoid duplicates.

Load multi-line and multi-polygon features from a PostgreSQL server as GeoJSON layers on the map, styling pipelines and buildings and displaying fields like diameter and story.

Develop server-side data queries and display results on a web map by querying a database, returning GeoJSON via AJAX, and rendering with Leaflet.

Convert the server response into map elements and display valve attributes on the map by updating the layer with radius, diameter, valve type, and id.

Enable real-time data insertion in the web portal by adding a form-driven interface with HTML, CSS, Bootstrap, and jQuery to manage valves, pipelines, and buildings.

Learn to convert leaflet draw geometry to GeoJSON, extract coordinates for point, line, and polygon features, stringify the geometry, and prepare data for PostGIS storage.

Develop real-time data insertion by building an insert data.php workflow, validating input, converting GeoJSON to Postgres geom with 4326, and instantly updating the map and QGIS.

Enable real-time data syncing in a web map by preventing duplicate valve IDs, inserting new features via ajax, and auto refreshing the map for instant visibility.

Enable real time data insertion for pipelines in a WebGIS app by using Ajax calls to insert pipeline id, category, diameter, location, and geometry, then load pipelines in real time.

Learn to implement real-time data insertion for pipelines and buildings in WebGIS, with refresh actions, field validation, and live updates that reflect immediately.

Develop real-time update options for map features by building a test HTML form with inputs for account number, building category, story, population, and location.

Explore real-time map interactions with bind tooltip and bind popup to display building data and dynamic values, setting up update and delete functionality for the next lecture.

Develop and wire up update and delete button functionality for WebGIS data, with automated input collection and sending a single object to the server via Ajax.

Integrate Sweet Alert into the WebGIS portal to confirm changes, show save or delete prompts, and drive updates with Ajax calls and a delete data PHP script.

Develop real-time update and delete for pipelines in webgis by adapting the building form, with fields like pipe id, diameter, location, category, and length.

Develop real-time update and delete functions for pipelines by implementing server-side update and delete handlers, handling form data, performing SQL updates, and loading pipelines.

Implement CRUD operations for valves in a web GIS portal, including create, read, update, and delete, with fields like valve ID, diameter, location, and visibility.

Develop a filter-driven multi-area view in WebGIS by wiring a home button, passing a DMA id to load data for valves, pipelines, and buildings from PHP endpoints.

Clean building data by standardizing the building category to match the symbology. Update the dataset, correct casing and spacing, and filter multiple areas on the map.