@capawesome/capacitor-maplibre

v0.2.1

Published

a day ago

Capacitor plugin for creating native maps with MapLibre.

0High
0Medium
0Low

robingenz

capacitor plugin native maplibre map maps geo

Capacitor MapLibre Plugin

Unofficial Capacitor plugin to create native MapLibre maps on Android, iOS, and Web.[^1]

Features

The Capacitor MapLibre plugin renders interactive maps with the native MapLibre SDKs on Android and iOS, and with MapLibre GL JS on the Web. Here are some of the key features:

🗺️ Native Rendering: Renders a native map view on Android and iOS instead of a map inside the web view.
🆓 No API Key: Built on the open-source MapLibre stack, so no vendor account or API key is required.
🎨 Map Styles: Load any MapLibre style from a URL or a JSON string, and swap it at runtime.
🎥 Camera Controls: Set center, zoom, bearing and pitch, or fit bounds — animated or instantly.
📍 Markers: Add markers with custom icons, anchors, sizes, opacity and rotation, and update them with smooth animations.
✋ Draggable Markers: Let users drag markers and react to drag events on Android and Web.
〰️ Polylines: Draw and update routes and tracks with custom color, width and opacity.
🧬 GeoJSON: Add GeoJSON sources from data or URL and render them with styled line, fill and circle layers.
🧭 User Location: Display the location of the user and follow it with course or heading tracking modes.
🎛️ Gesture Controls: Enable or disable panning, zooming, rotating and tilting at any time.
🧩 Multi-Instance: Create and control multiple maps at the same time by ID.
🪟 DOM Overlays: Place HTML elements such as floating action buttons or bottom sheets above the map — they just work.
🔄 Automatic Sync: The native map follows the position and scroll offset of its element automatically.
🖥️ Cross-platform: Supports Android, iOS, and Web.
📦 CocoaPods & SPM: Supports CocoaPods and Swift Package Manager for iOS.
🔁 Up-to-date: Always supports the latest Capacitor version.

Missing a feature? Just open an issue and we'll take a look!

Use Cases

The MapLibre plugin is typically used wherever you want to show geographical data in your app, for example:

Delivery & fleet tracking: Follow vehicles live with animated markers and rotation.
Store & branch locators: Display locations as markers and zoom to the results of a search.
Outdoor & fitness apps: Render recorded tracks as polylines and follow the location of the user.
Field service: Show jobs, areas and routes from GeoJSON data on a native map.
Real estate & travel: Browse listings on a map with custom styles that match your brand.

Compatibility

| Plugin Version | Capacitor Version | Status | | -------------- | ----------------- | -------------- | | 0.x.x | >=8.x.x | Active support |

Guides

A Google Maps Alternative for Capacitor Apps: Compares @capacitor/google-maps with this plugin — no billing account, no API key, and Web support.

Installation

You can use our AI-Assisted Setup to install the plugin. Add the Capawesome Skills to your AI tool using the following command:

npx skills add capawesome-team/skills --skill capacitor-plugins

Then use the following prompt:

Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-maplibre` plugin in my project.

If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:

npm install @capawesome/capacitor-maplibre maplibre-gl
npx cap sync

Android

On Android, the plugin uses the MapLibre Native SDK for Android.

Variables

This plugin will use the following project variables (defined in your app's variables.gradle file):

$mapLibreVersion version of org.maplibre.gl:android-sdk-vulkan-opengl (default: 13.5.0)
$mapLibreAnnotationVersion version of org.maplibre.gl:android-plugin-annotation (default: 4.0.0)

Permissions

Location permissions are only required if you want to display the location of the user on the map. In that case, add the following elements to your AndroidManifest.xml before or after the application tag:

<!-- Required if you want to display the location of the user on the map. -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

iOS

On iOS, the plugin uses the MapLibre Native SDK for iOS. It can be integrated via Swift Package Manager or CocoaPods.

If you want to display the location of the user on the map, add the NSLocationWhenInUseUsageDescription key to your Info.plist file:

<key>NSLocationWhenInUseUsageDescription</key>
<string>The app needs your location to display it on the map.</string>

Without this key, checkPermissions(), requestPermissions() and enableUserLocation(...) reject with an error.

Web

The web implementation uses MapLibre GL JS, which is not bundled with the plugin. Its stylesheet is not bundled either, so you must import it once in your app:

import 'maplibre-gl/dist/maplibre-gl.css';

Without the stylesheet, the map canvas and the markers are mispositioned.

The maplibre-gl package is only required on the Web platform. On Android and iOS, the map is rendered by the native MapLibre SDKs.

Configuration

No configuration required for this plugin.

Usage

The following examples show how to use the plugin.

Getting started

Add an empty element to your app that defines the position and size of the map:

<div id="map"></div>

#map {
  /* The map must not have a background so that the native map stays visible. */
  background: transparent;
  height: 400px;
  width: 100%;
}

On Android and iOS, the map is rendered as a native view behind the web view. Your app must therefore fulfill the following contract:

The map element must be empty. Do not render any content into it.
The map element and every ancestor that covers the map region (including body) must have a transparent background (background: transparent). Otherwise the web view paints over the native map and the map is not visible.

Elements that are not ancestors of the map element, such as floating action buttons or bottom sheets, can be layered above the map as usual. The plugin keeps the position and size of the native map in sync with the map element automatically, including while the page is scrolled or resized.

Create a map

import { MapLibre } from '@capawesome/capacitor-maplibre';

const createMap = async () => {
  await MapLibre.createMap({
    center: { latitude: 48.137154, longitude: 11.576124 },
    elementId: 'map',
    mapId: 'my-map',
    styleUrl: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
    zoom: 12,
  });
};

If no style is provided, the MapLibre demo style is used, which is a test style and not intended for production use (see FAQ).

Move the camera

import { MapLibre } from '@capawesome/capacitor-maplibre';

const moveCamera = async () => {
  await MapLibre.setCamera({
    animate: true,
    animationDuration: 1000,
    bearing: 30,
    center: { latitude: 52.520008, longitude: 13.404954 },
    mapId: 'my-map',
    pitch: 45,
    zoom: 11,
  });
  await MapLibre.fitBounds({
    animate: true,
    bounds: {
      northeast: { latitude: 55.058347, longitude: 15.041896 },
      southwest: { latitude: 47.270111, longitude: 5.866342 },
    },
    mapId: 'my-map',
    padding: { bottom: 32, left: 32, right: 32, top: 32 },
  });
};

Add markers

import { MapLibre, MarkerIconAnchor } from '@capawesome/capacitor-maplibre';

const addMarker = async () => {
  await MapLibre.addMarker({
    mapId: 'my-map',
    marker: {
      coordinates: { latitude: 48.137154, longitude: 11.576124 },
      iconAnchor: MarkerIconAnchor.Center,
      iconSize: { height: 32, width: 32 },
      iconUrl: 'https://example.com/marker.png',
      id: 'my-marker',
    },
  });
};

const moveMarker = async () => {
  await MapLibre.updateMarkerById({
    animate: true,
    animationDuration: 1000,
    coordinates: { latitude: 48.370545, longitude: 10.89779 },
    mapId: 'my-map',
    markerId: 'my-marker',
    rotation: 90,
  });
};

const removeMarker = async () => {
  await MapLibre.removeMarkerById({ mapId: 'my-map', markerId: 'my-marker' });
};

Add polylines

import { MapLibre } from '@capawesome/capacitor-maplibre';

const addPolyline = async () => {
  await MapLibre.addPolyline({
    mapId: 'my-map',
    polyline: {
      color: '#3887be',
      coordinates: [
        { latitude: 48.137154, longitude: 11.576124 },
        { latitude: 49.45203, longitude: 11.076665 },
        { latitude: 52.520008, longitude: 13.404954 },
      ],
      id: 'my-polyline',
      width: 5,
    },
  });
};

Add GeoJSON data

import { LayerType, MapLibre } from '@capawesome/capacitor-maplibre';

const addGeoJson = async () => {
  await MapLibre.addGeoJsonSource({
    mapId: 'my-map',
    sourceId: 'my-source',
    url: 'https://example.com/routes.geojson',
  });
  await MapLibre.addLayer({
    layerId: 'my-layer',
    mapId: 'my-map',
    paint: { lineColor: '#3887be', lineWidth: 4 },
    sourceId: 'my-source',
    type: LayerType.Line,
  });
};

Display the location of the user

import { MapLibre, UserTrackingMode } from '@capawesome/capacitor-maplibre';

const enableUserLocation = async () => {
  let status = await MapLibre.checkPermissions();
  if (status.location === 'prompt') {
    status = await MapLibre.requestPermissions();
  }
  if (status.location !== 'granted') {
    return;
  }
  await MapLibre.enableUserLocation({
    mapId: 'my-map',
    trackingMode: UserTrackingMode.Follow,
  });
};

Listen for events

import { MapLibre } from '@capawesome/capacitor-maplibre';

const addListeners = async () => {
  await MapLibre.addListener('mapClick', event => {
    console.log('Map clicked:', event.coordinates);
  });
  await MapLibre.addListener('markerClick', event => {
    console.log('Marker clicked:', event.markerId);
  });
  await MapLibre.addListener('cameraIdle', event => {
    console.log('Camera idle:', event.camera);
  });
};

Destroy a map

import { MapLibre } from '@capawesome/capacitor-maplibre';

const destroyMap = async () => {
  await MapLibre.destroyMap({ mapId: 'my-map' });
};

API

addGeoJsonSource(...)

addGeoJsonSource(options: AddGeoJsonSourceOptions) => Promise<void>

Add a GeoJSON source to the map.

Use addLayer(...) to render the data of the source.

| Param | Type | | ------------- | --------------------------------------------------------------------------- | | options | AddGeoJsonSourceOptions |

Since: 0.1.0

addLayer(...)

addLayer(options: AddLayerOptions) => Promise<void>

Add a layer to the map that renders the data of a GeoJSON source.

| Param | Type | | ------------- | ----------------------------------------------------------- | | options | AddLayerOptions |

Since: 0.1.0

addMarker(...)

addMarker(options: AddMarkerOptions) => Promise<void>

Add a marker to the map.

| Param | Type | | ------------- | ------------------------------------------------------------- | | options | AddMarkerOptions |

Since: 0.1.0

addMarkers(...)

addMarkers(options: AddMarkersOptions) => Promise<void>

Add multiple markers to the map.

| Param | Type | | ------------- | --------------------------------------------------------------- | | options | AddMarkersOptions |

Since: 0.1.0

addPolyline(...)

addPolyline(options: AddPolylineOptions) => Promise<void>

Add a polyline to the map.

| Param | Type | | ------------- | ----------------------------------------------------------------- | | options | AddPolylineOptions |

Since: 0.1.0

addPolylines(...)

addPolylines(options: AddPolylinesOptions) => Promise<void>

Add multiple polylines to the map.

| Param | Type | | ------------- | ------------------------------------------------------------------- | | options | AddPolylinesOptions |

Since: 0.1.0

checkPermissions()

checkPermissions() => Promise<PermissionStatus>

Check the location permission.

Returns: Promise<PermissionStatus>

Since: 0.1.0

createMap(...)

createMap(options: CreateMapOptions) => Promise<void>

Create a new map.

The map is rendered into the element with the given element ID. On Android and iOS, the map is rendered as a native view behind the web view, so the element and everything above the map must be transparent.

The promise resolves as soon as the style of the map has finished loading.

| Param | Type | | ------------- | ------------------------------------------------------------- | | options | CreateMapOptions |

Since: 0.1.0

destroyMap(...)

destroyMap(options: DestroyMapOptions) => Promise<void>

Destroy a map and release all its resources.

| Param | Type | | ------------- | --------------------------------------------------------------- | | options | DestroyMapOptions |

Since: 0.1.0

disableUserLocation(...)

disableUserLocation(options: DisableUserLocationOptions) => Promise<void>

Stop displaying the location of the user on the map.

| Param | Type | | ------------- | --------------------------------------------------------------------------------- | | options | DisableUserLocationOptions |

Since: 0.1.0

elementFromPointResult(...)

elementFromPointResult(options: ElementFromPointResultOptions) => Promise<void>

Answer an elementFromPointRequest event.

This method is called automatically by the plugin and must not be called manually.

Only available on Android.

| Param | Type | | ------------- | --------------------------------------------------------------------------------------- | | options | ElementFromPointResultOptions |

Since: 0.1.0

enableUserLocation(...)

enableUserLocation(options: EnableUserLocationOptions) => Promise<void>

Display the location of the user on the map.

Call this method again to change the tracking mode.

| Param | Type | | ------------- | ------------------------------------------------------------------------------- | | options | EnableUserLocationOptions |

Since: 0.1.0

fitBounds(...)

fitBounds(options: FitBoundsOptions) => Promise<void>

Move the camera so that the given bounds are visible.

| Param | Type | | ------------- | ------------------------------------------------------------- | | options | FitBoundsOptions |

Since: 0.1.0

getCamera(...)

getCamera(options: GetCameraOptions) => Promise<GetCameraResult>

Get the current camera of the map.

| Param | Type | | ------------- | ------------------------------------------------------------- | | options | GetCameraOptions |

Returns: Promise<GetCameraResult>

Since: 0.1.0

removeAllMarkers(...)

removeAllMarkers(options: RemoveAllMarkersOptions) => Promise<void>

Remove all markers from the map.

| Param | Type | | ------------- | --------------------------------------------------------------------------- | | options | RemoveAllMarkersOptions |

Since: 0.1.0

removeAllPolylines(...)

removeAllPolylines(options: RemoveAllPolylinesOptions) => Promise<void>

Remove all polylines from the map.

| Param | Type | | ------------- | ------------------------------------------------------------------------------- | | options | RemoveAllPolylinesOptions |

Since: 0.1.0

removeGeoJsonSourceById(...)

removeGeoJsonSourceById(options: RemoveGeoJsonSourceByIdOptions) => Promise<void>

Remove a GeoJSON source from the map.

All layers that use the source must be removed first.

| Param | Type | | ------------- | ----------------------------------------------------------------------------------------- | | options | RemoveGeoJsonSourceByIdOptions |

Since: 0.1.0

removeLayerById(...)

removeLayerById(options: RemoveLayerByIdOptions) => Promise<void>

Remove a layer from the map.

| Param | Type | | ------------- | ------------------------------------------------------------------------- | | options | RemoveLayerByIdOptions |

Since: 0.1.0

removeMarkerById(...)

removeMarkerById(options: RemoveMarkerByIdOptions) => Promise<void>

Remove a marker from the map.

| Param | Type | | ------------- | --------------------------------------------------------------------------- | | options | RemoveMarkerByIdOptions |

Since: 0.1.0

removeMarkersByIds(...)

removeMarkersByIds(options: RemoveMarkersByIdsOptions) => Promise<void>

Remove multiple markers from the map.

| Param | Type | | ------------- | ------------------------------------------------------------------------------- | | options | RemoveMarkersByIdsOptions |

Since: 0.1.0

removePolylineById(...)

removePolylineById(options: RemovePolylineByIdOptions) => Promise<void>

Remove a polyline from the map.

| Param | Type | | ------------- | ------------------------------------------------------------------------------- | | options | RemovePolylineByIdOptions |

Since: 0.1.0

removePolylinesByIds(...)

removePolylinesByIds(options: RemovePolylinesByIdsOptions) => Promise<void>

Remove multiple polylines from the map.

| Param | Type | | ------------- | ----------------------------------------------------------------------------------- | | options | RemovePolylinesByIdsOptions |

Since: 0.1.0

requestPermissions()

requestPermissions() => Promise<PermissionStatus>

Request the location permission.

Returns: Promise<PermissionStatus>

Since: 0.1.0

setCamera(...)

setCamera(options: SetCameraOptions) => Promise<void>

Move the camera of the map.

Only the provided properties are changed.

| Param | Type | | ------------- | ------------------------------------------------------------- | | options | SetCameraOptions |

Since: 0.1.0

setFrame(...)

setFrame(options: SetFrameOptions) => Promise<void>

Update the position and size of the map viewport.

This method is called automatically by the plugin and usually does not need to be called manually.

Only available on Android and iOS.

| Param | Type | | ------------- | ----------------------------------------------------------- | | options | SetFrameOptions |

Since: 0.1.0

setGesturesEnabled(...)

setGesturesEnabled(options: SetGesturesEnabledOptions) => Promise<void>

Enable or disable the gestures of the map.

Only the provided gestures are changed.

| Param | Type | | ------------- | ------------------------------------------------------------------------------- | | options | SetGesturesEnabledOptions |

Since: 0.1.0

setStyle(...)

setStyle(options: SetStyleOptions) => Promise<void>

Load a new style into the map.

All markers, polylines, sources and layers must be added again after the new style has been loaded.

| Param | Type | | ------------- | ----------------------------------------------------------- | | options | SetStyleOptions |

Since: 0.1.0

updateGeoJsonSourceById(...)

updateGeoJsonSourceById(options: UpdateGeoJsonSourceByIdOptions) => Promise<void>

Update the data of a GeoJSON source.

| Param | Type | | ------------- | ----------------------------------------------------------------------------------------- | | options | UpdateGeoJsonSourceByIdOptions |

Since: 0.1.0

updateMarkerById(...)

updateMarkerById(options: UpdateMarkerByIdOptions) => Promise<void>

Update a marker on the map.

Only the provided properties are changed.

| Param | Type | | ------------- | --------------------------------------------------------------------------- | | options | UpdateMarkerByIdOptions |

Since: 0.1.0

updatePolylineById(...)

updatePolylineById(options: UpdatePolylineByIdOptions) => Promise<void>

Update a polyline on the map.

Only the provided properties are changed.

| Param | Type | | ------------- | ------------------------------------------------------------------------------- | | options | UpdatePolylineByIdOptions |

Since: 0.1.0

addListener('cameraIdle', ...)

addListener(eventName: 'cameraIdle', listenerFunc: (event: CameraIdleEvent) => void) => Promise<PluginListenerHandle>

Called when the camera of a map has stopped moving.

| Param | Type | | ------------------ | ------------------------------------------------------------------------------- | | eventName | 'cameraIdle' | | listenerFunc | (event: CameraIdleEvent) => void |

Returns: Promise<PluginListenerHandle>

Since: 0.1.0

addListener('cameraMoveStarted', ...)

addListener(eventName: 'cameraMoveStarted', listenerFunc: (event: CameraMoveStartedEvent) => void) => Promise<PluginListenerHandle>

Called when the camera of a map has started moving.

| Param | Type | | ------------------ | --------------------------------------------------------------------------------------------- | | eventName | 'cameraMoveStarted' | | listenerFunc | (event: CameraMoveStartedEvent) => void |

Returns: Promise<PluginListenerHandle>

Since: 0.1.0

addListener('elementFromPointRequest', ...)

addListener(eventName: 'elementFromPointRequest', listenerFunc: (event: ElementFromPointRequestEvent) => void) => Promise<PluginListenerHandle>

Called when the plugin needs to know which map is located at a point of the screen.

This event is handled automatically by the plugin and must not be handled manually.

Only available on Android.

| Param | Type | | ------------------ | --------------------------------------------------------------------------------------------------------- | | eventName | 'elementFromPointRequest' | | listenerFunc | (event: ElementFromPointRequestEvent) => void |

Returns: Promise<PluginListenerHandle>

Since: 0.1.0

addListener('mapClick', ...)

addListener(eventName: 'mapClick', listenerFunc: (event: MapClickEvent) => void) => Promise<PluginListenerHandle>

Called when the user taps on a map.

| Param | Type | | ------------------ | --------------------------------------------------------------------------- | | eventName | 'mapClick' | | listenerFunc | (event: MapClickEvent) => void |

Returns: Promise<PluginListenerHandle>

Since: 0.1.0

addListener('markerClick', ...)

addListener(eventName: 'markerClick', listenerFunc: (event: MarkerClickEvent) => void) => Promise<PluginListenerHandle>

Called when the user taps on a marker.

| Param | Type | | ------------------ | --------------------------------------------------------------------------------- | | eventName | 'markerClick' | | listenerFunc | (event: MarkerClickEvent) => void |

Returns: Promise<PluginListenerHandle>

Since: 0.1.0

addListener('markerDrag', ...)

addListener(eventName: 'markerDrag', listenerFunc: (event: MarkerDragEvent) => void) => Promise<PluginListenerHandle>

Called while the user drags a marker.

Only available on Android and Web.

| Param | Type | | ------------------ | ------------------------------------------------------------------------------- | | eventName | 'markerDrag' | | listenerFunc | (event: MarkerDragEvent) => void |

Returns: Promise<PluginListenerHandle>

Since: 0.1.0

addListener('markerDragEnd', ...)

addListener(eventName: 'markerDragEnd', listenerFunc: (event: MarkerDragEndEvent) => void) => Promise<PluginListenerHandle>

Called when the user has stopped dragging a marker.

Only available on Android and Web.

| Param | Type | | ------------------ | ------------------------------------------------------------------------------------- | | eventName | 'markerDragEnd' | | listenerFunc | (event: MarkerDragEndEvent) => void |

Returns: Promise<PluginListenerHandle>

Since: 0.1.0

addListener('markerDragStart', ...)

addListener(eventName: 'markerDragStart', listenerFunc: (event: MarkerDragStartEvent) => void) => Promise<PluginListenerHandle>

Called when the user has started dragging a marker.

Only available on Android and Web.

| Param | Type | | ------------------ | ----------------------------------------------------------------------------------------- | | eventName | 'markerDragStart' | | listenerFunc | (event: MarkerDragStartEvent) => void |

Returns: Promise<PluginListenerHandle>

Since: 0.1.0

addListener('userLocationChange', ...)

addListener(eventName: 'userLocationChange', listenerFunc: (event: UserLocationChangeEvent) => void) => Promise<PluginListenerHandle>

Called when the location of the user changes.

The event is only emitted while the location of the user is displayed on the map.

| Param | Type | | ------------------ | ----------------------------------------------------------------------------------------------- | | eventName | 'userLocationChange' | | listenerFunc | (event: UserLocationChangeEvent) => void |

Returns: Promise<PluginListenerHandle>

Since: 0.1.0

removeAllListeners()

removeAllListeners() => Promise<void>

Remove all listeners for this plugin.

Since: 0.1.0

Interfaces

AddGeoJsonSourceOptions

| Prop | Type | Description | Since | | -------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------- | ----- | | data | Record<string, unknown> | The GeoJSON data of the source. Exactly one of data and url must be provided. | 0.1.0 | | mapId | string | The unique identifier of the map. | 0.1.0 | | sourceId | string | The unique identifier of the source. | 0.1.0 | | url | string | The URL of the GeoJSON data of the source. Exactly one of data and url must be provided. | 0.1.0 |

AddLayerOptions

| Prop | Type | Description | Since | | ------------------ | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----- | | belowLayerId | string | The unique identifier of the layer below which the new layer is inserted. If not provided, the layer is added on top of all other layers. | 0.1.0 | | layerId | string | The unique identifier of the layer. | 0.1.0 | | mapId | string | The unique identifier of the map. | 0.1.0 | | maxZoom | number | The maximum zoom level at which the layer is visible. | 0.1.0 | | minZoom | number | The minimum zoom level at which the layer is visible. | 0.1.0 | | paint | LayerPaint | The paint properties of the layer. | 0.1.0 | | sourceId | string | The unique identifier of the source whose data is rendered by the layer. | 0.1.0 | | type | LayerType | The type of the layer. | 0.1.0 |

LayerPaint

The paint properties of a layer.

Properties that do not apply to the type of the layer are ignored.

| Prop | Type | Description | Since | | ----------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----- | | circleColor | string | The fill color of the circles as a hexadecimal string in the format #RRGGBB or #RRGGBBAA. Only applies to layers of type circle. | 0.1.0 | | circleOpacity | number | The opacity of the circles as a value between 0 and 1. Only applies to layers of type circle. | 0.1.0 | | circleRadius | number | The radius of the circles in CSS pixels. Only applies to layers of type circle. | 0.1.0 | | circleStrokeColor | string | The stroke color of the circles as a hexadecimal string in the format #RRGGBB or #RRGGBBAA. Only applies to layers of type circle. | 0.1.0 | | circleStrokeWidth | number | The stroke width of the circles in CSS pixels. Only applies to layers of type circle. | 0.1.0 | | fillColor | string | The fill color of the areas as a hexadecimal string in the format #RRGGBB or #RRGGBBAA. Only applies to layers of type fill. | 0.1.0 | | fillOpacity | number | The opacity of the areas as a value between 0 and 1. Only applies to layers of type fill. | 0.1.0 | | fillOutlineColor | string | The outline color of the areas as a hexadecimal string in the format #RRGGBB or #RRGGBBAA. Only applies to layers of type fill. | 0.1.0 | | lineColor | string | The color of the lines as a hexadecimal string in the format #RRGGBB or #RRGGBBAA. Only applies to layers of type line. | 0.1.0 | | lineOpacity | number | The opacity of the lines as a value between 0 and 1. Only applies to layers of type line. | 0.1.0 | | lineWidth | number | The width of the lines in CSS pixels. Only applies to layers of type line. | 0.1.0 |

AddMarkerOptions

| Prop | Type | Description | Since | | ------------ | ----------------------------------------- | --------------------------------- | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 | | marker | Marker | The marker to add. | 0.1.0 |

Marker

A marker on a map.

| Prop | Type | Description | Default | Since | | ----------------- | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----- | | coordinates | LatLng | The geographical coordinate of the marker. | | 0.1.0 | | draggable | boolean | Whether the user can drag the marker. Only available on Android and Web. | false | 0.1.0 | | iconAnchor | MarkerIconAnchor | The part of the icon that is placed on the coordinate of the marker. | MarkerIconAnchor.Bottom | 0.1.0 | | iconSize | MarkerIconSize | The size the icon is scaled to. If not provided, the intrinsic size of the icon is used. | | 0.1.0 | | iconUrl | string | The URL of the icon of the marker. Must be a https URL or a data URI. If not provided, a default pin icon is used. | | 0.1.0 | | id | string | The unique identifier of the marker. | | 0.1.0 | | opacity | number | The opacity of the marker as a value between 0 and 1. | 1 | 0.1.0 | | rotation | number | The rotation of the icon in degrees clockwise. | 0 | 0.1.0 |

LatLng

A geographical coordinate.

| Prop | Type | Description | Since | | --------------- | ------------------- | ------------------------- | ----- | | latitude | number | The latitude in degrees. | 0.1.0 | | longitude | number | The longitude in degrees. | 0.1.0 |

MarkerIconSize

The size of the icon of a marker in CSS pixels.

| Prop | Type | Description | Since | | ------------ | ------------------- | ------------------------------------- | ----- | | height | number | The height of the icon in CSS pixels. | 0.1.0 | | width | number | The width of the icon in CSS pixels. | 0.1.0 |

AddMarkersOptions

| Prop | Type | Description | Since | | ------------- | --------------------- | --------------------------------- | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 | | markers | Marker[] | The markers to add. | 0.1.0 |

AddPolylineOptions

| Prop | Type | Description | Since | | -------------- | --------------------------------------------- | --------------------------------- | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 | | polyline | Polyline | The polyline to add. | 0.1.0 |

Polyline

A polyline on a map.

| Prop | Type | Description | Default | Since | | ----------------- | --------------------- | ----------------------------------------------------------------------------------------- | ---------------------- | ----- | | color | string | The color of the polyline as a hexadecimal string in the format #RRGGBB or #RRGGBBAA. | '#3887be' | 0.1.0 | | coordinates | LatLng[] | The geographical coordinates of the polyline. | | 0.1.0 | | id | string | The unique identifier of the polyline. | | 0.1.0 | | opacity | number | The opacity of the polyline as a value between 0 and 1. | 1 | 0.1.0 | | width | number | The width of the polyline in CSS pixels. | 4 | 0.1.0 |

AddPolylinesOptions

| Prop | Type | Description | Since | | --------------- | ----------------------- | --------------------------------- | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 | | polylines | Polyline[] | The polylines to add. | 0.1.0 |

PermissionStatus

| Prop | Type | Description | Since | | -------------- | ----------------------------------------------------------- | ------------------------------------------------ | ----- | | location | PermissionState | The permission state of the location permission. | 0.1.0 |

CreateMapOptions

| Prop | Type | Description | Default | Since | | --------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ----- | | bearing | number | The direction the camera points in, in degrees clockwise from north. | 0 | 0.1.0 | | center | LatLng | The geographical coordinate at the center of the map. If not provided, the center of the style is used. | | 0.1.0 | | elementId | string | The ID of the DOM element the map is rendered into. The element must be empty and must not have a background. | | 0.1.0 | | gestures | GestureSettings | The gestures the user can perform on the map. | | 0.1.0 | | mapId | string | The unique identifier of the map. | | 0.1.0 | | maxZoom | number | The maximum zoom level of the map. If not provided, the maximum zoom level of the style is used. | | 0.1.0 | | minZoom | number | The minimum zoom level of the map. If not provided, the minimum zoom level of the style is used. | | 0.1.0 | | pitch | number | The tilt of the camera in degrees, measured from the plane of the map. | 0 | 0.1.0 | | styleJson | string | The style of the map as a JSON string. At most one of styleJson and styleUrl may be provided. | | 0.1.0 | | styleUrl | string | The URL of the style of the map. At most one of styleJson and styleUrl may be provided. | 'https://demotiles.maplibre.org/style.json' | 0.1.0 | | zoom | number | The zoom level of the map. | 0 | 0.1.0 |

GestureSettings

The gestures the user can perform on a map.

| Prop | Type | Description | Default | Since | | ------------ | -------------------- | --------------------------------------------------------- | ----------------- | ----- | | pan | boolean | Whether the user can move the camera by dragging the map. | true | 0.1.0 | | rotate | boolean | Whether the user can rotate the camera. | true | 0.1.0 | | tilt | boolean | Whether the user can tilt the camera. | true | 0.1.0 | | zoom | boolean | Whether the user can zoom the camera. | true | 0.1.0 |

DestroyMapOptions

| Prop | Type | Description | Since | | ----------- | ------------------- | --------------------------------- | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 |

DisableUserLocationOptions

| Prop | Type | Description | Since | | ----------- | ------------------- | --------------------------------- | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 |

ElementFromPointResultOptions

| Prop | Type | Description | Since | | --------------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----- | | mapId | string | null | The unique identifier of the map at the requested point. Must be null if no map is located at the requested point. | 0.1.0 | | requestId | string | The unique identifier of the request. | 0.1.0 |

EnableUserLocationOptions

| Prop | Type | Description | Default | Since | | ------------------ | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----- | | mapId | string | The unique identifier of the map. | | 0.1.0 | | trackingMode | UserTrackingMode | The mode used to track the location of the user with the camera. On Web, FollowWithCourse and FollowWithHeading behave like Follow. | UserTrackingMode.None | 0.1.0 |

FitBoundsOptions

| Prop | Type | Description | Default | Since | | ----------------------- | ------------------------------------------- | ---------------------------------------------------------- | ------------------ | ----- | | animate | boolean | Whether the camera movement is animated. | false | 0.1.0 | | animationDuration | number | The duration of the animation in milliseconds. | 300 | 0.1.0 | | bounds | Bounds | The bounds that must be visible after the camera movement. | | 0.1.0 | | mapId | string | The unique identifier of the map. | | 0.1.0 | | maxZoom | number | The maximum zoom level the camera may reach. | | 0.1.0 | | padding | Padding | The padding between the bounds and the edges of the map. | | 0.1.0 |

Bounds

A geographical area, defined by its southwest and northeast corner.

| Prop | Type | Description | Since | | --------------- | ----------------------------------------- | --------------------------------- | ----- | | northeast | LatLng | The northeast corner of the area. | 0.1.0 | | southwest | LatLng | The southwest corner of the area. | 0.1.0 |

Padding

The padding between the content of a map and its edges in CSS pixels.

| Prop | Type | Description | Default | Since | | ------------ | ------------------- | --------------------------------------------- | -------------- | ----- | | bottom | number | The padding at the bottom edge in CSS pixels. | 0 | 0.1.0 | | left | number | The padding at the left edge in CSS pixels. | 0 | 0.1.0 | | right | number | The padding at the right edge in CSS pixels. | 0 | 0.1.0 | | top | number | The padding at the top edge in CSS pixels. | 0 | 0.1.0 |

GetCameraResult

| Prop | Type | Description | Since | | ------------ | ----------------------------------------- | ------------------------------ | ----- | | camera | Camera | The current camera of the map. | 0.1.0 |

Camera

The camera of a map.

| Prop | Type | Description | Since | | ------------- | ----------------------------------------- | ---------------------------------------------------------------------- | ----- | | bearing | number | The direction the camera points in, in degrees clockwise from north. | 0.1.0 | | center | LatLng | The geographical coordinate at the center of the map. | 0.1.0 | | pitch | number | The tilt of the camera in degrees, measured from the plane of the map. | 0.1.0 | | zoom | number | The zoom level of the map. | 0.1.0 |

GetCameraOptions

| Prop | Type | Description | Since | | ----------- | ------------------- | --------------------------------- | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 |

RemoveAllMarkersOptions

| Prop | Type | Description | Since | | ----------- | ------------------- | --------------------------------- | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 |

RemoveAllPolylinesOptions

| Prop | Type | Description | Since | | ----------- | ------------------- | --------------------------------- | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 |

RemoveGeoJsonSourceByIdOptions

| Prop | Type | Description | Since | | -------------- | ------------------- | ------------------------------------ | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 | | sourceId | string | The unique identifier of the source. | 0.1.0 |

RemoveLayerByIdOptions

| Prop | Type | Description | Since | | ------------- | ------------------- | ----------------------------------- | ----- | | layerId | string | The unique identifier of the layer. | 0.1.0 | | mapId | string | The unique identifier of the map. | 0.1.0 |

RemoveMarkerByIdOptions

| Prop | Type | Description | Since | | -------------- | ------------------- | ------------------------------------ | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 | | markerId | string | The unique identifier of the marker. | 0.1.0 |

RemoveMarkersByIdsOptions

| Prop | Type | Description | Since | | --------------- | --------------------- | -------------------------------------- | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 | | markerIds | string[] | The unique identifiers of the markers. | 0.1.0 |

RemovePolylineByIdOptions

| Prop | Type | Description | Since | | ---------------- | ------------------- | -------------------------------------- | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 | | polylineId | string | The unique identifier of the polyline. | 0.1.0 |

RemovePolylinesByIdsOptions

| Prop | Type | Description | Since | | ----------------- | --------------------- | ---------------------------------------- | ----- | | mapId | string | The unique identifier of the map. | 0.1.0 | | polylineIds | string[] | The unique identifiers of the polylines. | 0.1.0 |

SetCameraOptions

| Prop | Type | Description | Default | Since | | ----------------------- | ------------------------------------------- | ---------------------------------------------------------------------- | ------------------ | ----- | | animate | boolean | Whether the camera movement is animated. | false | 0.1.0 | | animationDuration | number | The duration of the animation in milliseconds. | 300 | 0.1.0 | | bearing | number | The direction the camera points in, in degrees clockwise from north. | | 0.1.0 | | center | LatLng | The geographical coordinate at the center of the map. | | 0.1.0 | | mapId | string | The unique identifier of the map. | | 0.1.0 | | padding | Padding | The padding between the content of the map and its edges. | | 0.1.0 | | pitch | number | The tilt of the camera in degrees, measured from the plane of the map. | | 0.1.0 | | zoom | number | The zoom level of the map. | | 0.1.0 |

SetFrameOptions

| Prop | Type | Description | Since | | ----------------- | --------------------------------------------------------- | ------------------------------------------------------ | ----- | | contentSize | MapContentSize | The size of the scrollable content of the map element. | 0.1.0 | | frame | MapFrame | The new position and size of the map viewport. | 0.1.0 | | mapId | string | The unique identifier of the map. | 0.1.0 |

MapContentSize

The size of the scrollable content of a map element in CSS pixels.

| Prop | Type | Description | Since | | ------------ | ------------------- | ---------------------------------------- | ----- | | height | number | The height of the content in CSS pixels. | 0.1.0 | | width | number | The width of the content in CSS pixels. | 0.1.0 |

MapFrame

The position and size of a map in CSS pixels, relative to the viewport.

| Prop

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Capacitor MapLibre Plugin

Features

Use Cases

Compatibility

Guides

Installation

Android

Variables

Permissions

iOS

Web

Configuration

Usage

Getting started

Create a map

Move the camera

Add markers

Add polylines

Add GeoJSON data

Display the location of the user

Listen for events

Destroy a map

API

addGeoJsonSource(...)

addLayer(...)

addMarker(...)

addMarkers(...)

addPolyline(...)

addPolylines(...)

checkPermissions()

createMap(...)

destroyMap(...)

disableUserLocation(...)

elementFromPointResult(...)

enableUserLocation(...)

fitBounds(...)

getCamera(...)

removeAllMarkers(...)

removeAllPolylines(...)

removeGeoJsonSourceById(...)

removeLayerById(...)

removeMarkerById(...)

removeMarkersByIds(...)

removePolylineById(...)

removePolylinesByIds(...)

requestPermissions()

setCamera(...)

setFrame(...)

setGesturesEnabled(...)

setStyle(...)

updateGeoJsonSourceById(...)

updateMarkerById(...)

updatePolylineById(...)

addListener('cameraIdle', ...)

addListener('cameraMoveStarted', ...)

addListener('elementFromPointRequest', ...)

addListener('mapClick', ...)

addListener('markerClick', ...)

addListener('markerDrag', ...)

addListener('markerDragEnd', ...)

addListener('markerDragStart', ...)

addListener('userLocationChange', ...)

removeAllListeners()

Interfaces

AddGeoJsonSourceOptions

AddLayerOptions

LayerPaint

AddMarkerOptions

Marker

LatLng

MarkerIconSize

AddMarkersOptions

AddPolylineOptions

Polyline