Introduce integration for mobile documentation

.vitepress/config.mts

@@ -5,16 +5,29 @@ export default defineConfig({
   title: "Protomaps Docs",
   head: [
     ["link", { rel: "icon", type: "image/png", href: "/favicon.png" }],
-    ["link", { rel: "apple-touch-icon", type: "image/jpg", href:"https://protomaps.com//apple-touch-icon.jpg" }],
-    ["meta", { property: "og:image", content: "https://protomaps.com/docs_opengraph.jpg" }]
+    [
+      "link",
+      {
+        rel: "apple-touch-icon",
+        type: "image/jpg",
+        href: "https://protomaps.com//apple-touch-icon.jpg",
+      },
+    ],
+    [
+      "meta",
+      {
+        property: "og:image",
+        content: "https://protomaps.com/docs_opengraph.jpg",
+      },
+    ],
   ],
   description: "Technical Documentation for Protomaps",
   cleanUrls: true,
   markdown: {
     theme: {
-      light: 'github-light-high-contrast',
-      dark: 'github-dark-high-contrast'
-    }
+      light: "github-light-high-contrast",
+      dark: "github-dark-high-contrast",
+    },
   },
   themeConfig: {
     logo: "/logo.svg",
@@ -56,6 +69,11 @@ export default defineConfig({
           { text: "OpenLayers", link: "/pmtiles/openlayers" },
         ],
       },
+      {
+        text: "PMTiles on mobile",
+        collapsed: true,
+        items: [{ text: "MapLibre GL", link: "/pmtiles/maplibre-mobile" }],
+      },
       {
         text: "Accelerating PMTiles",
         collapsed: true,

pmtiles/maplibre-mobile.md

@@ -0,0 +1,46 @@
+---
+title: PMTiles for MapLibre GL on Mobile
+outline: deep
+---
+
+# PMTiles for MapLibre GL
+
+Support for PMTiles has been build directly into recent versions of MapLibre GL.
+
+PMTiles is designed to be read directly in the browser by the MapLibre GL renderer, for either thematic overlay tilesets or basemap tilesets.
+
+PMTiles can be used directly in maplibre by installing a using a relatively new version of the library with support built in.
+
+- Android: [v11.8.0](https://github.com/maplibre/maplibre-native/releases/tag/android-v11.8.0)
+- iOS: [v6.1.0.1](https://github.com/maplibre/maplibre-native/releases/tag/ios-v6.10.0)
+- React Native: [v10.1.0](https://github.com/maplibre/maplibre-react-native/releases)
+
+
+## React Native
+
+It's worth pointing out that React Native MapLibre is using the iOS/Android versions of MapLibre under the hood which has slightly different APIs than the javascript API on web. Simply use the `pmtiles://...` url directly in react native, there is no need for plugins:
+
+```js
+import {
+  LineLayer,
+  MapView,
+  VectorSource,
+} from "@maplibre/maplibre-react-native";
+
+export function ExampleMap() {
+  return (
+    <MapView style={{ flex: 1 }}>
+      <VectorSource
+        id="fireCentreSource"
+        url="pmtiles://https://nrs.objectstore.gov.bc.ca/lwzrin/psu/pmtiles/fireCentres.pmtiles"
+      >
+        <LineLayer
+          id="border-fire-centres"
+          sourceLayerID="tippecanoe_input"
+          style={{ lineColor: "red" }}
+        />
+      </VectorSource>
+    </MapView>
+  );
+}
+```