Skip to content

README.md

Latest commit

 

History

History
141 lines (109 loc) · 6.31 KB

README.md

File metadata and controls

141 lines (109 loc) · 6.31 KB
Raw

Zimbabwe National & Provincial Delimitation Maps

Interactive SVG maps of Zimbabwe's 10 provinces with detailed ward boundaries. I created this project demo to showcase the practical use of interactive SVG graphics in websites and web apps. This allowed me to upscale my creative technoligist services to local and some international clients.

View Live Demo: https://hikwamehluli.github.io/Zimbabwe-National-and-Provincial-Delimitation-Maps

Real world examples of websites in Zimbabwe with interactive SVG's:

Features

  • National overview — Zoomable SVG map of all 10 provinces on index.html
  • Coat of arms — Zimbabwe coat of arms logo in the header of every page
  • Per-province pages — Detailed ward boundaries for each province with breadcrumb navigation
  • Pan & zoom — Drag to pan, buttons to zoom in/out/reset
  • Tooltips — Hover over any region to see its name (powered by TippyJS)
  • Touch-friendly — Pinch-to-zoom and pan on mobile

Map index

Page Description
index.html National view — all 10 provinces
bulawayo.html Bulawayo wards
harare.html Harare wards
manicaland.html Manicaland wards
mashonaland-central.html Mashonaland Central wards
mashonaland-east.html Mashonaland East wards
mashonaland-west.html Mashonaland West wards
masvingo.html Masvingo wards
matebeleland-north.html Matabeleland North wards
matebeleland-south.html Matabeleland South wards
midlands.html Midlands wards

Technical stack

  • Pure static site — No build tools required for viewing. Open .html files directly in a browser.
  • SVG maps — All map coordinates are inline <polyline points="..."> in the HTML (no external data files)
  • Libraries (bundled into dist/js/app.js via webpack):
    • svg-pan-zoom — Pan and zoom controls
    • TippyJS — Tooltip popups (includes Popper.js under the hood)
  • Fonts: Roboto + Pliant via Google Fonts
  • Build tools: Sass (SCSS → CSS), Webpack (JS bundling + CSS inlining)

Setup & scripts

npm install
Script Command What it does
npm run css-dev sass --no-source-map --watch src/scss/_entry.scss:dist/css/app.css Compile SCSS → CSS (expanded output, watch mode)
npm run css-prod sass --no-source-map --watch src/scss/_entry.scss:dist/css/app.css --style compressed Compile SCSS → CSS (minified, watch mode)
npm run js-dev webpack --mode development --watch Bundle JS (development mode, watch for changes)
npm run js-prod webpack --mode production --watch Bundle JS (production/minified, watch for changes)
npm run start:public http-server -c-1 Serve files locally at http://localhost:8080 (no caching)
npm run start:root http-server . -c-1 Same as above, explicit . root directory

dependencies: tippy.js (tooltip library)

devDependencies:

Package Purpose
http-server Local dev server with no caching
sass SCSS → CSS compiler
webpack + webpack-cli JS bundler — bundles src/js/_entry.js and its imports into dist/js/app.js
css-loader + style-loader Webpack loaders — inline tippy.js/dist/tippy.css into the JS bundle as <style> tags

JS compilation pipeline

  1. Entry point: src/js/_entry.js
  2. Webpack resolves bare imports (svg-pan-zoom.min.js) from src/js/, and npm imports (tippy.js) from node_modules/
  3. CSS imports (e.g. tippy.js/dist/tippy.css) are inlined into the bundle via style-loader + css-loader
  4. Output: a single dist/js/app.js loaded by all HTML pages

Run npm run js-dev (development, unminified) or npm run js-prod (production, minified).

Project structure

├── index.html              National overview map
├── {province}.html          10 per-province ward maps
├── dist/
│   ├── img/
│   │   └── zimbabwe_coat_of_arms.svg  Logo in every page header
│   ├── js/
│   │   └── app.js           Webpack-bundled JS (tippy.js, svg-pan-zoom + init code)
│   ├── css/
│   │   └── app.css          Compiled SCSS stylesheet
│   └── font/                Custom icon font (interactive-map)
├── src/
│   ├── js/
│   │   ├── _entry.js        Webpack entry point
│   │   └── svg-pan-zoom.min.js
│   └── scss/                SCSS source files
│       ├── _entry.scss      Entry point — imports all partials
│       ├── style.scss       Map colours, layout, typography
│       ├── breadcrumb.scss  Breadcrumb navigation styles
│       └── icons-map.scss   Icon font @font-face + classes
├── webpack.config.js        Webpack bundler configuration
├── package.json             Build scripts, dependencies, devDependencies
└── .gitignore

Styling

Map colours are controlled via CSS custom properties defined in src/scss/style.scss (compiled to dist/css/app.css):

Variable Default Purpose
--bg-color #d1d3be Page background
--color-active #a8a965 Fill colour of regions
--color-hover #5f6035 Hover colour
--color-stroke black Stroke outline colour

Header logo

Every page header displays Zimbabwe's coat of arms (dist/img/zimbabwe_coat_of_arms.svg). The logo sits beside the page <h1> in a CSS grid layout, extending alongside the description and breadcrumb. Styled in src/scss/style.scss:

  • Default: 200px wide, spans the full header height alongside title, description, and breadcrumb
  • Mobile (<600px): 120px wide, stacks centered above the title (single-column grid)
  • Tablet (600–768px): 150px wide

Rebuilding CSS

npm run css-dev    # watch mode, expanded output
npm run css-prod   # watch mode, compressed output

Map Version

Maps are based on the 2022-2023 delimitation exercise.

Contact

If you have any Questions or Need help expanding on this, hit me up!

Website | X Twitter | Instagram