Skip to content
Interactive map of all Vancouver properties
TypeScript JavaScript CSS HTML Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
src
.angular-cli.json
.editorconfig
.gitignore
LICENSE
README.md
build-deploy.sh
karma.conf.js
package-lock.json
package.json
protractor.conf.js
tsconfig.json
tslint.json

README.md

Vancouver Zoning Map - Work In Progress

The client side of a map of all Vancouver properties. Live version here (give it 15 seconds if the map doesn't show up right away, it's running on a free Heroku instance).

Technical deets

This is an Angular 5 web app generated with Angular CLI version 1.6.3, using Mapbox GL JS.

The mapping data is pulled from a PostGIS database then processed using Tippecanoe to significantly reduce the data size at lower zoom levels. Tippecanoe saves to an mbtiles file (it's a neat format!), and mbtiles files are very easy to serve.

Acknowledgments

The underlying data comes from Vancouver Open Data and Metro Vancouver Open Data, and kudos to them for sharing it.

The map is significantly inspired by Jens von Bergmann's much nicer and featureful Vancouver assessment map, and I'm also in debt to Jens for sharing his cleaned-up open data. He did much of the unpleasant work of joining up multiple not-quite-perfect data sets.

Build

Run npm run-script build to build the project, or npm run-script serve to serve it. The build artifacts will be stored in the dist/ directory, without hashes.

Deploy to Netlify

npm run-script netlify-deploy

You can’t perform that action at this time.