A web app for comparing geographic shap es and sizes across different locations on Earth. Draw polygons on one map and see them accurately mirrored on another location to understand true scale and size relationships.
MapSideBySide is an open-source project inspired by MapFrappe, built with modern web technologies to provide an intuitive way to compare geographic areas. Whether you're an educator, researcher, or just curious about how different places compare in size, this tool makes geographic scale comparison accessible and engaging.
- 📐 Interactive Drawing: Draw polygons, rectangles, and other shapes on the left map
- 🔄 Real-time Mirroring: Automatically displays your shapes on the right map with accurate geographic scaling
- 🎯 Rotation Controls: Rotate shapes to see how orientation affects perception
- 🗺️ Multiple Map Modes: Street view, satellite imagery, and hybrid mode with labels
- 🔍 Location Search: Search for any location worldwide with automatic map navigation
- 💾 Persistent Settings: Your preferences are saved between sessions
- 📱 Responsive Design: Works seamlessly on desktop and mobile devices
- React 18 - Modern component-based UI framework
- TypeScript - Type-safe development
- Vite - Fast build tool and development server
- Leaflet - Interactive mapping library
- Turf.js - Geospatial analysis and calculations
- OpenStreetMap - Street map tiles
- Esri World Imagery - Satellite imagery
- Node.js (version 16 or higher)
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/yourusername/map-side-by-side.git cd map-side-by-side -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173to see the application running.
npm run buildThe built files will be in the dist/ directory, ready for deployment.
- Drawing Shapes: Use the polygon tool on the left map to draw your shape
- Location Search: Use the search bar to navigate to different locations
- Map Selection: Toggle between "Left" and "Right" in the search controls to choose which map to navigate
- Rotation: Use the rotation slider to rotate your shape and see how it affects the mirrored version
- Map Modes: Switch between Street, Satellite, and Hybrid views using the dropdown in each map's corner
We welcome contributions! Here's how you can help:
- Use the GitHub Issues tab to report bugs or suggest features
- Provide clear descriptions and steps to reproduce issues
- Include screenshots when helpful
- Fork the repository
- Create a feature branch
git checkout -b feature/your-feature-name
- Make your changes
- Follow existing code style and conventions
- Add TypeScript types for new functionality
- Test your changes thoroughly
- Commit your changes
git commit -m "Add: your feature description" - Push to your fork
git push origin feature/your-feature-name
- Create a Pull Request
- Use TypeScript for all new code
- Follow existing naming conventions
- Add comments for complex logic
- Use meaningful commit messages
This project builds upon several excellent open-source libraries:
- Leaflet - Open-source JavaScript library for mobile-friendly interactive maps
- Turf.js - Advanced geospatial analysis for browsers and Node.js
- React - A JavaScript library for building user interfaces
- TypeScript - Typed superset of JavaScript
- Vite - Next generation frontend tooling
- Leaflet.draw - Vector drawing and editing plugin for Leaflet
- OpenStreetMap - Free, editable map of the world
- Esri World Imagery - High-resolution satellite and aerial imagery
- Nominatim - Search engine for OpenStreetMap data
- Flaticons - Favicon and Layers icon
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by MapFrappe - the original tool for true size comparisons
- Thanks to the OpenStreetMap community for providing free geographic data
- Built with love for geography enthusiasts, educators, and curious minds worldwide
If you find this project useful, please consider giving it a star on GitHub!
Made with 🗺️ for geographic education and exploration