This is a simple Mapbox Web component that allow you to show map with point on your page. It should support any web page or framework like Angular, Vue, React and others.
- Mapbox token, check how to get the token
- Mapbox style
- Marker icon - you can provide your icon or use a build-in icon
npm install mapbox-map-web-componentimport 'mapbox-map-web-component'<div style="height: 100vh; width: 100%">
<map-box-map
width="100%"
height="100%"
access-token="<YOUR-TOKEN>"
marker-width="60px"
marker-height="60px"
></map-box-map>
</div>Example in Vue
<map-box-map
width="100%"
height="500px"
access-token="<YOUR-TOKEN>"
zoom="11"
marker-width="80px"
marker-height="80px"
:lng="location[0]"
:lat="location[2]"
marker-url="src/assets/markers/marker.png"
></map-box-map>
<script type="module" src="https://unpkg.com/mapbox-map-web-component@latest"></script><!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Stencil Component Starter</title>
<script type="module" src="https://unpkg.com/mapbox-map-web-component@latest"></script>
</head>
<body>
<div style="height: 100vh; width: 100%">
<map-box-map
width="100%"
height="100%"
access-token="<YOUR-TOKEN-HERE>"
marker-width="60px"
marker-height="60px"
></map-box-map>
</div>
</body>
</html>Below are the configuration properties available for the library/component. You can customize these to suit your application's needs.
| Property | Type | Default Value | Description |
|---|---|---|---|
marker-url |
string |
undefined |
URL for the marker icon to be used on the map. If not provided, a default icon is used. Sometimes restricted (e.g., ViteFS, see reference). |
marker-width |
string |
'50px' |
Specifies the width of the marker in pixels. |
marker-height |
string |
'50px' |
Specifies the height of the marker in pixels. |
height |
string |
'100%' |
Represents the height of the map (supported CSS values). |
width |
string |
'100%' |
Represents the width of the map (supported CSS values). |
access-token |
string |
undefined |
Mapbox access token (mandatory for Mapbox functionality). See Mapbox guide. |
map-style |
string |
undefined |
URL of the Mapbox style. See Map Styles. |
lng |
number |
19.457216 |
Longitude coordinate of the map's center. |
lat |
number |
51.759445 |
Latitude coordinate of the map's center. |
zoom |
number |
11 |
Map's initial zoom level (min: 0, max: 15). |
Here’s an example of how you can configure the component:
<map-box-map
width="80%"
height="600px"
access-token="your-access-token"
map-style="mapbox://styles/mapbox/streets-v11"
lng="10.7522"
lat="59.9139"
zoom="12"
marker-url="https://example.com/custom-icon.png"
marker-width="40px"
marker-height="60px"
/>marker-url: If the URL for the custom icon is restricted (e.g., when using Vite), ensure the path is allowed, as explained in the Vite documentation.access-token: This is mandatory for the Mapbox functionality. Ensure you obtain your token from Mapbox).
Stencil is a compiler for building fast web apps using Web Components.
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
To start building an own version of this web component, clone this repo to a new directory:
git clone https://github.com/DawidRyczko/map-box-web-component.git
cd map-box-web-componentand run:
npm install
npm startTo build the component for production, run:
npm run buildTo run the unit tests for the components, run:
npm testNeed help? Check out our docs here.