This project demonstrates how to build an interactive map application using the Esri ArcGIS JavaScript API. The application features a customizable map view, with support for toggling between different basemaps (night and day themes) and a search functionality to locate addresses and places directly on the map.
- Toggle Basemap: A toggle button allows users to switch between 'streets-night-vector' and 'streets-vector' basemaps, reflecting a night and day theme respectively.
- Search Widget: Integrated Esri search widget that supports autocomplete to help users find specific locations quickly and accurately.
- Responsive Design: Full-page map view that adjusts to the size of the browser window, ensuring a seamless user experience across devices.
To get this application up and running, you will need to include the ArcGIS API for JavaScript. Follow these steps:
-
Clone the repository:
git clone https://your-repository-url cd your-project-folder
-
Open the project: You can open the
index.html
file in your browser to see the map application in action. -
API Keys: This project uses the ArcGIS API which requires an API key. For this demo, it's included via the script tag, but for production, you should secure your API keys.
When you load the application, you will see a map centered on coordinates [-123.0868, 44.0521]
. You can use the toggle at the top-right corner to switch between the night and day themes of the map. The search bar, also located at the top-right corner, allows you to search for locations. As you type, suggestions will appear to aid in finding the correct location faster.
Feel free to fork this repository and contribute by submitting a pull request. We appreciate your input!
This project is licensed under the MIT License - see the LICENSE.md file for details.
- Thanks to Esri for providing the ArcGIS API for JavaScript.
- This project is based on the Esri ArcGIS JavaScript API examples and documentation.
If you have any questions or would like to contact me, please email at [email protected].