--- description: Unofficial Capacitor plugin to create native MapLibre maps on Android, iOS, and Web with markers, polylines, GeoJSON layers, and user location. title: Capacitor MapLibre Plugin - Capawesome image: https://capawesome.io/docs/assets/images/social/sdks/capacitor/maplibre.png --- [Skip to content ](#capacitor-maplibre-plugin) [πŸ“² Introducing **Build Sharing** β€” get your builds onto testers' devices with a link & QR code. No account required. ](/blog/share-mobile-app-builds-with-testers/) * [ SDKs ](/docs/sdks/) * [ Formbricks ](/docs/sdks/capacitor/formbricks/) * [ Geocoder ](/docs/sdks/capacitor/geocoder/) * [ Geofences ](/docs/sdks/capacitor/geofences/) * [ Google Sign-In ](/docs/sdks/capacitor/google-sign-in/) * [ Grafana Faro ](/docs/sdks/capacitor/grafana-faro/) * [ Gyroscope ](/docs/sdks/capacitor/gyroscope/) * [ Haptics ](/docs/sdks/capacitor/haptics/) * [ Health ](/docs/sdks/capacitor/health/) * [ Home Indicator ](/docs/sdks/capacitor/home-indicator/) * [ In-App Browser ](/docs/sdks/capacitor/in-app-browser/) * [ Install Referrer ](/docs/sdks/capacitor/install-referrer/) * [ Intercom ](/docs/sdks/capacitor/intercom/) * [ Intune ](/docs/sdks/capacitor/intune/) * [ Keep Awake ](/docs/sdks/capacitor/keep-awake/) * [ libSQL ](/docs/sdks/capacitor/libsql/) * [ Light Sensor ](/docs/sdks/capacitor/light-sensor/) * [ Live Update ](/docs/sdks/capacitor/live-update/) * [ LLM ](/docs/sdks/capacitor/llm/) * [ Localization ](/docs/sdks/capacitor/localization/) * [ Mail Composer ](/docs/sdks/capacitor/mail-composer/) * [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/) * MapLibre [ MapLibre ](/docs/sdks/capacitor/maplibre/) * [ iOS ](#ios) * [ Web ](#web) * [ Configuration ](#configuration) * [ Usage ](#usage) * [ API ](#api) * [ Type Aliases ](#type-aliases) * [ Enums ](#enums) * [ FAQ ](#faq) * [ Related Plugins ](#related-plugins) * [ Newsletter ](#newsletter) * [ Changelog ](#changelog) * [ License ](#license) * [ Maps Launcher ](/docs/sdks/capacitor/maps-launcher/) * [ Media Session ](/docs/sdks/capacitor/media-session/) * [ ML Kit ](/docs/sdks/capacitor/mlkit/) * [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/) * [ Network ](/docs/sdks/capacitor/network/) * [ NFC ](/docs/sdks/capacitor/nfc/) * [ Node.js ](/docs/sdks/capacitor/nodejs/) * [ OAuth ](/docs/sdks/capacitor/oauth/) * [ Passkeys ](/docs/sdks/capacitor/passkeys/) * [ Password Autofill ](/docs/sdks/capacitor/password-autofill/) * [ PDF Generator ](/docs/sdks/capacitor/pdf-generator/) * [ PDF Viewer ](/docs/sdks/capacitor/pdf-viewer/) * [ Pedometer ](/docs/sdks/capacitor/pedometer/) * [ Permissions ](/docs/sdks/capacitor/permissions/) * [ Phone Dialer ](/docs/sdks/capacitor/phone-dialer/) * [ Photo Editor ](/docs/sdks/capacitor/photo-editor/) * [ Photo Manipulator ](/docs/sdks/capacitor/photo-manipulator/) * [ PixLive ](/docs/sdks/capacitor/pixlive/) * [ PostHog ](/docs/sdks/capacitor/posthog/) * [ Printer ](/docs/sdks/capacitor/printer/) * [ Privacy Screen ](/docs/sdks/capacitor/privacy-screen/) * [ Proximity Sensor ](/docs/sdks/capacitor/proximity-sensor/) * [ Purchases ](/docs/sdks/capacitor/purchases/) * [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/) * [ Root Detection ](/docs/sdks/capacitor/root-detection/) * [ Screen Brightness ](/docs/sdks/capacitor/screen-brightness/) * [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/) * [ Screen Reader ](/docs/sdks/capacitor/screen-reader/) * [ Screenshot ](/docs/sdks/capacitor/screenshot/) * [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/) * [ Settings Launcher ](/docs/sdks/capacitor/settings-launcher/) * [ Shake ](/docs/sdks/capacitor/shake/) * [ Silent Mode ](/docs/sdks/capacitor/silent-mode/) * [ SIM ](/docs/sdks/capacitor/sim/) * [ SMS Composer ](/docs/sdks/capacitor/sms-composer/) * [ Speech Recognition ](/docs/sdks/capacitor/speech-recognition/) * [ Speech Synthesis ](/docs/sdks/capacitor/speech-synthesis/) * [ Share Target ](/docs/sdks/capacitor/share-target/) * [ Square Mobile Payments ](/docs/sdks/capacitor/square-mobile-payments/) * [ SQLite ](/docs/sdks/capacitor/sqlite/) * [ Superwall ](/docs/sdks/capacitor/superwall/) * [ System WebView ](/docs/sdks/capacitor/system-webview/) * [ Tauri ](/docs/sdks/capacitor/tauri/) * [ Text Interaction ](/docs/sdks/capacitor/text-interaction/) * [ Text Zoom ](/docs/sdks/capacitor/text-zoom/) * [ Thermal State ](/docs/sdks/capacitor/thermal-state/) * [ Toast ](/docs/sdks/capacitor/toast/) * [ Torch ](/docs/sdks/capacitor/torch/) * [ Vault ](/docs/sdks/capacitor/vault/) * [ Volume ](/docs/sdks/capacitor/volume/) * [ Wallet ](/docs/sdks/capacitor/wallet/) * [ Watch ](/docs/sdks/capacitor/watch/) * [ Wifi ](/docs/sdks/capacitor/wifi/) * [ YouTube Player ](/docs/sdks/capacitor/youtube-player/) * [ Zip ](/docs/sdks/capacitor/zip/) * [ Cordova ](/docs/sdks/cordova/) * [ Cloud ](/docs/cloud/) * [ Integrations ](/docs/cloud/live-updates/integrations/) * Concepts * Reference * [ Troubleshooting ](/docs/cloud/live-updates/troubleshooting/) * [ FAQ ](/docs/cloud/live-updates/faq/) * [ Native Builds ](/docs/cloud/native-builds/) * [ Set Up Environments ](/docs/cloud/native-builds/environments/) * [ Set Up Native Configurations ](/docs/cloud/native-builds/native-configurations/) * [ Auto-Increment Build Numbers ](/docs/cloud/native-builds/auto-incrementing-build-numbers/) * [ Configure the Web Build Script ](/docs/cloud/native-builds/web-build-script/) * [ Build from a Monorepo ](/docs/cloud/native-builds/monorepo/) * [ Use pnpm, Yarn, or bun ](/docs/cloud/native-builds/package-managers/) * [ Install Private npm Packages ](/docs/cloud/native-builds/npm-private-registry/) * [ Override the Java Version ](/docs/cloud/native-builds/override-java-version/) * [ Custom iOS Provisioning Profiles ](/docs/cloud/native-builds/custom-ios-provisioning-profiles/) * [ Build without Git ](/docs/cloud/native-builds/build-without-git/) * [ Access Git Behind a Firewall ](/docs/cloud/native-builds/firewall-access/) * [ Integrations ](/docs/cloud/native-builds/integrations/) * Reference * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ FAQ ](/docs/cloud/native-builds/faq/) * [ App Store Publishing ](/docs/cloud/app-store-publishing/) * [ Submit a Build ](/docs/cloud/app-store-publishing/submit-a-build/) * [ Submit Automatically After a Build ](/docs/cloud/app-store-publishing/submit-automatically/) * [ Troubleshooting ](/docs/cloud/app-store-publishing/troubleshooting/) * [ FAQ ](/docs/cloud/app-store-publishing/faq/) * [ Automations ](/docs/cloud/automations/) * [ Reference ](/docs/cloud/automations/reference/) * [ Troubleshooting ](/docs/cloud/automations/troubleshooting/) * [ FAQ ](/docs/cloud/automations/faq/) * [ Assist ](/docs/cloud/assist/) * [ CLI ](/docs/cloud/cli/) * APIs and SDKs * [ Webhooks ](/docs/cloud/webhooks/) * [ Integrations ](/docs/cloud/integrations/) * Notifications * Account * [ Organization ](/docs/cloud/organizations/) * [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/) * [ Network Restrictions ](/docs/cloud/organizations/network-restrictions/) * [ Audit Logs ](/docs/cloud/organizations/audit-logs/) * [ Billing ](/docs/cloud/organizations/billing/) * [ License Keys ](/docs/cloud/license-keys/) * [ AI ](/docs/ai/) * [ Insiders ](/docs/insiders/) * [ Billing & Plans ](/docs/insiders/billing-and-plans/) * [ FAQ ](/docs/insiders/faq/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/support/) * [ Contributing ](/docs/contributing/) * Contributing code * [ Code of Conduct ](/docs/contributing/code-of-conduct/) * [ Questions ](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion) * [ Blog ](/blog/) * Categories * [ iOS ](#ios) * [ Web ](#web) * [ Configuration ](#configuration) * [ Usage ](#usage) * [ API ](#api) * [ Type Aliases ](#type-aliases) * [ Enums ](#enums) * [ FAQ ](#faq) * [ Related Plugins ](#related-plugins) * [ Newsletter ](#newsletter) * [ Changelog ](#changelog) * [ License ](#license) Build and Ship Mobile Apps Faster Cloud builds, OTA live updates, and automated store releases β€” everything your mobile team needs in one platform. [Start for free ](https://console.cloud.capawesome.io/?utm%5Fsource=docs&utm%5Fmedium=sidebar%5Fcta&utm%5Fcampaign=docs%5Fcta) [See our plans ](https://capawesome.io/pricing/?utm%5Fsource=docs&utm%5Fmedium=sidebar%5Fcta&utm%5Fcampaign=docs%5Fcta) # Capacitor MapLibre Plugin[ΒΆ](#capacitor-maplibre-plugin "Permanent link") Unofficial Capacitor plugin to create native [MapLibre](https://maplibre.org/) maps on Android, iOS, and Web.[1](#fn:1) [ ![Deliver Live Updates to your Capacitor app with Capawesome Cloud](../../../assets/external/cloud.capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.69628c3f.png) ](https://cloud.capawesome.io/) ## Features[ΒΆ](#features "Permanent link") 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](https://github.com/capawesome-team/capacitor-plugins/issues) and we'll take a look! ## Use Cases[ΒΆ](#use-cases "Permanent link") 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[ΒΆ](#compatibility "Permanent link") | Plugin Version | Capacitor Version | Status | | -------------- | ----------------- | -------------- | | 0.x.x | \>=8.x.x | Active support | ## Installation[ΒΆ](#installation "Permanent link") You can use our **AI-Assisted Setup** to install the plugin. Add the [Capawesome Skills](https://github.com/capawesome-team/skills) to your AI tool using the following command: `[](#%5F%5Fcodelineno-0-1)npx skills add capawesome-team/skills --skill capacitor-plugins ` Then use the following prompt: `` [](#%5F%5Fcodelineno-1-1)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: `[](#%5F%5Fcodelineno-2-1)npm install @capawesome/capacitor-maplibre [](#%5F%5Fcodelineno-2-2)npx cap sync ` ### Android[ΒΆ](#android "Permanent link") On Android, the plugin uses the [MapLibre Native SDK for Android](https://github.com/maplibre/maplibre-native). #### Variables[ΒΆ](#variables "Permanent link") 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[ΒΆ](#permissions "Permanent link") 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: `[](#%5F%5Fcodelineno-3-1) [](#%5F%5Fcodelineno-3-2) [](#%5F%5Fcodelineno-3-3) ` ### iOS[ΒΆ](#ios "Permanent link") On iOS, the plugin uses the [MapLibre Native SDK for iOS](https://github.com/maplibre/maplibre-native). 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: `[](#%5F%5Fcodelineno-4-1)NSLocationWhenInUseUsageDescription [](#%5F%5Fcodelineno-4-2)The app needs your location to display it on the map. ` Without this key, `checkPermissions()`, `requestPermissions()` and `enableUserLocation(...)` reject with an error. ### Web[ΒΆ](#web "Permanent link") The web implementation uses [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/), which is installed automatically as a dependency of the plugin. Its stylesheet is not bundled with the plugin, so you must import it once in your app: `[](#%5F%5Fcodelineno-5-1)import 'maplibre-gl/dist/maplibre-gl.css'; ` Without the stylesheet, the map canvas and the markers are mispositioned. ## Configuration[ΒΆ](#configuration "Permanent link") No configuration required for this plugin. ## Usage[ΒΆ](#usage "Permanent link") The following examples show how to use the plugin. ### Getting started[ΒΆ](#getting-started "Permanent link") Add an **empty** element to your app that defines the position and size of the map: `[](#%5F%5Fcodelineno-6-1)
` `[](#%5F%5Fcodelineno-7-1)#map { [](#%5F%5Fcodelineno-7-2) /* The map must not have a background so that the native map stays visible. */ [](#%5F%5Fcodelineno-7-3) background: transparent; [](#%5F%5Fcodelineno-7-4) height: 400px; [](#%5F%5Fcodelineno-7-5) width: 100%; [](#%5F%5Fcodelineno-7-6)} ` 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[ΒΆ](#create-a-map "Permanent link") `[](#%5F%5Fcodelineno-8-1)import { MapLibre } from '@capawesome/capacitor-maplibre'; [](#%5F%5Fcodelineno-8-2) [](#%5F%5Fcodelineno-8-3)const createMap = async () => { [](#%5F%5Fcodelineno-8-4) await MapLibre.createMap({ [](#%5F%5Fcodelineno-8-5) center: { latitude: 48.137154, longitude: 11.576124 }, [](#%5F%5Fcodelineno-8-6) elementId: 'map', [](#%5F%5Fcodelineno-8-7) mapId: 'my-map', [](#%5F%5Fcodelineno-8-8) styleUrl: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json', [](#%5F%5Fcodelineno-8-9) zoom: 12, [](#%5F%5Fcodelineno-8-10) }); [](#%5F%5Fcodelineno-8-11)}; ` If no style is provided, the [MapLibre demo style](https://demotiles.maplibre.org/style.json) is used, which is a test style and not intended for production use (see [FAQ](#where-do-i-get-map-styles-and-do-i-need-an-api-key)). ### Move the camera[ΒΆ](#move-the-camera "Permanent link") `[](#%5F%5Fcodelineno-9-1)import { MapLibre } from '@capawesome/capacitor-maplibre'; [](#%5F%5Fcodelineno-9-2) [](#%5F%5Fcodelineno-9-3)const moveCamera = async () => { [](#%5F%5Fcodelineno-9-4) await MapLibre.setCamera({ [](#%5F%5Fcodelineno-9-5) animate: true, [](#%5F%5Fcodelineno-9-6) animationDuration: 1000, [](#%5F%5Fcodelineno-9-7) bearing: 30, [](#%5F%5Fcodelineno-9-8) center: { latitude: 52.520008, longitude: 13.404954 }, [](#%5F%5Fcodelineno-9-9) mapId: 'my-map', [](#%5F%5Fcodelineno-9-10) pitch: 45, [](#%5F%5Fcodelineno-9-11) zoom: 11, [](#%5F%5Fcodelineno-9-12) }); [](#%5F%5Fcodelineno-9-13) await MapLibre.fitBounds({ [](#%5F%5Fcodelineno-9-14) animate: true, [](#%5F%5Fcodelineno-9-15) bounds: { [](#%5F%5Fcodelineno-9-16) northeast: { latitude: 55.058347, longitude: 15.041896 }, [](#%5F%5Fcodelineno-9-17) southwest: { latitude: 47.270111, longitude: 5.866342 }, [](#%5F%5Fcodelineno-9-18) }, [](#%5F%5Fcodelineno-9-19) mapId: 'my-map', [](#%5F%5Fcodelineno-9-20) padding: { bottom: 32, left: 32, right: 32, top: 32 }, [](#%5F%5Fcodelineno-9-21) }); [](#%5F%5Fcodelineno-9-22)}; ` ### Add markers[ΒΆ](#add-markers "Permanent link") `[](#%5F%5Fcodelineno-10-1)import { MapLibre, MarkerIconAnchor } from '@capawesome/capacitor-maplibre'; [](#%5F%5Fcodelineno-10-2) [](#%5F%5Fcodelineno-10-3)const addMarker = async () => { [](#%5F%5Fcodelineno-10-4) await MapLibre.addMarker({ [](#%5F%5Fcodelineno-10-5) mapId: 'my-map', [](#%5F%5Fcodelineno-10-6) marker: { [](#%5F%5Fcodelineno-10-7) coordinates: { latitude: 48.137154, longitude: 11.576124 }, [](#%5F%5Fcodelineno-10-8) iconAnchor: MarkerIconAnchor.Center, [](#%5F%5Fcodelineno-10-9) iconSize: { height: 32, width: 32 }, [](#%5F%5Fcodelineno-10-10) iconUrl: 'https://example.com/marker.png', [](#%5F%5Fcodelineno-10-11) id: 'my-marker', [](#%5F%5Fcodelineno-10-12) }, [](#%5F%5Fcodelineno-10-13) }); [](#%5F%5Fcodelineno-10-14)}; [](#%5F%5Fcodelineno-10-15) [](#%5F%5Fcodelineno-10-16)const moveMarker = async () => { [](#%5F%5Fcodelineno-10-17) await MapLibre.updateMarkerById({ [](#%5F%5Fcodelineno-10-18) animate: true, [](#%5F%5Fcodelineno-10-19) animationDuration: 1000, [](#%5F%5Fcodelineno-10-20) coordinates: { latitude: 48.370545, longitude: 10.89779 }, [](#%5F%5Fcodelineno-10-21) mapId: 'my-map', [](#%5F%5Fcodelineno-10-22) markerId: 'my-marker', [](#%5F%5Fcodelineno-10-23) rotation: 90, [](#%5F%5Fcodelineno-10-24) }); [](#%5F%5Fcodelineno-10-25)}; [](#%5F%5Fcodelineno-10-26) [](#%5F%5Fcodelineno-10-27)const removeMarker = async () => { [](#%5F%5Fcodelineno-10-28) await MapLibre.removeMarkerById({ mapId: 'my-map', markerId: 'my-marker' }); [](#%5F%5Fcodelineno-10-29)}; ` ### Add polylines[ΒΆ](#add-polylines "Permanent link") `[](#%5F%5Fcodelineno-11-1)import { MapLibre } from '@capawesome/capacitor-maplibre'; [](#%5F%5Fcodelineno-11-2) [](#%5F%5Fcodelineno-11-3)const addPolyline = async () => { [](#%5F%5Fcodelineno-11-4) await MapLibre.addPolyline({ [](#%5F%5Fcodelineno-11-5) mapId: 'my-map', [](#%5F%5Fcodelineno-11-6) polyline: { [](#%5F%5Fcodelineno-11-7) color: '#3887be', [](#%5F%5Fcodelineno-11-8) coordinates: [ [](#%5F%5Fcodelineno-11-9) { latitude: 48.137154, longitude: 11.576124 }, [](#%5F%5Fcodelineno-11-10) { latitude: 49.45203, longitude: 11.076665 }, [](#%5F%5Fcodelineno-11-11) { latitude: 52.520008, longitude: 13.404954 }, [](#%5F%5Fcodelineno-11-12) ], [](#%5F%5Fcodelineno-11-13) id: 'my-polyline', [](#%5F%5Fcodelineno-11-14) width: 5, [](#%5F%5Fcodelineno-11-15) }, [](#%5F%5Fcodelineno-11-16) }); [](#%5F%5Fcodelineno-11-17)}; ` ### Add GeoJSON data[ΒΆ](#add-geojson-data "Permanent link") `[](#%5F%5Fcodelineno-12-1)import { LayerType, MapLibre } from '@capawesome/capacitor-maplibre'; [](#%5F%5Fcodelineno-12-2) [](#%5F%5Fcodelineno-12-3)const addGeoJson = async () => { [](#%5F%5Fcodelineno-12-4) await MapLibre.addGeoJsonSource({ [](#%5F%5Fcodelineno-12-5) mapId: 'my-map', [](#%5F%5Fcodelineno-12-6) sourceId: 'my-source', [](#%5F%5Fcodelineno-12-7) url: 'https://example.com/routes.geojson', [](#%5F%5Fcodelineno-12-8) }); [](#%5F%5Fcodelineno-12-9) await MapLibre.addLayer({ [](#%5F%5Fcodelineno-12-10) layerId: 'my-layer', [](#%5F%5Fcodelineno-12-11) mapId: 'my-map', [](#%5F%5Fcodelineno-12-12) paint: { lineColor: '#3887be', lineWidth: 4 }, [](#%5F%5Fcodelineno-12-13) sourceId: 'my-source', [](#%5F%5Fcodelineno-12-14) type: LayerType.Line, [](#%5F%5Fcodelineno-12-15) }); [](#%5F%5Fcodelineno-12-16)}; ` ### Display the location of the user[ΒΆ](#display-the-location-of-the-user "Permanent link") `[](#%5F%5Fcodelineno-13-1)import { MapLibre, UserTrackingMode } from '@capawesome/capacitor-maplibre'; [](#%5F%5Fcodelineno-13-2) [](#%5F%5Fcodelineno-13-3)const enableUserLocation = async () => { [](#%5F%5Fcodelineno-13-4) let status = await MapLibre.checkPermissions(); [](#%5F%5Fcodelineno-13-5) if (status.location === 'prompt') { [](#%5F%5Fcodelineno-13-6) status = await MapLibre.requestPermissions(); [](#%5F%5Fcodelineno-13-7) } [](#%5F%5Fcodelineno-13-8) if (status.location !== 'granted') { [](#%5F%5Fcodelineno-13-9) return; [](#%5F%5Fcodelineno-13-10) } [](#%5F%5Fcodelineno-13-11) await MapLibre.enableUserLocation({ [](#%5F%5Fcodelineno-13-12) mapId: 'my-map', [](#%5F%5Fcodelineno-13-13) trackingMode: UserTrackingMode.Follow, [](#%5F%5Fcodelineno-13-14) }); [](#%5F%5Fcodelineno-13-15)}; ` ### Listen for events[ΒΆ](#listen-for-events "Permanent link") `[](#%5F%5Fcodelineno-14-1)import { MapLibre } from '@capawesome/capacitor-maplibre'; [](#%5F%5Fcodelineno-14-2) [](#%5F%5Fcodelineno-14-3)const addListeners = async () => { [](#%5F%5Fcodelineno-14-4) await MapLibre.addListener('mapClick', event => { [](#%5F%5Fcodelineno-14-5) console.log('Map clicked:', event.coordinates); [](#%5F%5Fcodelineno-14-6) }); [](#%5F%5Fcodelineno-14-7) await MapLibre.addListener('markerClick', event => { [](#%5F%5Fcodelineno-14-8) console.log('Marker clicked:', event.markerId); [](#%5F%5Fcodelineno-14-9) }); [](#%5F%5Fcodelineno-14-10) await MapLibre.addListener('cameraIdle', event => { [](#%5F%5Fcodelineno-14-11) console.log('Camera idle:', event.camera); [](#%5F%5Fcodelineno-14-12) }); [](#%5F%5Fcodelineno-14-13)}; ` ### Destroy a map[ΒΆ](#destroy-a-map "Permanent link") `[](#%5F%5Fcodelineno-15-1)import { MapLibre } from '@capawesome/capacitor-maplibre'; [](#%5F%5Fcodelineno-15-2) [](#%5F%5Fcodelineno-15-3)const destroyMap = async () => { [](#%5F%5Fcodelineno-15-4) await MapLibre.destroyMap({ mapId: 'my-map' }); [](#%5F%5Fcodelineno-15-5)}; ` ## API[ΒΆ](#api "Permanent link") * [addGeoJsonSource(...)](#addgeojsonsource) * [addLayer(...)](#addlayer) * [addMarker(...)](#addmarker) * [addMarkers(...)](#addmarkers) * [addPolyline(...)](#addpolyline) * [addPolylines(...)](#addpolylines) * [checkPermissions()](#checkpermissions) * [createMap(...)](#createmap) * [destroyMap(...)](#destroymap) * [disableUserLocation(...)](#disableuserlocation) * [elementFromPointResult(...)](#elementfrompointresult) * [enableUserLocation(...)](#enableuserlocation) * [fitBounds(...)](#fitbounds) * [getCamera(...)](#getcamera) * [removeAllMarkers(...)](#removeallmarkers) * [removeAllPolylines(...)](#removeallpolylines) * [removeGeoJsonSourceById(...)](#removegeojsonsourcebyid) * [removeLayerById(...)](#removelayerbyid) * [removeMarkerById(...)](#removemarkerbyid) * [removeMarkersByIds(...)](#removemarkersbyids) * [removePolylineById(...)](#removepolylinebyid) * [removePolylinesByIds(...)](#removepolylinesbyids) * [requestPermissions()](#requestpermissions) * [setCamera(...)](#setcamera) * [setFrame(...)](#setframe) * [setGesturesEnabled(...)](#setgesturesenabled) * [setStyle(...)](#setstyle) * [updateGeoJsonSourceById(...)](#updategeojsonsourcebyid) * [updateMarkerById(...)](#updatemarkerbyid) * [updatePolylineById(...)](#updatepolylinebyid) * [addListener('cameraIdle', ...)](#addlistenercameraidle-) * [addListener('cameraMoveStarted', ...)](#addlistenercameramovestarted-) * [addListener('elementFromPointRequest', ...)](#addlistenerelementfrompointrequest-) * [addListener('mapClick', ...)](#addlistenermapclick-) * [addListener('markerClick', ...)](#addlistenermarkerclick-) * [addListener('markerDrag', ...)](#addlistenermarkerdrag-) * [addListener('markerDragEnd', ...)](#addlistenermarkerdragend-) * [addListener('markerDragStart', ...)](#addlistenermarkerdragstart-) * [addListener('userLocationChange', ...)](#addlisteneruserlocationchange-) * [removeAllListeners()](#removealllisteners) * [Interfaces](#interfaces) * [Type Aliases](#type-aliases) * [Enums](#enums) ### addGeoJsonSource(...)[ΒΆ](#addgeojsonsource "Permanent link") `[](#%5F%5Fcodelineno-16-1)addGeoJsonSource(options: AddGeoJsonSourceOptions) => Promise ` Add a GeoJSON source to the map. Use `addLayer(...)` to render the data of the source. | Param | Type | | ----------- | --------------------------------------------------- | | **options** | [AddGeoJsonSourceOptions](#addgeojsonsourceoptions) | **Since:** 0.1.0 --- ### addLayer(...)[ΒΆ](#addlayer "Permanent link") `[](#%5F%5Fcodelineno-17-1)addLayer(options: AddLayerOptions) => Promise ` Add a layer to the map that renders the data of a GeoJSON source. | Param | Type | | ----------- | ----------------------------------- | | **options** | [AddLayerOptions](#addlayeroptions) | **Since:** 0.1.0 --- ### addMarker(...)[ΒΆ](#addmarker "Permanent link") `[](#%5F%5Fcodelineno-18-1)addMarker(options: AddMarkerOptions) => Promise ` Add a marker to the map. | Param | Type | | ----------- | ------------------------------------- | | **options** | [AddMarkerOptions](#addmarkeroptions) | **Since:** 0.1.0 --- ### addMarkers(...)[ΒΆ](#addmarkers "Permanent link") `[](#%5F%5Fcodelineno-19-1)addMarkers(options: AddMarkersOptions) => Promise ` Add multiple markers to the map. | Param | Type | | ----------- | --------------------------------------- | | **options** | [AddMarkersOptions](#addmarkersoptions) | **Since:** 0.1.0 --- ### addPolyline(...)[ΒΆ](#addpolyline "Permanent link") `[](#%5F%5Fcodelineno-20-1)addPolyline(options: AddPolylineOptions) => Promise ` Add a polyline to the map. | Param | Type | | ----------- | ----------------------------------------- | | **options** | [AddPolylineOptions](#addpolylineoptions) | **Since:** 0.1.0 --- ### addPolylines(...)[ΒΆ](#addpolylines "Permanent link") `[](#%5F%5Fcodelineno-21-1)addPolylines(options: AddPolylinesOptions) => Promise ` Add multiple polylines to the map. | Param | Type | | ----------- | ------------------------------------------- | | **options** | [AddPolylinesOptions](#addpolylinesoptions) | **Since:** 0.1.0 --- ### checkPermissions()[ΒΆ](#checkpermissions "Permanent link") `[](#%5F%5Fcodelineno-22-1)checkPermissions() => Promise ` Check the location permission. **Returns:** `Promise<[PermissionStatus](#permissionstatus)>` **Since:** 0.1.0 --- ### createMap(...)[ΒΆ](#createmap "Permanent link") `[](#%5F%5Fcodelineno-23-1)createMap(options: CreateMapOptions) => Promise ` 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](#createmapoptions) | **Since:** 0.1.0 --- ### destroyMap(...)[ΒΆ](#destroymap "Permanent link") `[](#%5F%5Fcodelineno-24-1)destroyMap(options: DestroyMapOptions) => Promise ` Destroy a map and release all its resources. | Param | Type | | ----------- | --------------------------------------- | | **options** | [DestroyMapOptions](#destroymapoptions) | **Since:** 0.1.0 --- ### disableUserLocation(...)[ΒΆ](#disableuserlocation "Permanent link") `[](#%5F%5Fcodelineno-25-1)disableUserLocation(options: DisableUserLocationOptions) => Promise ` Stop displaying the location of the user on the map. | Param | Type | | ----------- | --------------------------------------------------------- | | **options** | [DisableUserLocationOptions](#disableuserlocationoptions) | **Since:** 0.1.0 --- ### elementFromPointResult(...)[ΒΆ](#elementfrompointresult "Permanent link") `[](#%5F%5Fcodelineno-26-1)elementFromPointResult(options: ElementFromPointResultOptions) => Promise ` 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](#elementfrompointresultoptions) | **Since:** 0.1.0 --- ### enableUserLocation(...)[ΒΆ](#enableuserlocation "Permanent link") `[](#%5F%5Fcodelineno-27-1)enableUserLocation(options: EnableUserLocationOptions) => Promise ` Display the location of the user on the map. Call this method again to change the tracking mode. | Param | Type | | ----------- | ------------------------------------------------------- | | **options** | [EnableUserLocationOptions](#enableuserlocationoptions) | **Since:** 0.1.0 --- ### fitBounds(...)[ΒΆ](#fitbounds "Permanent link") `[](#%5F%5Fcodelineno-28-1)fitBounds(options: FitBoundsOptions) => Promise ` Move the camera so that the given bounds are visible. | Param | Type | | ----------- | ------------------------------------- | | **options** | [FitBoundsOptions](#fitboundsoptions) | **Since:** 0.1.0 --- ### getCamera(...)[ΒΆ](#getcamera "Permanent link") `[](#%5F%5Fcodelineno-29-1)getCamera(options: GetCameraOptions) => Promise ` Get the current camera of the map. | Param | Type | | ----------- | ------------------------------------- | | **options** | [GetCameraOptions](#getcameraoptions) | **Returns:** `Promise<[GetCameraResult](#getcameraresult)>` **Since:** 0.1.0 --- ### removeAllMarkers(...)[ΒΆ](#removeallmarkers "Permanent link") `[](#%5F%5Fcodelineno-30-1)removeAllMarkers(options: RemoveAllMarkersOptions) => Promise ` Remove all markers from the map. | Param | Type | | ----------- | --------------------------------------------------- | | **options** | [RemoveAllMarkersOptions](#removeallmarkersoptions) | **Since:** 0.1.0 --- ### removeAllPolylines(...)[ΒΆ](#removeallpolylines "Permanent link") `[](#%5F%5Fcodelineno-31-1)removeAllPolylines(options: RemoveAllPolylinesOptions) => Promise ` Remove all polylines from the map. | Param | Type | | ----------- | ------------------------------------------------------- | | **options** | [RemoveAllPolylinesOptions](#removeallpolylinesoptions) | **Since:** 0.1.0 --- ### removeGeoJsonSourceById(...)[ΒΆ](#removegeojsonsourcebyid "Permanent link") `[](#%5F%5Fcodelineno-32-1)removeGeoJsonSourceById(options: RemoveGeoJsonSourceByIdOptions) => Promise ` Remove a GeoJSON source from the map. All layers that use the source must be removed first. | Param | Type | | ----------- | ----------------------------------------------------------------- | | **options** | [RemoveGeoJsonSourceByIdOptions](#removegeojsonsourcebyidoptions) | **Since:** 0.1.0 --- ### removeLayerById(...)[ΒΆ](#removelayerbyid "Permanent link") `[](#%5F%5Fcodelineno-33-1)removeLayerById(options: RemoveLayerByIdOptions) => Promise ` Remove a layer from the map. | Param | Type | | ----------- | ------------------------------------------------- | | **options** | [RemoveLayerByIdOptions](#removelayerbyidoptions) | **Since:** 0.1.0 --- ### removeMarkerById(...)[ΒΆ](#removemarkerbyid "Permanent link") `[](#%5F%5Fcodelineno-34-1)removeMarkerById(options: RemoveMarkerByIdOptions) => Promise ` Remove a marker from the map. | Param | Type | | ----------- | --------------------------------------------------- | | **options** | [RemoveMarkerByIdOptions](#removemarkerbyidoptions) | **Since:** 0.1.0 --- ### removeMarkersByIds(...)[ΒΆ](#removemarkersbyids "Permanent link") `[](#%5F%5Fcodelineno-35-1)removeMarkersByIds(options: RemoveMarkersByIdsOptions) => Promise ` Remove multiple markers from the map. | Param | Type | | ----------- | ------------------------------------------------------- | | **options** | [RemoveMarkersByIdsOptions](#removemarkersbyidsoptions) | **Since:** 0.1.0 --- ### removePolylineById(...)[ΒΆ](#removepolylinebyid "Permanent link") `[](#%5F%5Fcodelineno-36-1)removePolylineById(options: RemovePolylineByIdOptions) => Promise ` Remove a polyline from the map. | Param | Type | | ----------- | ------------------------------------------------------- | | **options** | [RemovePolylineByIdOptions](#removepolylinebyidoptions) | **Since:** 0.1.0 --- ### removePolylinesByIds(...)[ΒΆ](#removepolylinesbyids "Permanent link") `[](#%5F%5Fcodelineno-37-1)removePolylinesByIds(options: RemovePolylinesByIdsOptions) => Promise ` Remove multiple polylines from the map. | Param | Type | | ----------- | ----------------------------------------------------------- | | **options** | [RemovePolylinesByIdsOptions](#removepolylinesbyidsoptions) | **Since:** 0.1.0 --- ### requestPermissions()[ΒΆ](#requestpermissions "Permanent link") `[](#%5F%5Fcodelineno-38-1)requestPermissions() => Promise ` Request the location permission. **Returns:** `Promise<[PermissionStatus](#permissionstatus)>` **Since:** 0.1.0 --- ### setCamera(...)[ΒΆ](#setcamera "Permanent link") `[](#%5F%5Fcodelineno-39-1)setCamera(options: SetCameraOptions) => Promise ` Move the camera of the map. Only the provided properties are changed. | Param | Type | | ----------- | ------------------------------------- | | **options** | [SetCameraOptions](#setcameraoptions) | **Since:** 0.1.0 --- ### setFrame(...)[ΒΆ](#setframe "Permanent link") `[](#%5F%5Fcodelineno-40-1)setFrame(options: SetFrameOptions) => Promise ` 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](#setframeoptions) | **Since:** 0.1.0 --- ### setGesturesEnabled(...)[ΒΆ](#setgesturesenabled "Permanent link") `[](#%5F%5Fcodelineno-41-1)setGesturesEnabled(options: SetGesturesEnabledOptions) => Promise ` Enable or disable the gestures of the map. Only the provided gestures are changed. | Param | Type | | ----------- | ------------------------------------------------------- | | **options** | [SetGesturesEnabledOptions](#setgesturesenabledoptions) | **Since:** 0.1.0 --- ### setStyle(...)[ΒΆ](#setstyle "Permanent link") `[](#%5F%5Fcodelineno-42-1)setStyle(options: SetStyleOptions) => Promise ` 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](#setstyleoptions) | **Since:** 0.1.0 --- ### updateGeoJsonSourceById(...)[ΒΆ](#updategeojsonsourcebyid "Permanent link") `[](#%5F%5Fcodelineno-43-1)updateGeoJsonSourceById(options: UpdateGeoJsonSourceByIdOptions) => Promise ` Update the data of a GeoJSON source. | Param | Type | | ----------- | ----------------------------------------------------------------- | | **options** | [UpdateGeoJsonSourceByIdOptions](#updategeojsonsourcebyidoptions) | **Since:** 0.1.0 --- ### updateMarkerById(...)[ΒΆ](#updatemarkerbyid "Permanent link") `[](#%5F%5Fcodelineno-44-1)updateMarkerById(options: UpdateMarkerByIdOptions) => Promise ` Update a marker on the map. Only the provided properties are changed. | Param | Type | | ----------- | --------------------------------------------------- | | **options** | [UpdateMarkerByIdOptions](#updatemarkerbyidoptions) | **Since:** 0.1.0 --- ### updatePolylineById(...)[ΒΆ](#updatepolylinebyid "Permanent link") `[](#%5F%5Fcodelineno-45-1)updatePolylineById(options: UpdatePolylineByIdOptions) => Promise ` Update a polyline on the map. Only the provided properties are changed. | Param | Type | | ----------- | ------------------------------------------------------- | | **options** | [UpdatePolylineByIdOptions](#updatepolylinebyidoptions) | **Since:** 0.1.0 --- ### addListener('cameraIdle', ...)[ΒΆ](#addlistenercameraidle "Permanent link") `[](#%5F%5Fcodelineno-46-1)addListener(eventName: 'cameraIdle', listenerFunc: (event: CameraIdleEvent) => void) => Promise ` Called when the camera of a map has stopped moving. | Param | Type | | ---------------- | ---------------------------------------------------- | | **eventName** | 'cameraIdle' | | **listenerFunc** | (event: [CameraIdleEvent](#cameraidleevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### addListener('cameraMoveStarted', ...)[ΒΆ](#addlistenercameramovestarted "Permanent link") `[](#%5F%5Fcodelineno-47-1)addListener(eventName: 'cameraMoveStarted', listenerFunc: (event: CameraMoveStartedEvent) => void) => Promise ` Called when the camera of a map has started moving. | Param | Type | | ---------------- | ------------------------------------------------------------------ | | **eventName** | 'cameraMoveStarted' | | **listenerFunc** | (event: [CameraMoveStartedEvent](#cameramovestartedevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### addListener('elementFromPointRequest', ...)[ΒΆ](#addlistenerelementfrompointrequest "Permanent link") `[](#%5F%5Fcodelineno-48-1)addListener(eventName: 'elementFromPointRequest', listenerFunc: (event: ElementFromPointRequestEvent) => void) => Promise ` 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](#elementfrompointrequestevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### addListener('mapClick', ...)[ΒΆ](#addlistenermapclick "Permanent link") `[](#%5F%5Fcodelineno-49-1)addListener(eventName: 'mapClick', listenerFunc: (event: MapClickEvent) => void) => Promise ` Called when the user taps on a map. | Param | Type | | ---------------- | ------------------------------------------------ | | **eventName** | 'mapClick' | | **listenerFunc** | (event: [MapClickEvent](#mapclickevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### addListener('markerClick', ...)[ΒΆ](#addlistenermarkerclick "Permanent link") `[](#%5F%5Fcodelineno-50-1)addListener(eventName: 'markerClick', listenerFunc: (event: MarkerClickEvent) => void) => Promise ` Called when the user taps on a marker. | Param | Type | | ---------------- | ------------------------------------------------------ | | **eventName** | 'markerClick' | | **listenerFunc** | (event: [MarkerClickEvent](#markerclickevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### addListener('markerDrag', ...)[ΒΆ](#addlistenermarkerdrag "Permanent link") `[](#%5F%5Fcodelineno-51-1)addListener(eventName: 'markerDrag', listenerFunc: (event: MarkerDragEvent) => void) => Promise ` Called while the user drags a marker. Only available on Android and Web. | Param | Type | | ---------------- | ---------------------------------------------------- | | **eventName** | 'markerDrag' | | **listenerFunc** | (event: [MarkerDragEvent](#markerdragevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### addListener('markerDragEnd', ...)[ΒΆ](#addlistenermarkerdragend "Permanent link") `[](#%5F%5Fcodelineno-52-1)addListener(eventName: 'markerDragEnd', listenerFunc: (event: MarkerDragEndEvent) => void) => Promise ` Called when the user has stopped dragging a marker. Only available on Android and Web. | Param | Type | | ---------------- | ---------------------------------------------------------- | | **eventName** | 'markerDragEnd' | | **listenerFunc** | (event: [MarkerDragEndEvent](#markerdragendevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### addListener('markerDragStart', ...)[ΒΆ](#addlistenermarkerdragstart "Permanent link") `[](#%5F%5Fcodelineno-53-1)addListener(eventName: 'markerDragStart', listenerFunc: (event: MarkerDragStartEvent) => void) => Promise ` Called when the user has started dragging a marker. Only available on Android and Web. | Param | Type | | ---------------- | -------------------------------------------------------------- | | **eventName** | 'markerDragStart' | | **listenerFunc** | (event: [MarkerDragStartEvent](#markerdragstartevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### addListener('userLocationChange', ...)[ΒΆ](#addlisteneruserlocationchange "Permanent link") `[](#%5F%5Fcodelineno-54-1)addListener(eventName: 'userLocationChange', listenerFunc: (event: UserLocationChangeEvent) => void) => Promise ` 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](#userlocationchangeevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### removeAllListeners()[ΒΆ](#removealllisteners "Permanent link") `[](#%5F%5Fcodelineno-55-1)removeAllListeners() => Promise ` Remove all listeners for this plugin. **Since:** 0.1.0 --- ### Interfaces[ΒΆ](#interfaces "Permanent link") #### AddGeoJsonSourceOptions[ΒΆ](#addgeojsonsourceoptions "Permanent link") | Prop | Type | Description | Since | | ------------ | ----------------------- | ---------------------------------------------------------------------------------------- | ----- | | **data** | Record | 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[ΒΆ](#addlayeroptions "Permanent link") | 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](#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](#layertype) | The type of the layer. | 0.1.0 | #### LayerPaint[ΒΆ](#layerpaint "Permanent link") 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[ΒΆ](#addmarkeroptions "Permanent link") | Prop | Type | Description | Since | | ---------- | ----------------- | --------------------------------- | ----- | | **mapId** | string | The unique identifier of the map. | 0.1.0 | | **marker** | [Marker](#marker) | The marker to add. | 0.1.0 | #### Marker[ΒΆ](#marker "Permanent link") A marker on a map. | Prop | Type | Description | Default | Since | | --------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------- | ----- | | **coordinates** | [LatLng](#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](#markericonanchor) | The part of the icon that is placed on the coordinate of the marker. | MarkerIconAnchor.Bottom | 0.1.0 | | **iconSize** | [MarkerIconSize](#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[ΒΆ](#latlng "Permanent link") 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[ΒΆ](#markericonsize "Permanent link") 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[ΒΆ](#addmarkersoptions "Permanent link") | 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[ΒΆ](#addpolylineoptions "Permanent link") | Prop | Type | Description | Since | | ------------ | --------------------- | --------------------------------- | ----- | | **mapId** | string | The unique identifier of the map. | 0.1.0 | | **polyline** | [Polyline](#polyline) | The polyline to add. | 0.1.0 | #### Polyline[ΒΆ](#polyline "Permanent link") 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[ΒΆ](#addpolylinesoptions "Permanent link") | 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[ΒΆ](#permissionstatus "Permanent link") | Prop | Type | Description | Since | | ------------ | ----------------------------------- | ------------------------------------------------ | ----- | | **location** | [PermissionState](#permissionstate) | The permission state of the location permission. | 0.1.0 | #### CreateMapOptions[ΒΆ](#createmapoptions "Permanent link") | Prop | Type | Description | Default | Since | | ------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----- | | **bearing** | number | The direction the camera points in, in degrees clockwise from north. | 0 | 0.1.0 | | **center** | [LatLng](#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](#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[ΒΆ](#gesturesettings "Permanent link") 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[ΒΆ](#destroymapoptions "Permanent link") | Prop | Type | Description | Since | | --------- | ------ | --------------------------------- | ----- | | **mapId** | string | The unique identifier of the map. | 0.1.0 | #### DisableUserLocationOptions[ΒΆ](#disableuserlocationoptions "Permanent link") | Prop | Type | Description | Since | | --------- | ------ | --------------------------------- | ----- | | **mapId** | string | The unique identifier of the map. | 0.1.0 | #### ElementFromPointResultOptions[ΒΆ](#elementfrompointresultoptions "Permanent link") | 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[ΒΆ](#enableuserlocationoptions "Permanent link") | Prop | Type | Description | Default | Since | | ---------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----- | | **mapId** | string | The unique identifier of the map. | | 0.1.0 | | **trackingMode** | [UserTrackingMode](#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[ΒΆ](#fitboundsoptions "Permanent link") | 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](#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](#padding) | The padding between the bounds and the edges of the map. | | 0.1.0 | #### Bounds[ΒΆ](#bounds "Permanent link") A geographical area, defined by its southwest and northeast corner. | Prop | Type | Description | Since | | ------------- | ----------------- | --------------------------------- | ----- | | **northeast** | [LatLng](#latlng) | The northeast corner of the area. | 0.1.0 | | **southwest** | [LatLng](#latlng) | The southwest corner of the area. | 0.1.0 | #### Padding[ΒΆ](#padding "Permanent link") 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[ΒΆ](#getcameraresult "Permanent link") | Prop | Type | Description | Since | | ---------- | ----------------- | ------------------------------ | ----- | | **camera** | [Camera](#camera) | The current camera of the map. | 0.1.0 | #### Camera[ΒΆ](#camera "Permanent link") 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](#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[ΒΆ](#getcameraoptions "Permanent link") | Prop | Type | Description | Since | | --------- | ------ | --------------------------------- | ----- | | **mapId** | string | The unique identifier of the map. | 0.1.0 | #### RemoveAllMarkersOptions[ΒΆ](#removeallmarkersoptions "Permanent link") | Prop | Type | Description | Since | | --------- | ------ | --------------------------------- | ----- | | **mapId** | string | The unique identifier of the map. | 0.1.0 | #### RemoveAllPolylinesOptions[ΒΆ](#removeallpolylinesoptions "Permanent link") | Prop | Type | Description | Since | | --------- | ------ | --------------------------------- | ----- | | **mapId** | string | The unique identifier of the map. | 0.1.0 | #### RemoveGeoJsonSourceByIdOptions[ΒΆ](#removegeojsonsourcebyidoptions "Permanent link") | 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[ΒΆ](#removelayerbyidoptions "Permanent link") | 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[ΒΆ](#removemarkerbyidoptions "Permanent link") | 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[ΒΆ](#removemarkersbyidsoptions "Permanent link") | 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[ΒΆ](#removepolylinebyidoptions "Permanent link") | 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[ΒΆ](#removepolylinesbyidsoptions "Permanent link") | 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[ΒΆ](#setcameraoptions "Permanent link") | 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](#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](#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[ΒΆ](#setframeoptions "Permanent link") | Prop | Type | Description | Since | | --------------- | --------------------------------- | ------------------------------------------------------ | ----- | | **contentSize** | [MapContentSize](#mapcontentsize) | The size of the scrollable content of the map element. | 0.1.0 | | **frame** | [MapFrame](#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[ΒΆ](#mapcontentsize "Permanent link") 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[ΒΆ](#mapframe "Permanent link") The position and size of a map in CSS pixels, relative to the viewport. | Prop | Type | Description | Since | | ---------- | ------ | ------------------------------------------ | ----- | | **height** | number | The height of the map in CSS pixels. | 0.1.0 | | **width** | number | The width of the map in CSS pixels. | 0.1.0 | | **x** | number | The x-coordinate of the map in CSS pixels. | 0.1.0 | | **y** | number | The y-coordinate of the map in CSS pixels. | 0.1.0 | #### SetGesturesEnabledOptions[ΒΆ](#setgesturesenabledoptions "Permanent link") | Prop | Type | Description | Since | | ---------- | ------- | ------------------------------------------------------------------------------------------------------- | ----- | | **mapId** | string | The unique identifier of the map. | 0.1.0 | | **pan** | boolean | Whether the user can move the camera by dragging the map. If not provided, the current setting is kept. | 0.1.0 | | **rotate** | boolean | Whether the user can rotate the camera. If not provided, the current setting is kept. | 0.1.0 | | **tilt** | boolean | Whether the user can tilt the camera. If not provided, the current setting is kept. | 0.1.0 | | **zoom** | boolean | Whether the user can zoom the camera. If not provided, the current setting is kept. | 0.1.0 | #### SetStyleOptions[ΒΆ](#setstyleoptions "Permanent link") | Prop | Type | Description | Since | | --------- | ------ | ------------------------------------------------------------------------------------ | ----- | | **json** | string | The style of the map as a JSON string. Exactly one of json and url must be provided. | 0.1.0 | | **mapId** | string | The unique identifier of the map. | 0.1.0 | | **url** | string | The URL of the style of the map. Exactly one of json and url must be provided. | 0.1.0 | #### UpdateGeoJsonSourceByIdOptions[ΒΆ](#updategeojsonsourcebyidoptions "Permanent link") | Prop | Type | Description | Since | | ------------ | ----------------------- | -------------------------------------------------------------------------------------------- | ----- | | **data** | Record | The new 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 new GeoJSON data of the source. Exactly one of data and url must be provided. | 0.1.0 | #### UpdateMarkerByIdOptions[ΒΆ](#updatemarkerbyidoptions "Permanent link") | Prop | Type | Description | Default | Since | | --------------------- | ------------------------------------- | ------------------------------------------------------------------------- | ------- | ----- | | **animate** | boolean | Whether the changes of the coordinates and the rotation are animated. | false | 0.1.0 | | **animationDuration** | number | The duration of the animation in milliseconds. | 300 | 0.1.0 | | **coordinates** | [LatLng](#latlng) | The new geographical coordinate of the marker. | | 0.1.0 | | **draggable** | boolean | Whether the user can drag the marker. Only available on Android and Web. | | 0.1.0 | | **iconAnchor** | [MarkerIconAnchor](#markericonanchor) | The part of the icon that is placed on the coordinate of the marker. | | 0.1.0 | | **iconSize** | [MarkerIconSize](#markericonsize) | The size the icon is scaled to. | | 0.1.0 | | **iconUrl** | string | The URL of the new icon of the marker. Must be a https URL or a data URI. | | 0.1.0 | | **mapId** | string | The unique identifier of the map. | | 0.1.0 | | **markerId** | string | The unique identifier of the marker. | | 0.1.0 | | **opacity** | number | The opacity of the marker as a value between 0 and 1. | | 0.1.0 | | **rotation** | number | The rotation of the icon in degrees clockwise. | | 0.1.0 | #### UpdatePolylineByIdOptions[ΒΆ](#updatepolylinebyidoptions "Permanent link") | Prop | Type | Description | Since | | --------------- | ---------- | ------------------------------------------------------------------------------------- | ----- | | **color** | string | The color of the polyline as a hexadecimal string in the format #RRGGBB or #RRGGBBAA. | 0.1.0 | | **coordinates** | LatLng\[\] | The new geographical coordinates of the polyline. | 0.1.0 | | **mapId** | string | The unique identifier of the map. | 0.1.0 | | **opacity** | number | The opacity of the polyline as a value between 0 and 1. | 0.1.0 | | **polylineId** | string | The unique identifier of the polyline. | 0.1.0 | | **width** | number | The width of the polyline in CSS pixels. | 0.1.0 | #### PluginListenerHandle[ΒΆ](#pluginlistenerhandle "Permanent link") | Prop | Type | | ---------- | ------------------- | | **remove** | () => Promise | #### CameraIdleEvent[ΒΆ](#cameraidleevent "Permanent link") | Prop | Type | Description | Since | | ---------- | ----------------- | ----------------------------------------- | ----- | | **camera** | [Camera](#camera) | The camera of the map after the movement. | 0.1.0 | | **mapId** | string | The unique identifier of the map. | 0.1.0 | #### CameraMoveStartedEvent[ΒΆ](#cameramovestartedevent "Permanent link") | Prop | Type | Description | Since | | ---------- | ------------------------------------- | ----------------------------------------- | ----- | | **mapId** | string | The unique identifier of the map. | 0.1.0 | | **reason** | [CameraMoveReason](#cameramovereason) | The reason why the camera started moving. | 0.1.0 | #### ElementFromPointRequestEvent[ΒΆ](#elementfrompointrequestevent "Permanent link") | Prop | Type | Description | Since | | ------------- | ------ | ---------------------------------------------------------------------- | ----- | | **requestId** | string | The unique identifier of the request. | 0.1.0 | | **x** | number | The x-coordinate of the point in CSS pixels, relative to the viewport. | 0.1.0 | | **y** | number | The y-coordinate of the point in CSS pixels, relative to the viewport. | 0.1.0 | #### MapClickEvent[ΒΆ](#mapclickevent "Permanent link") | Prop | Type | Description | Since | | --------------- | --------------------- | ----------------------------------------------- | ----- | | **coordinates** | [LatLng](#latlng) | The geographical coordinate the user tapped on. | 0.1.0 | | **mapId** | string | The unique identifier of the map. | 0.1.0 | | **point** | [MapPoint](#mappoint) | The point the user tapped on. | 0.1.0 | #### MapPoint[ΒΆ](#mappoint "Permanent link") A point on a map in CSS pixels, relative to the map element. | Prop | Type | Description | Since | | ----- | ------ | -------------------------------------------- | ----- | | **x** | number | The x-coordinate of the point in CSS pixels. | 0.1.0 | | **y** | number | The y-coordinate of the point in CSS pixels. | 0.1.0 | #### MarkerClickEvent[ΒΆ](#markerclickevent "Permanent link") | Prop | Type | Description | Since | | --------------- | ----------------- | ------------------------------------------ | ----- | | **coordinates** | [LatLng](#latlng) | The geographical coordinate of the marker. | 0.1.0 | | **mapId** | string | The unique identifier of the map. | 0.1.0 | | **markerId** | string | The unique identifier of the marker. | 0.1.0 | #### MarkerDragEvent[ΒΆ](#markerdragevent "Permanent link") | Prop | Type | Description | Since | | --------------- | ----------------- | -------------------------------------------------- | ----- | | **coordinates** | [LatLng](#latlng) | The current geographical coordinate of the marker. | 0.1.0 | | **mapId** | string | The unique identifier of the map. | 0.1.0 | | **markerId** | string | The unique identifier of the marker. | 0.1.0 | #### MarkerDragEndEvent[ΒΆ](#markerdragendevent "Permanent link") | Prop | Type | Description | Since | | --------------- | ----------------- | ------------------------------------------------------ | ----- | | **coordinates** | [LatLng](#latlng) | The geographical coordinate the marker was dropped at. | 0.1.0 | | **mapId** | string | The unique identifier of the map. | 0.1.0 | | **markerId** | string | The unique identifier of the marker. | 0.1.0 | #### MarkerDragStartEvent[ΒΆ](#markerdragstartevent "Permanent link") | Prop | Type | Description | Since | | --------------- | ----------------- | -------------------------------------------------------- | ----- | | **coordinates** | [LatLng](#latlng) | The geographical coordinate the marker was dragged from. | 0.1.0 | | **mapId** | string | The unique identifier of the map. | 0.1.0 | | **markerId** | string | The unique identifier of the marker. | 0.1.0 | #### UserLocationChangeEvent[ΒΆ](#userlocationchangeevent "Permanent link") | Prop | Type | Description | Since | | --------------- | ----------------- | -------------------------------------------------------------------- | ----- | | **accuracy** | number | The accuracy of the location in meters. | 0.1.0 | | **coordinates** | [LatLng](#latlng) | The geographical coordinate of the user. | 0.1.0 | | **heading** | number | The direction the device points in, in degrees clockwise from north. | 0.1.0 | | **mapId** | string | The unique identifier of the map. | 0.1.0 | | **speed** | number | The speed of the device in meters per second. | 0.1.0 | ### Type Aliases[ΒΆ](#type-aliases "Permanent link") #### PermissionState[ΒΆ](#permissionstate "Permanent link") `'prompt' | 'prompt-with-rationale' | 'granted' | 'denied'` ### Enums[ΒΆ](#enums "Permanent link") #### LayerType[ΒΆ](#layertype "Permanent link") | Members | Value | Description | Since | | ---------- | -------- | ---------------------------------------------- | ----- | | **Circle** | 'circle' | A layer that renders points as circles. | 0.1.0 | | **Fill** | 'fill' | A layer that renders polygons as filled areas. | 0.1.0 | | **Line** | 'line' | A layer that renders line strings as lines. | 0.1.0 | #### MarkerIconAnchor[ΒΆ](#markericonanchor "Permanent link") | Members | Value | Description | Since | | ---------- | -------- | ---------------------------- | ----- | | **Bottom** | 'bottom' | The bottom edge of the icon. | 0.1.0 | | **Center** | 'center' | The center of the icon. | 0.1.0 | | **Left** | 'left' | The left edge of the icon. | 0.1.0 | | **Right** | 'right' | The right edge of the icon. | 0.1.0 | | **Top** | 'top' | The top edge of the icon. | 0.1.0 | #### UserTrackingMode[ΒΆ](#usertrackingmode "Permanent link") | Members | Value | Description | Since | | --------------------- | ------------------- | --------------------------------------------------------------------------------------------- | ----- | | **Follow** | 'follow' | The camera follows the location of the user. | 0.1.0 | | **FollowWithCourse** | 'followWithCourse' | The camera follows the location of the user and points in the direction the user moves in. | 0.1.0 | | **FollowWithHeading** | 'followWithHeading' | The camera follows the location of the user and points in the direction the device points in. | 0.1.0 | | **None** | 'none' | The camera does not follow the location of the user. | 0.1.0 | #### CameraMoveReason[ΒΆ](#cameramovereason "Permanent link") | Members | Value | Description | Since | | ----------- | --------- | ---------------------------------------------- | ----- | | **Api** | 'api' | The camera was moved by a method call. | 0.1.0 | | **Gesture** | 'gesture' | The camera was moved by a gesture of the user. | 0.1.0 | ## FAQ[ΒΆ](#faq "Permanent link") ### Where do I get map styles and do I need an API key?[ΒΆ](#where-do-i-get-map-styles-and-do-i-need-an-api-key "Permanent link") No API key is required by the plugin itself. MapLibre is open source (BSD-licensed) and renders any style that follows the [MapLibre Style Spec](https://maplibre.org/maplibre-style-spec/). The default [demo style](https://demotiles.maplibre.org/style.json) is a test style and should not be used in production. Free providers include [CARTO basemaps](https://github.com/CartoDB/basemap-styles), [OpenFreeMap](https://openfreemap.org/) and [Versatiles](https://versatiles.org/). Commercial providers such as [MapTiler](https://www.maptiler.com/) offer styles that require their own API key. Always follow the attribution requirements and terms of service of the provider you choose. ### Why is my map not visible?[ΒΆ](#why-is-my-map-not-visible "Permanent link") On Android and iOS, the map is rendered behind the web view. If the map element or one of its ancestors has a background color, the web view paints over the map. Make sure the map element is empty and that it and all ancestors covering the map region use `background: transparent` (see [Getting started](#getting-started)). ### Can I display HTML content above the map?[ΒΆ](#can-i-display-html-content-above-the-map "Permanent link") Yes. Since the native map is rendered behind the web view, any DOM element that is not an ancestor of the map element is displayed above the map. Floating action buttons, bottom sheets, overlays and dialogs work exactly as they do everywhere else in your app. ### Why are marker drag events not available on iOS?[ΒΆ](#why-are-marker-drag-events-not-available-on-ios "Permanent link") On iOS, markers are rendered as symbol layers, which do not support native dragging yet. The `draggable` property and the `markerDrag`, `markerDragStart` and `markerDragEnd` events are therefore only available on Android and Web. ### Does this plugin work offline?[ΒΆ](#does-this-plugin-work-offline "Permanent link") No. Styles, fonts, sprites and tiles are loaded from the network by the map. Offline tile management is not part of this version of the plugin. ## Related Plugins[ΒΆ](#related-plugins "Permanent link") * [Compass](https://capawesome.io/docs/sdks/capacitor/compass/): Read the device compass heading. * [Geocoder](https://capawesome.io/docs/sdks/capacitor/geocoder/): Convert addresses into coordinates and vice versa. * [Maps Launcher](https://capawesome.io/docs/sdks/capacitor/maps-launcher/): Launch navigation apps with turn-by-turn directions. ## Newsletter[ΒΆ](#newsletter "Permanent link") Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/). ## Changelog[ΒΆ](#changelog "Permanent link") See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/maplibre/CHANGELOG.md). ## License[ΒΆ](#license "Permanent link") See [LICENSE](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/maplibre/LICENSE). --- 1. This project is not affiliated with, endorsed by, sponsored by, or approved by the MapLibre organization or any of its contributors. "MapLibre" is a trademark of the MapLibre organization. [↩](#fnref:1 "Jump back to footnote 1 in the text") August 15, 2026 Back to top ```json {"@context": "https://schema.org", "@graph": [{"@type": "TechArticle", "@id": "https://capawesome.io/docs/sdks/capacitor/maplibre/#article", "headline": "Capacitor MapLibre Plugin", "name": "Capacitor MapLibre Plugin", "description": "Unofficial Capacitor plugin to create native MapLibre maps on Android, iOS, and Web with markers, polylines, GeoJSON layers, and user location.", "inLanguage": "en", "url": "https://capawesome.io/docs/sdks/capacitor/maplibre/", "mainEntityOfPage": "https://capawesome.io/docs/sdks/capacitor/maplibre/", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "about": {"@id": "https://capawesome.io/docs/sdks/capacitor/maplibre/#software"}}, {"@type": "SoftwareSourceCode", "@id": "https://capawesome.io/docs/sdks/capacitor/maplibre/#software", "name": "Capacitor MapLibre Plugin", "description": "Unofficial Capacitor plugin to create native MapLibre maps on Android, iOS, and Web with markers, polylines, GeoJSON layers, and user location.", "url": "https://capawesome.io/docs/sdks/capacitor/maplibre/", "programmingLanguage": "TypeScript", "runtimePlatform": "Capacitor", "codeRepository": "https://github.com/capawesome-team", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}}]} {"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Where do I get map styles and do I need an API key?", "acceptedAnswer": {"@type": "Answer", "text": "No API key is required by the plugin itself. MapLibre is open source (BSD-licensed) and renders any style that follows the MapLibre Style Spec. The default demo style is a test style and should not be used in production. Free providers include CARTO basemaps, OpenFreeMap and Versatiles. Commercial providers such as MapTiler offer styles that require their own API key. Always follow the attribution requirements and terms of service of the provider you choose."}}, {"@type": "Question", "name": "Why is my map not visible?", "acceptedAnswer": {"@type": "Answer", "text": "On Android and iOS, the map is rendered behind the web view. If the map element or one of its ancestors has a background color, the web view paints over the map. Make sure the map element is empty and that it and all ancestors covering the map region use background: transparent (see Getting started)."}}, {"@type": "Question", "name": "Can I display HTML content above the map?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. Since the native map is rendered behind the web view, any DOM element that is not an ancestor of the map element is displayed above the map. Floating action buttons, bottom sheets, overlays and dialogs work exactly as they do everywhere else in your app."}}, {"@type": "Question", "name": "Why are marker drag events not available on iOS?", "acceptedAnswer": {"@type": "Answer", "text": "On iOS, markers are rendered as symbol layers, which do not support native dragging yet. The draggable property and the markerDrag, markerDragStart and markerDragEnd events are therefore only available on Android and Web."}}, {"@type": "Question", "name": "Does this plugin work offline?", "acceptedAnswer": {"@type": "Answer", "text": "No. Styles, fonts, sprites and tiles are loaded from the network by the map. Offline tile management is not part of this version of the plugin."}}], "url": "https://capawesome.io/docs/sdks/capacitor/maplibre/"} ```