{"id":22611516,"url":"https://github.com/gilles-mastropasqua/react-mapbox-elevation-control","last_synced_at":"2026-01-28T15:31:48.401Z","repository":{"id":261763780,"uuid":"885281031","full_name":"gilles-mastropasqua/react-mapbox-elevation-control","owner":"gilles-mastropasqua","description":"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.","archived":false,"fork":false,"pushed_at":"2024-11-08T11:59:00.000Z","size":33,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-17T07:46:48.040Z","etag":null,"topics":["control","elevation","mapbox","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gilles-mastropasqua.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-08T09:44:01.000Z","updated_at":"2025-10-12T16:13:21.000Z","dependencies_parsed_at":"2025-02-03T09:45:09.122Z","dependency_job_id":"af1bcbf1-c489-49ec-ab50-dbec617f4e29","html_url":"https://github.com/gilles-mastropasqua/react-mapbox-elevation-control","commit_stats":null,"previous_names":["gilles-mastropasqua/react-mapbox-elevation-control"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gilles-mastropasqua/react-mapbox-elevation-control","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilles-mastropasqua%2Freact-mapbox-elevation-control","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilles-mastropasqua%2Freact-mapbox-elevation-control/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilles-mastropasqua%2Freact-mapbox-elevation-control/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilles-mastropasqua%2Freact-mapbox-elevation-control/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gilles-mastropasqua","download_url":"https://codeload.github.com/gilles-mastropasqua/react-mapbox-elevation-control/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilles-mastropasqua%2Freact-mapbox-elevation-control/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28846341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T15:15:36.453Z","status":"ssl_error","status_checked_at":"2026-01-28T15:15:13.020Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["control","elevation","mapbox","react"],"created_at":"2024-12-08T16:11:26.315Z","updated_at":"2026-01-28T15:31:48.387Z","avatar_url":"https://github.com/gilles-mastropasqua.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-mapbox-elevation-control\n\nA 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.\n\n![Minimap exemple](https://3w-creation.net/demo-react-mapbox-elevation-control.png)\n\n## Live Demo\n\nYou can check out the live version of this package here:\n\n[React Mapbox Elevation Control - Live Demo](https://react-mapbox-elevation-control-demo.vercel.app)\n\n## Installation\n\nInstall the package via npm:\n\n```bash\nnpm install react-mapbox-elevation-control\n```\n\n## Usage\n\n1. **Import the control** into your Mapbox GL JS application.\n2. **Add the control** to your map instance.\n3. **Include the CSS file** for styling.\n\n### Example\n\n```typescript\nimport mapboxgl from 'mapbox-gl';\nimport { ElevationControl } from 'react-mapbox-elevation-control';\nimport 'react-mapbox-elevation-control/dist/styles.css';\n\nmapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';\n\nconst map = new mapboxgl.Map({\n    container: 'map', \n    style: 'mapbox://styles/mapbox/outdoors-v12', \n    center: [16.3738, 48.2082], \n    zoom: 4.5\n});\n\n// Add the ElevationControl to the map\nmap.addControl(new ElevationControl(), 'top-right');\n```\n\n## CSS Customization\n\nYou can adjust the appearance of the control button and tooltip by modifying the included CSS file.\n\n- **`.mapbox-elevation-control`** - Styles the button for the elevation control.\n- **`.elevation-tooltip`** - Styles the tooltip that displays the elevation.\n\n### Example of CSS Customization\n\n```css\n.mapbox-elevation-control {\n    width: 40px;\n    height: 40px;\n    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');\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: 60%;\n    border: none;\n    cursor: pointer;\n    border-radius: 4px;\n}\n\n\n.elevation-tooltip {\n    position: absolute;\n    padding: 4px 8px;\n    background-color: #333;\n    color: #fff;\n    border-radius: 4px;\n    pointer-events: none;\n    font-size: 12px;\n    z-index: 9999;\n}\n```\n\n## Requirements\n\n- **Mapbox GL JS** v2 or higher\n- A Mapbox Access Token\n\n## License\n\nThis project is licensed under the MIT License.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilles-mastropasqua%2Freact-mapbox-elevation-control","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgilles-mastropasqua%2Freact-mapbox-elevation-control","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilles-mastropasqua%2Freact-mapbox-elevation-control/lists"}