https://github.com/gilles-mastropasqua/react-mapbox-elevation-control
react-mapbox-elevation-control is a Mapbox GL JS control that lets users measure elevation at a specific point on the map. Click anywhere on the map to display the elevation at that location with a tooltip. Easily customizable and ready for integration into your mapping projects.
https://github.com/gilles-mastropasqua/react-mapbox-elevation-control
control elevation mapbox react
Last synced: 6 months ago
JSON representation
react-mapbox-elevation-control is a Mapbox GL JS control that lets users measure elevation at a specific point on the map. Click anywhere on the map to display the elevation at that location with a tooltip. Easily customizable and ready for integration into your mapping projects.
- Host: GitHub
- URL: https://github.com/gilles-mastropasqua/react-mapbox-elevation-control
- Owner: gilles-mastropasqua
- Created: 2024-11-08T09:44:01.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-11-08T11:59:00.000Z (11 months ago)
- Last Synced: 2025-04-10T23:05:32.403Z (6 months ago)
- Topics: control, elevation, mapbox, react
- Language: TypeScript
- Homepage:
- Size: 32.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-mapbox-elevation-control
A Mapbox GL JS control that allows users to measure the elevation of a point on the map. Once activated, click on a location on the map to display the elevation at that point.
## Live Demo
You can check out the live version of this package here:
[React Mapbox Elevation Control - Live Demo](https://react-mapbox-elevation-control-demo.vercel.app)
## Installation
Install the package via npm:
```bash
npm install react-mapbox-elevation-control
```
## Usage
1. **Import the control** into your Mapbox GL JS application.
2. **Add the control** to your map instance.
3. **Include the CSS file** for styling.
### Example
```typescript
import mapboxgl from 'mapbox-gl';
import { ElevationControl } from 'react-mapbox-elevation-control';
import 'react-mapbox-elevation-control/dist/styles.css';
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/outdoors-v12',
center: [16.3738, 48.2082],
zoom: 4.5
});
// Add the ElevationControl to the map
map.addControl(new ElevationControl(), 'top-right');
```
## CSS Customization
You can adjust the appearance of the control button and tooltip by modifying the included CSS file.
- **`.mapbox-elevation-control`** - Styles the button for the elevation control.
- **`.elevation-tooltip`** - Styles the tooltip that displays the elevation.
### Example of CSS Customization
```css
.mapbox-elevation-control {
width: 40px;
height: 40px;
background: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22100%22%20height%3D%22150%22%20viewBox%3D%220%200%20100%20150%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2280%22%20height%3D%2215%22%20fill%3D%22black%22%20/%3E%3Cpolygon%20points%3D%2250%2C35%2030%2C65%2070%2C65%22%20fill%3D%22black%22%20/%3E%3Crect%20x%3D%2245%22%20y%3D%2265%22%20width%3D%2210%22%20height%3D%2250%22%20fill%3D%22black%22%20/%3E%3Cpolygon%20points%3D%2250%2C115%2030%2C85%2070%2C85%22%20fill%3D%22black%22%20/%3E%3Crect%20x%3D%2210%22%20y%3D%22125%22%20width%3D%2280%22%20height%3D%2215%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
background-position: center;
background-repeat: no-repeat;
background-size: 60%;
border: none;
cursor: pointer;
border-radius: 4px;
}
.elevation-tooltip {
position: absolute;
padding: 4px 8px;
background-color: #333;
color: #fff;
border-radius: 4px;
pointer-events: none;
font-size: 12px;
z-index: 9999;
}
```
## Requirements
- **Mapbox GL JS** v2 or higher
- A Mapbox Access Token
## License
This project is licensed under the MIT License.