This project is a Shapefile Viewer built using React and OpenLayers (OL) for rendering geographic data. It allows users to upload Shapefiles (.shp, .dbf, etc.) or ZIP files containing Shapefile components, visualize them on a map, and add/view notes for specific features.
- Upload Shapefiles (
.shp,.dbf,.shx,.prj,.cpg) or ZIP files. - Visualize Shapefile data on an interactive map.
- Add and view notes for specific features.
- Save and load previously uploaded Shapefiles with their associated notes.
- Highlight and zoom to specific features.
- React: Frontend framework.
- OpenLayers (OL): JavaScript library for rendering maps and geographic data.
- shpjs: Library for parsing Shapefiles in the browser.
- Lucide Icons: Icon library for UI elements.
- LocalStorage: For saving and loading Shapefile data and notes.
Check out the live demo here: Shapefile Viewer Live Demo
- Clone the repository:
git clone https://github.com/younusFoysal/Shape-File-Viewer.git
- Navigate to the project directory:
cd Shape-File-Viewer - Install dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser and navigate to
http://localhost:5173.
To build the project for production, run:
npm run buildHere’s a comparison of different npm map packages that could be used instead of OpenLayers:
| Package | Pros | Cons |
|---|---|---|
| OpenLayers | - Highly customizable - Supports multiple projections - Extensive feature set for GIS applications |
- Steeper learning curve - Larger bundle size - Documentation can be complex |
| Leaflet | - Lightweight and easy to use - Great for simple maps - Large plugin ecosystem |
- Limited support for advanced GIS features - Fewer built-in tools for complex data |
| Mapbox GL JS | - High-performance rendering - Beautiful default styles - Built-in support for vector tiles |
- Requires API key for advanced features - Limited customization for non-Mapbox data |
| Google Maps | - Familiar interface for users - Extensive documentation - Built-in geocoding and directions |
- Requires API key - Limited customization for non-Google data - Costly for high usage |
| CesiumJS | - 3D globe rendering - Supports time-dynamic data - Great for scientific and complex visualizations |
- Heavy bundle size - Complex setup for 2D maps - Steeper learning curve |
OpenLayers was chosen for this project because of its flexibility and support for advanced GIS features. It allows for rendering Shapefiles directly in the browser and provides tools for handling complex geographic data. While it has a steeper learning curve, it offers the most robust solution for this type of application.
- Add support for additional file formats (e.g., GeoJSON, KML).
- Implement 3D visualization using CesiumJS or Mapbox GL JS.
- Add user authentication and cloud storage for saved files.
- Improve performance for large datasets.
This project is licensed under the MIT License. See the LICENSE file for details.