React-mapbox-elevation-control NPM

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.

Minimap exemple

Live Demo

You can check out the live version of this package here:

React Mapbox Elevation Control - Live Demo

Installation

Install the package via npm:

npm install react-mapbox-elevation-control

Usage

Import the control into your Mapbox GL JS application.
Add the control to your map instance.
Include the CSS file for styling.

Example

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

.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;
}