City-ruler is a frontend web and desktop app for comparing the size of two cities. It overlays the second city you enter on an opaque background of the first city. The second city can be moved to compare different parts of the map.
Users can use the reverse button to toggle the first and second city.
City-ruler was bootstrapped with Create React App, Electron and uses Mapbox's API. Visits are tracked with Mixpanel.
To run city-ruler locally, in terminal, type:
npm i
npm start
This runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
npm i
npm run electron-dev
- Moveable 'active' map
- Toggle between active and inactive map
- Drop down menu to compare states and countries
- Shareable link
- Active map opacity slider
- Plot distances
- Save location between toggles