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 CSS basics by creating and linking an external stylesheet to HTML, style tables with borders, padding, and hover effects, and explore selectors, classes, and IDs to enhance web pages.

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.

Learn JavaScript basics by building an html page, using the script tag and console.log, and exploring variables (let), strings, numbers, booleans, arrays, objects, null, undefined, and type of values.

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 use jQuery to handle user events and include the library, then build an example that parses comma-separated numbers, filters invalid input and spaces, and computes the average.

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 mapping libraries to build your first web map using Leaflet, Openlayers, and Mapbox, and learn their interactive features, data formats like GeoJSON, and their documentation.

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.

Begin your first web map by creating a project folder and web map html, loading it on localhost, and integrating leaflet with jquery, bootstrap, and jquery ui via CDN links.

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.

Develop and create content in the sidebar by adding information, styling divs and headers with bootstrap classes, and implementing a query function to search features.

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.

Learn to query and display polygon features in a leaflet web map as part of WebGIS, including building layer setup, attribute matching, and configuring polygon styling and sidebar data.

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.

install PostgreSQL on Windows with the 64-bit installer, set a superuser password, use port 5432, and add PostGIS via stack builder guided by PgAdmin 4.

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

Load spatial data into PostgreSQL using GeoJSON, export layers with QGIS and GDAL, and configure geometry types and public schema for SQL querying and mapping.

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 how to update existing data with sql update statements, using where clauses and ids, to set city and country values, and to handle text versus numeric updates.

Learn delete operations in SQL, using delete from hotel list where number of rooms < 15 in Tokyo, no undo, back up data, copy table, and drop table if needed.

Learn essential SQL commands for WebGIS databases, including alter and rename table and column, change data types, drop columns, and perform data cleaning.

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.

Load spatial data from GeoJSON into a remote PostgreSQL instance, export and back up local tables (buildings, pipelines, valves) as plain SQL, and verify data integrity and keys remotely.

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.

Modify and organize the map interface by repositioning zoom, scale, and layer controls; trim drawing tools; tailor Geoman options; and revamp the sidebar with new tabs and Font Awesome icons.

Load point features from a web server using Ajax to load_data.php, replacing local GeoJSON with PostgreSQL-backed data, and implement secure input handling in PHP to prevent SQL injection.

Develop a load data PHP routine to fetch data from a Postgres server, convert geometry to GeoJSON, and convert multipoint to single point for client-ready feature collection.

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.

extend webgis querying by adding layer by attribute searches for pipelines and buildings, converting results to geojson and displaying them with leaflet, including pipeline id and account number.

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.

Learn to process GeoJSON data from QGIS, capture and validate user inputs, and send a real-time Ajax post to insert_data.php for server insertion with status feedback.

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.

Develops a real-time update workflow by sending JSON via Ajax to update_data.php to modify building records, validate duplicate account numbers, and use the hidden building ID.

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.

Learn how to display and filter multiple study areas on a single map portal, set up the home tab, and prepare area data using GeoJSON and PostGIS workflows.

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.