🌍 Master in Geography · Practical Course

Build Geo Apps
with Vibe Coding

No deep programming required — describe what you want, iterate with AI, ship a real geography application.

✓ No coding experience needed ✓ Map & spatial data apps ✓ Free platforms available
↓ scroll to start
01 — CONCEPT

What is Vibe Coding?

The term was coined by AI researcher Andrej Karpathy in 2025: you describe your app idea in plain language, let AI write the code, then keep prompting to fix and improve it. You never write code manually — you direct the AI like a film director.

For geographers, this is revolutionary. You can build interactive maps, spatial analysis dashboards, flood monitoring systems, or LULC classification tools — without knowing JavaScript or Python.

🗣️

You Describe

Write what you want in natural language. "Build a map showing population density by commune in Morocco with a color gradient."

🤖

AI Codes

The AI generates complete, working HTML/CSS/JavaScript or Python code. It handles the syntax, libraries, and logic.

🔁

You Iterate

Something doesn't look right? Just say "change the color to blue" or "add a search bar" — the AI refines instantly.

🚀

You Ship

Deploy your app with one click. Share a URL with your professor, community, or publish as supplementary material for your thesis.

💡

Geography Superpower: You already have the hardest skill — spatial thinking. You understand what data matters, what the map should show, and what decisions it should support. Vibe coding just removes the syntax barrier.

02 — TOOLS

Which Platform
Should You Use?

Different tools for different needs. Here are the best options for geography students, ranked by suitability for spatial/mapping apps.

Google AI Studio
aistudio.google.com

Google's browser-based AI development environment. Full Gemini integration, built-in code execution, free hosting & deployment, and one-click share. The best free option for geography students — no installation, no credit card, works directly in your browser.

100% Free Map apps Gemini 2.0
Claude.ai
claude.ai

Best companion tool alongside Google AI Studio. Use it to design your prompts, generate complete HTML/JS files, analyze spatial data, and debug errors. Paste the output directly into Google AI Studio.

Free tier HTML/JS Anthropic
Bolt.new
bolt.new

Alternative AI coding platform. Full browser IDE, runs Node.js apps, deploys instantly. Good if you need additional sandbox environments.

Free tier Node.js AI-powered
Lovable
lovable.dev

Best for polished React UIs. Great for thesis presentation dashboards. Use it when you want a more refined visual result than a quick HTML prototype.

Free tier React AI-powered
Replit
replit.com

Best for Python-based GIS apps. Supports GeoPandas, Folium, and Rasterio directly in the browser — ideal for raster analysis and spatial statistics.

Free tier Python/GIS AI Agent
Cursor
cursor.com

VS Code desktop app with AI. Best for students who want to learn coding alongside AI. Works great with QGIS Python plugins and local data.

Free tier All languages AI-powered
🔥

Recommended path for geography students: Use Claude.ai to craft and refine your prompt → paste the generated code into Google AI Studio to build, test, and customize → deploy with one click (built-in hosting). You get a live URL in under 30 minutes, completely free.

03 — PROCESS

The Vibe Coding
Workflow

Follow this 5-step loop for every app you build. The key is that you never stop iterating — each prompt is a refinement.

01

Define Your Geography Problem

Before touching any tool, write a 3–5 sentence description of: What geographic question does this app answer? Who are the users? What data will it use? What should a user be able to do?

02

Write Your First "Master Prompt"

Use the ROLE → GOAL → DATA → UI → TECH → OUTPUT structure (see below). Be specific about map libraries (Leaflet, Mapbox, Google Maps), data sources (OpenStreetMap, ERA5, GEE), and visual style.

03

Evaluate the Output

Don't run the code blindly. Test it in the browser preview. Ask yourself: Does the map load? Is the data correct? Does the UI make sense? What's missing?

04

Iterate with Specific Fix Prompts

Write short, specific follow-up prompts. "The map is not centering on Morocco, fix it." or "Add a legend with 5 color classes for population density." Each prompt does ONE thing.

05

Deploy & Share

In Google AI Studio, click the "Deploy" button or share your project — you get a free your-app.web.app (or similar) URL instantly. Share the URL with your professor or embed it in your thesis as an interactive supplementary figure.

✨ GOOGLE AI STUDIO — QUICK START GUIDE
  1. 1. Go to aistudio.google.com and sign in with your Google account (free)
  2. 2. Click "Create new" → select "Chat prompt" or "System instructions" for code generation
  3. 3. Paste your master prompt into the chat — Gemini will generate the complete HTML/CSS/JS
  4. 4. Click "Run" or "Preview" to see your map live inside the platform
  5. 5. Keep prompting to iterate — add new features, fix map layers, refine design
  6. 6. When ready, click "Deploy" → get a free public your-project.web.app URL — share it with anyone
PROMPT ANATOMY

The Master Prompt Structure

A good first prompt has 6 components. The more specific you are, the better the result.

⬡ PROMPT COMPONENT BREAKDOWN
ROLE
Tell the AI who you are and what expertise it should assume. "Act as a GIS developer specialized in web mapping applications."
GOAL
State the app's purpose clearly. "Build an interactive dashboard that visualizes air quality index across Moroccan cities."
DATA
Specify the data source. "Use OpenAQ API for real-time PM2.5 data" or "Use this sample GeoJSON I'll paste below."
UI
Describe the interface. "Show a Leaflet map on the left, a time-series chart on the right, and a city filter dropdown at the top."
TECH
Name the technologies. "Use pure HTML, CSS, JavaScript with Leaflet.js for the map and Chart.js for graphs. No frameworks."
OUTPUT
Request the format. "Give me a single self-contained HTML file that I can open directly in a browser with no build steps."
04 — BUILD IT

Practical Example:
Urban Heat Island App

We'll build a complete web app that visualizes Urban Heat Island (UHI) effect across a city using satellite data. Follow the exact prompts below in Google AI Studio or Claude.ai.

📋 Copy this prompt exactly into Google AI Studio or Claude.ai

INITIAL BUILD PROMPT
Act as an expert GIS web developer. Build a web application that visualizes Urban Heat Island (UHI) effect across Marrakech, Morocco. Use sample mock data (you generate it): a grid of 20x20 points covering Marrakech's bounding box (lat: 31.55–31.70, lng: -8.05–-7.90), each with a temperature value in Celsius ranging from 28°C (parks/vegetation) to 42°C (dense urban core). The interface should have: - A full-screen Leaflet.js map centered on Marrakech - A heatmap layer using Leaflet.heat plugin showing temperature intensity - A legend in the bottom-right corner with a color gradient (blue=cool, red=hot) - A top bar with the title "Marrakech Urban Heat Island Monitor" - A sidebar showing: average temperature, hottest zone, coolest zone - A toggle button to switch between heatmap and dot marker views Use plain HTML, CSS (dark theme), JavaScript with Leaflet.js (CDN), Leaflet.heat plugin (CDN), and Chart.js for any charts. No npm, no frameworks. Output: a single self-contained index.html file I can open directly in my browser.
🎯

What to expect: The AI will generate a complete HTML file with a working Leaflet map, heatmap layer, and sidebar. Open it in your browser. It should show a heat island pattern over Marrakech immediately.

📋 After reviewing Prompt 1's output, send this follow-up

ITERATION PROMPT — REAL DATA ROUND 2
Great. Now improve the data layer: 1. Add a neighborhood selector dropdown with these Marrakech districts: Medina, Guéliz, Hivernage, Mellah, Daoudiate, Ménara 2. When a district is selected, zoom the map to that district and highlight it with a polygon boundary (generate approximate coordinates for each) 3. Add a simulated "time of day" slider (6am → 12pm → 6pm → 12am) that adjusts temperatures — temperatures should peak at 2pm and be lowest at 6am 4. Show a small line chart below the sidebar showing temperature variation over 24h for the currently selected district Keep the same single HTML file structure.

📋 Polish the visual design

ITERATION PROMPT — DESIGN POLISH ROUND 3
Redesign the visual style completely: 1. Dark theme: background #0d1117, surface #161b22, accent color #e8a940 (amber) 2. Header: full-width dark header with the title in a monospace font, a subtitle "Satellite-derived land surface temperature", and a live timestamp 3. Sidebar: make it collapsible with a hamburger button 4. Add subtle CSS grid lines in the background (see topographic map aesthetic) 5. All buttons should have hover animations 6. Add a loading spinner that shows for 1.5 seconds when the page loads, then fades out 7. Make it fully responsive — on mobile, the sidebar should stack below the map 8. Add a "Download Data as CSV" button that exports the temperature grid as a CSV file The app should look professional enough to present in a scientific conference.

📋 Final touches before sharing

DEPLOY PREP PROMPT FINAL
Prepare this app for academic publication and sharing: 1. Add a proper HTML meta description: "Interactive Urban Heat Island visualization for Marrakech, Morocco. Built with Leaflet.js using simulated Landsat-8 derived LST data." 2. Add an "About" modal popup (triggered by an info button) that explains: - What UHI is (2 sentences) - What data source would be used in production (Landsat 8 Band 10, Google Earth Engine) - How to cite this tool (include your name as author) 3. Add OpenGraph meta tags so the URL shows a preview when shared on social media 4. Add a footer: "Built with Vibe Coding · Geography Master Program · [Your University]" 5. Ensure the page title is: "UHI Monitor — Marrakech | [Your Name]" Final output: production-ready single HTML file.
🚀

Deploy in 60 seconds: In Google AI Studio, click the Deploy button (or share via the built-in hosting) — you'll get a live your-project.web.app URL instantly, completely free with your Google account. No credit card, no hosting limits for static apps.

Common Fix Prompts for Map Apps

When something doesn't work, use these targeted prompts:

PROBLEM FIX PROMPT
Map doesn't load → "The Leaflet map is showing a grey box. Make sure the map div has an explicit height (e.g. 100vh) and Leaflet CSS is loaded from CDN."
Wrong map center → "Re-center the map to [City Name] at coordinates [lat, lng] with zoom level 12."
Data not showing → "The API call is failing. Switch to using hardcoded sample data for now so the UI works without network access."
Colors look wrong → "Replace the current color scale with a diverging blue-white-red scale: blue for values below 30, white for 35, red for above 40."
Not mobile-friendly → "Make the layout fully responsive. On screens below 768px, stack all elements vertically and hide the sidebar by default."
Performance issue → "The heatmap is slow with 10,000 points. Cluster nearby points using Leaflet.markercluster for better performance."
05 — GEO STRATEGIES

Tips Specific to
Geography Apps

These prompting strategies are tailored for spatial data, GIS workflows, and academic geography contexts.

📡 Name Your Data Sources

Always specify exact data sources: "Use OpenStreetMap via Leaflet", "Use ERA5 reanalysis data", "Use Sentinel-2 imagery from GEE". The AI knows these APIs and can write correct integration code.

🗺️ Specify Your Coordinate System

Say "Use WGS84 (EPSG:4326)" or "The data is in Lambert Conformal Conic, reproject to Web Mercator before displaying." Vague coordinate info leads to maps in the wrong place.

📊 Ask for Academic-Grade Viz

Prompt: "The map should follow cartographic conventions: proper north arrow, scale bar, data source attribution, and projection label." This turns a toy into a publication-ready figure.

🔗 Paste Your GeoJSON Directly

Export a shapefile from QGIS as GeoJSON, then paste it directly into your prompt: "Use this GeoJSON for the study area boundaries: [paste here]". The AI will render it perfectly.

🐍 Python for Heavy Analysis

For raster processing, use Google AI Studio's built-in code execution or combine with Replit: ask Gemini "Set up a Python environment with GeoPandas, Rasterio, and Folium."

🏛️ Cite Your AI Assistance

In your thesis, add: "The web application was developed using AI-assisted vibe coding (Google AI Studio + Gemini AI / Anthropic Claude, 2025) with iterative natural language prompts specifying spatial data integration requirements."

PROJECT IDEAS

10 Apps You Can Build This Semester

06 — TEMPLATE

Copy-Paste Prompt
Template for Geo Apps

Fill in the [brackets] and paste into any AI platform. This structure works for 90% of geography app scenarios.

⬡ GEOGRAPHY APP MASTER PROMPT TEMPLATE — fill in [brackets]
# ROLE Act as an expert GIS web developer and cartographer. # GOAL Build [a web app / dashboard / map / tool] that [main purpose in one sentence]. This app is for [target users: urban planners / researchers / the public / local government]. # GEOGRAPHIC SCOPE Study area: [city/region/country] Bounding box: lat [min_lat]–[max_lat], lng [min_lng]–[max_lng] Coordinate system: WGS84 (EPSG:4326) # DATA Data source: [OpenStreetMap / ERA5 / OpenAQ API / GeoJSON I will paste / sample mock data you generate] Key variables: [list the data fields: e.g. temperature in °C, population count, NDVI value] # UI COMPONENTS The interface must include: - Map: [Leaflet / Mapbox / Google Maps] centered on [city], zoom level [10–14] - Layer: [choropleth / heatmap / marker clusters / polylines / polygons] - Chart: [time series / bar chart / histogram] using Chart.js - Filter: [dropdown / slider / date picker] for [variable to filter] - Legend: with color scale and units - Info panel: summary statistics (min, max, average, count) # CARTOGRAPHIC STANDARDS Include: north arrow, scale bar, data source attribution, projection label. Color scheme: [sequential blue-red / diverging / categorical / terrain] Theme: [dark / light / satellite basemap] # TECHNICAL CONSTRAINTS - Output format: Single self-contained HTML file (no build step) - Libraries via CDN only: Leaflet.js, Chart.js, [others if needed] - No backend required — all data embedded or fetched from public APIs - Mobile responsive # ACADEMIC METADATA Author: [Your Name] Institution: [Your University] Course: [Course Name] Add an "About" modal with data sources and methodology.