Make Your Own Civic Map

A step-by-step guide to create your own interactive map using open-source civic infrastructure.

This system allows communities, researchers, and collectives to publish maps directly from shared data — without relying on proprietary platforms.

You do not need to be a programmer to maintain the map. You only need to understand how to structure data and edit configuration files.

Before you start (important)

To create a functioning map, you need:

  • A Google account
  • A Google Sheet with location data
  • Access to a web server (local or hosted)

You do not need to write JavaScript or Python logic. You will only edit configuration files.

Step 1 — Prepare your Google Sheet

Your Google Sheet is the source of truth. It is where all map data lives.

  • Each row = one place
  • Each column = one attribute
  • One column must contain coordinates

Coordinates must be written exactly as:

latitude,longitude

Example: 15.56,32.53

Avoid merged cells. Keep the first row as clear column headers.

Step 2 — Clone the open-source repository

Clone the universal civic mapping repository:

https://github.com/kaliaAldin/civicMappingDocumenation

This repository contains:

  • The map frontend
  • The Flask server
  • All configuration files

You are encouraged to copy and reuse this code.

Step 3 — Configure the server (one-time)

The server reads your Google Sheet and exposes it as a data API.

You do not change Python logic.

You must edit:

  • serverside/project_config.json

In this file you define:

  • The Google Sheet ID
  • The sheet tabs to read
  • Which column index means what

If your sheet structure changes, update this file only.

Step 4 — Configure the map (frontend)

The map does not know what your data represents. You tell it through configuration.

You must edit:

  • js/project.config.js

In this file you define:

  • Map center and zoom
  • Which datasets exist
  • Which backend keys they map to
  • Which field contains coordinates
  • How points or circles are rendered
  • What text appears in popups

Dataset names here must match what the server returns.

Step 5 — Run and publish

  • Start the Flask server
  • Open the map in a browser
  • Edit the Google Sheet to update the map

No redeployment is needed after setup.

What you should not change

  • Do not edit map rendering logic
  • Do not edit data adapters
  • Do not hardcode meanings in JavaScript

Stability comes from shared infrastructure. Flexibility comes from configuration.

If something does not appear

  • Check that dataset names match exactly
  • Check that coordinate fields exist
  • Open the browser console for errors
  • Open the /data URL directly