Web GIS development course

Explore how CSS styles web pages by changing fonts, colors, and backgrounds, and learn the three approaches—inline, internal, and external CSS—while preferring external CSS for easier sharing and clearer code.

Explore how to apply CSS inline with style attributes, use internal CSS via style tags, and connect external stylesheets, including fonts from Google fonts, to control color, layout, and borders.

Explore the CSS box model by building a card with a box, heading, and body, and center it with margin auto, width, and min-width alongside padding, border, and text alignment.

Learn to use bootstrap to create beautiful, responsive web interfaces with predefined CSS, via CDN or download, including containers, navbars, alerts, and forms.

Explore Bootstrap's flexbox-based grid system and a 12-column layout with rows and columns that create responsive, equal-width blocks, stack on mobile, scale on desktop, with offsets and nested rows.

Explore bootstrap forms and grid layouts to build beautiful, responsive user interfaces. Structure forms with rows, columns, form groups, and controls, and implement dropdowns, radios, email fields, and modals.

Learn how JavaScript drives interactive web pages, from embedding scripts in HTML or using separate files to using the console, variables, data types, and global versus local scope.

Master JavaScript operators—arithmetic, assignment, comparison, logical, type, and string concatenation—through practical examples with variables and console logs.

Explore how JavaScript arrays store mixed data, access elements by index, and manipulate data with push, pop, unshift, shift, splice, join, and concat in web GIS development.

Learn how objects store data as key-value pairs with curly braces, access properties via dot or bracket notation, and add, delete, or extract values and keys for use with arrays.

Explore how to implement conditional logic in JavaScript using if, else, and else if, including comparisons, nested conditions, and priority rules, with practical examples.

Explore loops in JavaScript using for and while constructs to iterate over an array of cars, check fuel, and apply break and continue to control flow.

Explore how the DOM and BOM empower JavaScript to access and manipulate HTML elements, respond to browser size, and style pages with selectors, IDs, classes, and tag names.

Explore how to define and call functions in JavaScript, pass parameters, and return results. Learn to manipulate the dom with innerHTML and innerText to display outputs on the page.

Reinforce your HTML, CSS, Bootstrap, and JavaScript skills, take a break to revise these technologies, and tackle practical challenges like building portfolio websites before diving into OpenLayers.

Set up a modular web GIS project using OpenLayers by organizing assets, building index.html, main.js, and style.css, and implementing a base map with a view, center, and zoom.

Learn how to access map view properties in OpenLayers, set the center and zoom, and switch projections between EPSG 3857, 4326, and 32643 using Proj4 and epsg.io definitions.

Explore visualising raster layers in OpenLayers by adding base maps like OpenStreetMap and Stamen variants, integrating static images and tile or image layers, and using WMS for GeoServer data.

Visualize vector layers by importing geojson data into an OpenLayers map and styling features with stroke and fill; explore heat maps and graticule grids.

Explore map interactions in web gis development using OpenLayers drag box, drag and drop vector data, and draw tools to capture coordinates and extents.

Learn to add and customize map controls in a web GIS project by moving the zoom slider and positioning controls at the top right, using font awesome icons.

Explore how to create and integrate custom controls in OpenLayers, including a rotate north button and a draw interaction to add lines, manage map rotation, and ui placement.

Explore how GeoServer serves vector and raster data, manage stores, workspaces, and layers, and publish formats such as GeoTIFF, GeoJSON, and WMS/WFS, with practical previews and styling.

Set up a workspace and stores, add shapefile layers, and publish them in Geoserver. Style polygon layers, manage SRS like 4326, and preview layers with WFS and GeoJSON.

Explore how geoserver advanced styling uses the zoom property and min/max scale denominators to display or hide districts, with Qgis assisting value determination and explicit rule settings.

Learn to configure roles in GeoServer to control data access across public and private layers, using workspaces and stores, with wfs service rules for download permissions.

Learn to integrate Geoserver WMS layers into OpenLayers by configuring tile sources, choosing tile or image layers, and retrieving feature data with get feature info URL in GeoJSON format.

Learn how to add a vector layer from Geoserver using a GeoJSON WFS URL, and speed up loading with an extent-based box strategy in OpenLayers.

Explore database fundamentals for web GIS development: relational Postgres with PostGIS, SQL queries, DBMS concepts, NoSQL comparisons, data integrity, indexing, and installation steps.

Explore basic PostgreSQL operations in pgadmin, including creating databases and tables. Define columns and data types, including primary key, not null, and perform insert, select, update, and delete with conditions.

Learn how to copy data between tables, update fields based on join conditions, create and enforce foreign keys, and write nested queries in Postgres for web GIS development.

Learn to set up PostGIS on Postgres, enable the extension, and import spatial data from shapefiles and geojson using QGIS or command line, with CRS and indexing.

Explore PostGIS queries to filter data by location, using point in polygon, buffer, transform, and spatial functions to find cities within countries, convert coordinates, and compute area and distance.

Install and configure Xampp to run PHP and Postgres locally, start Apache, enable pgsql, and create a project folder to host front-end and back-end code on localhost.

Understand Ajax and the XML http request for asynchronous front-end data exchange without refreshing the page, including onload, onreadystatechange, statuses, and Json parsing.

Connect front end to a Postgres database via a PHP Ajax get request on zamp server, render geojson city data on OpenLayers map as a vector layer in 3857 projection.

Learn how to implement a PHP AJAX post request to save new city features on a map, sending coordinates and name to a PostgreSQL database with OpenLayers and Bootstrap.

Leaflet provides a lightweight JavaScript API to add maps, markers, popups, and base maps with epsg 4326 coordinates; compare it with OpenLayers and explore plugins and geojson integration.

Master Leaflet markers, popups, and tooltips with draggable markers, geojson data, custom icons, popup anchors, and HTML content for interactive maps.