diff --git a/.vitepress/config.mts b/.vitepress/config.mts index d671640..83083f4 100644 --- a/.vitepress/config.mts +++ b/.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, diff --git a/pmtiles/maplibre-mobile.md b/pmtiles/maplibre-mobile.md new file mode 100644 index 0000000..33a62a2 --- /dev/null +++ b/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 ( + + + + + + ); +} +```