Simplifies working with Mapbox GL JS by eliminating boilerplate code. It provides intuitive functions to render and manage maps, markers, lines, and polygons, allowing you to focus on building interactive map features for your project.
Before you get started with Mapbox GL JS, you need to have a Mapbox access token. This access token associates your map with a Mapbox account. For more information on creating and using access tokens, see mapbox's token management documentation.
See the mapbox's official getting started guide.
- Install the npm package.
npm install --save mapbox-gl- Include the CSS file in the of your HTML file. The CSS file is required to display the map and make elements like Popups and Markers work.
<link href='https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css' rel='stylesheet' />- If you're using a CSS loader like webpack css-loader, you can import the CSS directly in your JavaScript.
import 'mapbox-gl/dist/mapbox-gl.css';<body>
<div id="container-id"></div>
</body>
<script>
import { setToken, renderMap } from 'mapbox-service';
// Set the user mapbox token here.
setToken(##########);
renderMap('container-id', {...options here});
</script>
Leonardo Contreras - joseleoc123@gmail.com