mapbox-map-web-component
Advanced tools
Web Component with Mapbox to show point on map with custom styles, markers and sizes.
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.
node_modulenpm install mapbox-map-web-component
import '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-component
and run:
npm install
npm start
To build the component for production, run:
npm run build
To run the unit tests for the components, run:
npm test
Need help? Check out our docs here.
FAQs
Web Component with Mapbox to show point on map with custom styles, markers and sizes.
We found that mapbox-map-web-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.