@svizzle/mapbox NPM

Mapbox GL Wrapper for Svelte

A Svelte component library that streamlines the integration of Mapbox GL JS into Svelte applications.

Features

Allows for adding SVG layers and custom controls through slots
Layers: - set visible and reactive layers - control features style interactively (e.g. when hovering features of the map) - dispatch events when: - hovering/touching features on the map - entering/leaving the map
Custom controls can obtain the mapbox instance through getContext('Mapbox')
You can also get the projection function from the Svelte context. Note that this value changes only once but because it is accessible after the context is initially set it must use a store to enable reactivity in child layers.
Provides stores for the bounding box and zoom level
Pass event handlers for Mapbox's events
Can enable/disable scale and zoom controls through properties
Supports theme the focus outline
Degrades to a fallback message if Mapbox GL JS is not supported in the user's browser

Installation

npm install --save @svizzle/mapbox

`Mapbox` Component

The main component of this library, it wraps the Mapbox GL JS map and provides the platform for adding custom SVG layers and controls through the use of the SVGLayer and CustomControl components (see below).

Usage

<script>
	import {Mapbox} from '@svizzle/mapbox';
</script>

<MapBox
	accessToken="{your_access_token}"
	styleURL="{your_style_url}"
/>

Props

_bbox_WS_EN: store for the bounding box in [[West, South], [East, North]] format (optional)
_bbox_WSEN: store for the bounding box in [West, South, East, North] format (optional)
_zoom: store for the map zoom level (optional)
accessToken: your Mapbox access token (required)
bounds: bounding box for the map viewport (optional)
customControl: custom control to be added to the map (optional)
eventsHandlers: set event handlers for Mapbox's events
fitBoundsPadding: control the padding in pixels when zooming to bounds
getFeatureState: control features style interactively (e.g. when hovering features of the map)
isAnimated and isInteractive booleans to control interactivity
isDblClickEnabled: boolean to enable/disable map.doubleClickZoom
reactiveLayersIds: to set reactive layers
style: a JSON object conforming to the schema described in the Mapbox Style Specification, or a URL to such JSON
theme: URL for the Mapbox style to be used (required)
visibleLayersIds: to set visible layers
withScaleControl: whether to display the scale control (default: true)
withZoomControl: whether to display the zoom control (default: true)

Read-only props

_projectFn: the internal map projection function

Events

bboxChanged: emitted when the bounding box of the map changes
entered: when entering the map
exited: when leaving the map
mapClick: emitted when the map is clicked
mapFeaturesHovered: when hovering the map on systems that support pointers
mapFeaturesTouchStarted: when hovering the map on systems that support touch

Slots

Default slot for adding additional custom components, SVG layers or custom controls to the map

Browser support

The component checks if Mapbox GL JS is supported in the user's browser. If it is not supported, a fallback message is rendered instead of the map.

`SVGLayer` component

The SVGLayer component allows you to add custom SVG layers to a Mapbox instance. It makes it easy to integrate additional graphical elements, such as annotations or overlays, on top of a Mapbox GL map.

Usage

You may add multiple SVG layers to a map. Each SVG layer will be rendered on top of the previous one.

<script>
	import {Mapbox, SVGLayer} from '@svizzle/mapbox';
</script>

<Mapbox
	accessToken="{your_access_token}"
	styleURL="{your_style_url}"
>
	<SVGLayer>
		<!-- SVG layer content -->
	</SVGLayer>
	<SVGLayer>
		<!-- Another SVG layer content -->
	</SVGLayer>
</Mapbox>

Props

isInteractive: A boolean that determines whether the SVG layer should be interactive or not (default: true)
order: A number that determines the visual order of the SVG layer relative to other SVG layers (default: none). Higher values place the layer on top of other layers with lower values.

`CustomControl` component

The CustomControl component enables you to add custom controls to a Mapbox GL map within a Svelte application. This component simplifies the process of integrating custom controls, such as buttons or additional information panels, into your Mapbox GL maps.

Usage

You may add multiple custom controls to a map. Each custom control will be rendered according to its position property.

<script>
	import {Mapbox, CustomControl} from '@svizzle/mapbox';
</script>

<Mapbox
	accessToken="{your_access_token}"
	styleURL="{your_style_url}"
>
	<CustomControl>
		<!-- Custom control content -->
	</CustomControl>
</Mapbox>

Props

position: A string that determines the position of the custom control on the map (default: none). Accepted values are: top-right, top-left, bottom-right, or bottom-left.