This project is a React application built with Next.js and TypeScript, featuring an interactive map powered by OpenLayers. Users can add points, lines, and polygons on the map and also calculate measurements like area and length.
-
Interactive Map: Render a dynamic map using OpenLayers, allowing users to explore and interact with various map layers.
-
Drawing Tools: Implement drawing functionalities using OpenLayers interactions to add points, lines, and polygons to the map.
-
Measurement Calculations (Optional): Enable users to measure distances (for lines) and areas (for polygons) directly on the map.
-
React: Front-end library for building UI components.
-
Next.js: React framework for server-side rendering and routing.
-
TypeScript: Superset of JavaScript providing static typing.
-
OpenLayers: Library for interactive maps and geospatial data visualization.
-
Clone the Repository:
git clone https://github.com/MeerUzairWasHere/open-layer-map.git
-
Install Dependencies:
cd open-layer-map npm install -
Run the Development Server:
npm run dev
Open http://localhost:3000 in your browser to see the application.
-
pages/: Contains Next.js page components. -
components/: Reusable React components used throughout the application. -
styles/: Global CSS styles and utility classes. -
public/: Static assets such as images and icons. -
utils/: Helper functions and utilities.
The project is deployed on Vercel for live preview. You can access the deployed version here: Live Demo
Contributions are welcome! Feel free to submit issues and pull requests.