ionic-team/demo-capacitor-mapbox

A Capacitor plugin for Mapbox SDK

Demo: Building a Capacitor plugin for Mapbox

This is a reference app showing how to build a Capacitor plugin for Mapbox, a mapping, vision, and navigation SDK for developers.

To see this app in action, check out the Capacitor 2.0 Launch presentation. Learn how to create your own cross-platform Capacitor plugin here.

User Experience

This Capacitor plugin wraps the Mapbox Android SDK. The plugin, when used in an Ionic Angular app, opens a full-screen map pointed at a variety of locations specified by the developer (based on latitude/longitude coordinates).

Implementation Details

capacitor-mapbox contains the Mapbox plugin with Android implementation. The interface is defined in src/definitions.ts. The main Android code that leverages the Mapbox Android SDK is in capacitor-mapbox/android/src/main/java/com/ionicframework/cap/mapbox/Mapbox.java.

android contains the Android app project.

The root of the project (and src) contains an Ionic Angular app, a modified version of the Ionic blank starter project. On the Home page, several buttons appear for different locations - tapping them displays a native Mapbox map, pointing at various lat/long coordinates. Point to different map locations by changing the coordinates in home.page.html.

How to Run

• Install Ionic and native-run: npm install -g @ionic/cli native-run.
• Clone this repository.
• In a terminal, change directory into the repo: cd demo-capacitor-mapbox.

Build and link the Mapbox plugin:

The Capacitor Mapbox plugin is not published on npm (and shouldn't be since it's just a demo). That said, you can install and run it locally.

• Change into the plugin directory: cd capacitor-mapbox.
• Run npm run build to build the plugin.
• Run npm link
• Change back into the app directory: cd ..
• Run npm link capacitor-mapbox
• Run npm install to install all project dependencies, including the local capacitor-mapbox plugin.

Test the plugin

• Sync the Android project: npx cap sync. If configured correctly, the log should print something similar to "Found 1 Capacitor plugin for android: capacitor-mapbox (0.0.1)"
• Run ionic build to build the Ionic app.
• Run npx cap sync android to sync the project again.
• Run npx cap open android to open Android Studio. From here, connect a device then press play to try the app!

demo-capacitor-mapbox's Issues

Error when running npx cap sync

The following error shows up when running npx cap sync:

[error] Capacitor could not find the web assets directory "/Users/idosius/IdeaProjects/demo-capacitor-mapbox/www".
    Please create it, and make sure it has an index.html file. You can change
    the path of this directory in capacitor.config.json.
    More info: https://capacitor.ionicframework.com/docs/basics/configuring-your-app

Creating a www/index.html without any content seems to fix the issue.

Error TS6133 when building capacitor-mapbox

The following TypeScript error appears when building capacitor-mapbox:

> [email protected] build
> npm run clean && tsc


> [email protected] clean
> rimraf ./dist

src/web.ts:17:17 - error TS6133: 'location' is declared but its value is never read.

17   async openMap(location: { lat: number, long: number}): Promise<void> {
                   ~~~~~~~~


Found 1 error.

npm ERR! code 2
npm ERR! path /Users/idosius/IdeaProjects/demo-capacitor-mapbox/capacitor-mapbox
npm ERR! command failed
npm ERR! command sh -c npm run clean && tsc

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/idosius/.npm/_logs/2021-03-16T09_33_47_472Z-debug.log

Build instructions are missing a step

Attempting to build capacitor-mapbox as detailed in the instructions leads to the following error:

> [email protected] build
> npm run clean && tsc


> [email protected] clean
> rimraf ./dist

sh: /Users/idosius/IdeaProjects/demo-capacitor-mapbox/capacitor-mapbox/node_modules/.bin/rimraf: Permission denied
npm ERR! code 126
npm ERR! path /Users/idosius/IdeaProjects/demo-capacitor-mapbox/capacitor-mapbox
npm ERR! command failed
npm ERR! command sh -c rimraf ./dist

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/idosius/.npm/_logs/2021-03-16T09_38_36_456Z-debug.log
npm ERR! code 126
npm ERR! path /Users/idosius/IdeaProjects/demo-capacitor-mapbox/capacitor-mapbox
npm ERR! command failed
npm ERR! command sh -c npm run clean && tsc

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/idosius/.npm/_logs/2021-03-16T09_38_36_513Z-debug.log

One step is missing before the build: running npm install in the project root directory

iOS ?

Hello,
Thanks for the demo !
Is it planned to provide an iOS version of the plugin ?