Map Test

Demo link:

Access my site at map test

Table of Content:

• Features
• Technologies
• Setup

Features

1. Zoom In / Zoom Out Functionality Effortlessly navigate and explore the map with the intuitive zoom in and zoom out functionality. Adjust the level of detail to suit your preferences and enhance your overall mapping experience.

2. Multiple Map Layers Choose from a variety of map layers to tailor the view according to your needs:

   • Google Maps: The classic map view for general navigation.
   • Google Map Satellite: Satellite imagery for a detailed and visual representation.
   • OpenStreetMap: A community-driven map offering detailed and up-to-date information.

3. Settings Customization

   • Grouping Functionality Organize your map markers efficiently by enabling or disabling grouping functionality. Grouping ensures a structured and clutter-free display of elements on the map, making it easier to comprehend.
   • Ping Functionality Highlight specific points of interest on the map with the ping functionality. Mark locations for reference or communication, providing an interactive and dynamic way to engage with the map.

4. Fullscreen Mode Toggle seamlessly between fullscreen and regular modes with the dedicated fullscreen button. Enjoy an expanded view of the map when needed, enhancing the overall user experience.

Technologies

I used React.Js, MUI, react-leaflet, leaflet

Setup

• download or clone the repository by git clone https://github.com/ESAM-ALSAWAH/map-test.git
• run npm install or yarn add
• run npm dev or yarn dev

.