Web GIS development course

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 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.

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.

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 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.

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 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.

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.