Intro to Web Development for GIS and Mapping

Explore HTML, CSS, and JavaScript JS, and practice inspecting pages with browser dev tools to view source and understand the document tree and nested elements.

Use dev tools to edit HTML live, delete elements, and see a browser render a page copy while the original stays on the server; learn divs, p, a, ul, li.

Set up CodeSandbox to practice HTML, explore a browser-based sandbox environment, and learn by pasting code, inspecting elements, and creating a simple static sandbox project.

Learn html syntax and structure by using tags and elements like html, head, body, h1, p, div, and button, and understand opening, closing, and nesting to organize content.

Explore HTML attributes and self-closing tags, learning how anchors use href, images use src, and inputs use type and self-closing syntax to build a calculator interface.

Explore building a basic calculator in HTML by structuring with divs, inputs, and buttons; compare layouts from real examples and plan CSS styling and eventual JavaScript behavior.

Explore how CSS works with HTML to style elements. Use style tags, dot for classes, and hash for IDs to target rules for background, color, and text alignment.

Learn core CSS concepts such as margin and padding, width and height with pixels and percentages, and multiple values for padding, plus hex colors and class or id selectors.

Explore modern CSS grid to place divs in columns beside each other, contrast with flexbox and floats, and learn to define grid templates using grid template columns and fr units.

Use dev tools to write and test css live, tweaking font sizes, colors, margins, and padding, then copy the rules into your css file for immediate browser updates.

Design a calculator interface with CSS, practicing font choices, border radius, padding, and grid layout, while learning to look up rules and manage specificity.

Learn to program the web with JavaScript using the console to log, test code in the browser, practice syntax, quotes, and semicolons, and cover core concepts like variables and functions.

Learn to write a JavaScript function, understand camel case naming, work with variables and return values, and use math.random and if statements for conditional logic.

Master variables and scope, including let, const, and var, while exploring math.random and how values are stored. Learn to name variables clearly to avoid bugs as you build a calculator.

Explore JavaScript arrays: what they are, how to create and reference elements with zero-based indexing and array length, and how looping over arrays processes lists of data.

Explore objects as flexible containers of data, using properties and dot notation to access values. Build arrays of objects and nested data to prepare for mapping in JavaScript.

Learn how to pass parameters into JavaScript functions, use variables and scope, and pass information like a random number or zoom level to control maps and output.

Learn how JavaScript interacts with HTML in the browser by targeting the DOM with getElementById, listening for click events, and updating text or input values.

Apply core JavaScript concepts to wire click events, update the text input, and build dynamic listeners with arrays and loops to make a calculator work.

Learn to implement addition in a JavaScript calculator by wiring the add button and using parseInt to sum saved and current values with the equals button.

Organize projects by splitting HTML, CSS, and JavaScript into files, linking them and placing scripts at the end, and using indentation and linters to keep code clean and debuggable.

Debugging for GIS and mapping apps, this lecture covers identifying and fixing bugs from syntax and logic errors to cache issues, using linting tools, dev tools, console logging, and pseudocode.

Discover how to host a website by choosing a domain, selecting hosting, and uploading HTML, CSS, and JavaScript to a public_html folder, using name servers, DNS, and SSL.

Develop and debug web pages using key tools like Google, Stack Overflow, GitHub, and Bootstrap, then implement grid layouts and random elements from an array in JavaScript.

We explore CSS frameworks such as Bootstrap and Bulma to drop in pre-built HTML and CSS components. You learn to build responsive layouts, forms, buttons, modals, and navigation across devices.

Integrate bootstrap by loading the CDN CSS and JavaScript, then apply your script to override styles; explore a nav bar, container, form controls, and bootstrap button classes for colors.

Explore Bootstrap's grid system to build responsive layouts with containers, rows, and columns; customize width, spacing, and buttons using CSS while balancing mobile considerations for mapping.

Master responsive bootstrap layouts by using the 12-column grid and breakpoints (sm, md, lg) to adapt columns from mobile to desktop, with practical testing.

Learn to link internal pages within a website by creating about.html and index.html, using relative and absolute hrefs, and implementing a responsive bootstrap navigation with a hamburger menu.

Learn how JavaScript libraries differ from frameworks and how to plug in tools like Mapbox and date pickers to build interactive GIS maps using open source libraries.

Refactor jQuery code, replace getElementById with concise selectors, and use the ready function to safely update inputs, values, and HTML while exploring checkboxes and scroll-to-top patterns.

Learn to use Chart.js to build bar and line charts via CDN scripts, configure datasets and labels, and troubleshoot loading issues with real-world examples.

Set up your local development environment with a code editor and a dedicated project folder, then create basic web files (index.html, about.html, style.css, script.js) and view them locally.

Publish a local website using cPanel file manager and FTP/SFTP with File Zilla, uploading html, css, and js to public_html and testing in a staging folder.

Explore version control with Git and GitHub to save and merge code across branches. Learn repositories, commits, branches, and pushing, using command line or desktop tools for collaborative web development.

Understand how web maps differ from print maps, with zoom, layers, and popups, and learn tiling, data, and libraries like Leaflet and Map Libra, plus ArcGIS and Mapbox tradeoffs.

Learn how web maps render base maps via tiling and manage raster and vector data with the Web Mercator projection. Master map interactions like panning, zooming, tilting, and rotating.

Explore major mapping libraries for the web, including Google Maps, Leaflet, Mapbox, and MapLibre, highlighting open-source options, access tokens, and when to choose each for interactive maps.

Learn spatial analysis as it applies to mapping data, from points and polygons to grid coloring, visualizations, and using terphogz to derive actionable geographic insights.

Explore online mapping tools like geojson.io for creating GeoJSON data and testing coordinates. Use map shaper to export formats, simplify shapes, and compare ArcGIS and QGIS as desktop options.

Explore how data drives maps, highlighting that data comes before the map and common formats like GeoJSON, shape files, and csvs, plus OpenStreetMaps and Web Mercator projections.

Explore the realities of sourcing and preparing data for web maps, from census block groups to geocoding challenges, and learn to inspect, simplify, and plan for data-driven mapping.

Explore two open-source mapping libraries, Leaflet and Map Libra, to build maps from simple to complex web projects and compare their capabilities, with GitHub code examples.

Learn to create web maps by copying Leaflet and Mapbox HTML snippets, initializing a map with an OpenStreetMap tile layer, and adding a marker, circle, and polygon.

Explore basemaps and tile layers as a raster base for maps, using Leaflet, MapLibre, or Mapbox, and learn about licensing, API keys, and free vs paid options.

Explore the three geometry types—points, lines, and polygons—and learn how to add them to maps using leaflet and maplibre, with a focus on point fundamentals and GeoJSON.

Add points to a Leaflet map using markers and circles, manage latitude longitude order, and configure an options object for color, fill, and radius.

Explore how Leaflet treats lines as a list of points, using polylines and line strings, with coordinate reversal for lat/long order, and adding GeoJSON styled lines.

Master polygons in Leaflet and GeoJSON, including nesting and the rule that the first and last points must match. Add polygons with L.polygon or via GeoJSON and compare to lines.

Explore MapLibre by adding points as markers and as circle layers using GeoJSON sources and layers, including onload setup and using longitude and latitude coordinates with text labels.

Create a Maplibre line by adding a GeoJSON source and a line layer, then style it with line color and width in the paint properties.

Maplibre teaches adding polygons with GeoJSON using a fill layer, setting fill color and fill opacity, and optionally outlining; explore a line string and filters to separate polygons from lines.

Learn how pop ups, or info windows, appear as divs on maps to show information when you click or hover. On mobile, hover doesn't work, so design for click interactions.

Explore Leaflet basic popups, including bind pop up and creating your own popup, with lat long coordinates, HTML content, and options like close button and map click or mouse move.

Leaflet dynamic popups show information tied to specific markers by binding popups, handling mouse over and mouse out events, and using GeoJSON to display marker-specific details.

Explore how MapLibre handles basic and dynamic popups with markers and geojson layers, using set HTML and on click or mouse move events to display coordinates.

Learn to create dynamic MapLibre popups by handling click events, querying rendered features, and displaying a feature name from GeoJSON properties at the click location.

Learn how to set map bounds and bounding boxes to ensure your GIS web maps render correctly on mobile screens using turf, GeoJSON, and fitBounds.

Learn to plan a GIS project: define goals, gather McDonald's per-state data, obtain state GeoJSON, and compare choropleth and popup visualizations with MapLibre or Leaflet.

Convert a Google Sheets CSV to JSON, load it in a JavaScript script via local Python server, and fetch data for mapping McDonald's per state with GeoJSON of US states.

Learn how to associate geographic shape data with per-state McDonald's data by matching on state name, handling asynchronous fetches, and displaying counts in interactive popups on a map.

Visualize geojson polygons by color using mapbox expressions, merging McDonald's state data with US states, and interpolating colors from white to red based on counts.

Fix misformatted data by removing a comma in numbers and correcting state names to enable accurate map visualization; render on a color-coded map and explore views like expressions and APIs.

Explore advanced topics in GIS mapping, from live spreadsheet data loading and spatial analysis to hover effects, heat maps, custom icons, geocoding, and data toggling.

Publish a spreadsheet to the web as csv, load points and polygons into an interactive map, and optionally geocode addresses with nominatim or spreadsheet tools.

Master a basic API call for geocoding using a fetch to OpenStreetMap's Nominatim. Build the URL with a query string and parameters, then parse the GeoJSON from the /search endpoint.

Learn how geolocation locates the user, navigate accuracy limits across devices, and implement MapLibre and Leaflet locate controls via https with set view and zoom options.

Explore hover effects on polygons in leaflet via mouse over events and set style, and implement mapbox/maplibre hover with a layer-based expression and unique feature IDs.

Learn how to add legends to maps using HTML and CSS, positioned as a custom control over Leaflet or MapLibre maps, with divs, colors, and text to explain meanings.

Learn spatial analysis with turf to locate a point 150 km along a highway route from Vancouver to Hope, using Mapbox maps, directions, and GeoJSON workflows.

Animate a marker along a line on maps using leaflet and maplibre, employing turf.js for line length, point extraction, and timed intervals.

Learn how naked maps remove the base map to visualize GeoJSON features like golf courses, using Leaflet without a tile layer and MapLibre with an empty source and transparent background.

Explore heat maps across Map Libra, Mapbox, Leaflet, and Google Maps, using proximity, magnitude-based weighting, color scale, and turf hex grids for earthquake data.

Learn geocoding in web maps by converting addresses into points or bounding boxes, using the Mapbox geocoder plugin with Leaflet, and exploring open-source options like Nominatim.

Explore creating custom markers in Leaflet and MapLibre, defining icons with URLs and sizes, adjusting icon and popup anchors, and using the symbol layer to manage icon sources and layers.

Learn to implement category-based map filters with checkbox toggles, including exclusive and inclusive logic and nested categories, across markers and layers in MapLibre/Mapbox using jQuery.

Learn to add drawing tools to maps with Leaflet Draw and Mapbox GL Draw, capture drawn shapes, and extract GeoJSON coordinates for on-the-fly spatial analysis and measurement.