ranegray/hackathon-map

🗺️ First hackathon integrating a Mapbox GL JS into a website with custom markers.

Mapbox GL JS Point Plotter

This project showcases the ability to implement Mapbox GL JS library in unique ways to plot points on a map. It was built during my first ever hackathon and helped improve my technical communication skills by explaining the code to others.

Overview

The Mapbox GL JS Point Plotter is a simple web application that allows users to plot points on a map using the Mapbox GL JS library. The application allows users to zoom in and out, pan around the map, and plot points by clicking on the map.

Requirements

A modern web browser with JavaScript enabled An API key for Mapbox

Getting Started

Clone or download the repository. Open index.html in your web browser. Enter your Mapbox API key in the text input. Use the scroll wheel to zoom and pan controls to navigate to the desired location on the map. Right click on the map to plot a point. A pin/marker will be added to the map at the location of the click.

Usage

Plotting Points

To plot a point on the map, simply right click on the desired location. A pin/marker will be added to the map at the location of the click.

Zooming and Panning

To zoom in or out, use the scroll wheel. To pan around the map, click and drag the map with your mouse.

Technologies Used

Mapbox GL JS

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgements

This project was built during my first ever hackathon and helped improve my technical communication skills by explaining the code to others. It uses the following resources:

Mapbox GL JS: https://docs.mapbox.com/mapbox-gl-js/api/