diff --git a/examples/maplibre/README.md b/examples/maplibre/README.md
new file mode 100644
index 00000000..d9c72c0e
--- /dev/null
+++ b/examples/maplibre/README.md
@@ -0,0 +1,10 @@
+# Example: MapLibre
+
+Demonstrates how to use react-map-gl with maplibre-gl (or other mapbox-gl compatible forks).
+
+## Usage
+
+```bash
+npm i
+npm run start
+```
diff --git a/examples/maplibre/app.css b/examples/maplibre/app.css
new file mode 100644
index 00000000..72db167a
--- /dev/null
+++ b/examples/maplibre/app.css
@@ -0,0 +1,24 @@
+body {
+ margin: 0;
+ background: #000;
+}
+#map {
+ width: 100vw;
+ height: 100vh;
+}
+
+.control-panel {
+ position: absolute;
+ top: 0;
+ right: 0;
+ max-width: 320px;
+ background: #fff;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+ padding: 12px 24px;
+ margin: 20px;
+ font-size: 13px;
+ line-height: 2;
+ color: #6b6b76;
+ text-transform: uppercase;
+ outline: none;
+}
diff --git a/examples/maplibre/index.html b/examples/maplibre/index.html
new file mode 100644
index 00000000..0b6e1f72
--- /dev/null
+++ b/examples/maplibre/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+ react-map-gl Example
+
+
+
+
+
+
+
+
+
diff --git a/examples/maplibre/package.json b/examples/maplibre/package.json
new file mode 100644
index 00000000..4f8db9de
--- /dev/null
+++ b/examples/maplibre/package.json
@@ -0,0 +1,22 @@
+{
+ "scripts": {
+ "start": "webpack-dev-server --progress --hot --open",
+ "start-local": "webpack-dev-server --env.local --progress --hot --open"
+ },
+ "dependencies": {
+ "maplibre-gl": "^1.15.2",
+ "react": "^16.3.0",
+ "react-dom": "^16.3.0",
+ "react-map-gl": "^6.0.0"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.0.0",
+ "@babel/plugin-proposal-class-properties": "^7.0.0",
+ "@babel/preset-env": "^7.0.0",
+ "@babel/preset-react": "^7.0.0",
+ "babel-loader": "^8.0.0",
+ "webpack": "^4.20.0",
+ "webpack-cli": "^3.1.2",
+ "webpack-dev-server": "^3.1.0"
+ }
+}
diff --git a/examples/maplibre/src/app.js b/examples/maplibre/src/app.js
new file mode 100644
index 00000000..c348215c
--- /dev/null
+++ b/examples/maplibre/src/app.js
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {useState} from 'react';
+import {render} from 'react-dom';
+import MapGL, {NavigationControl} from 'react-map-gl';
+
+import ControlPanel from './control-panel';
+
+// / maplibre-gl.css is included by tag in index.html
+// / Alternatively, use CSS loader with the following line:
+// import 'maplibre-gl/dist/maplibre-gl.css';
+
+const OSM_MAP = {
+ version: 8,
+ sources: {
+ osm: {
+ type: 'raster',
+ tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
+ tileSize: 256,
+ attribution: '© OpenStreetMap Contributors',
+ maxzoom: 19
+ }
+ },
+ layers: [
+ {
+ id: 'osm',
+ type: 'raster',
+ source: 'osm'
+ }
+ ]
+};
+
+export default function App() {
+ const [viewport, setViewport] = useState({
+ latitude: 40,
+ longitude: -100,
+ zoom: 3.5,
+ bearing: 0,
+ pitch: 0
+ });
+
+ return (
+ <>
+
+
+
+
+
+
+ );
+}
+
+export function renderToDom(container) {
+ render(, container);
+}
diff --git a/examples/maplibre/src/control-panel.js b/examples/maplibre/src/control-panel.js
new file mode 100644
index 00000000..5c67a250
--- /dev/null
+++ b/examples/maplibre/src/control-panel.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+function ControlPanel() {
+ return (
+
+ );
+}
+
+export default React.memo(ControlPanel);
diff --git a/examples/maplibre/webpack.config.js b/examples/maplibre/webpack.config.js
new file mode 100644
index 00000000..7dc83939
--- /dev/null
+++ b/examples/maplibre/webpack.config.js
@@ -0,0 +1,49 @@
+// NOTE: To use this example standalone (e.g. outside of repo)
+// delete the local development overrides at the bottom of this file
+
+// avoid destructuring for older Node version support
+const resolve = require('path').resolve;
+
+const BABEL_CONFIG = {
+ presets: ['@babel/env', '@babel/react'],
+ plugins: ['@babel/proposal-class-properties']
+};
+
+const config = {
+ mode: 'development',
+
+ entry: {
+ app: resolve('./src/app.js')
+ },
+
+ output: {
+ library: 'App'
+ },
+
+ resolve: {
+ alias: {
+ 'mapbox-gl': 'maplibre-gl'
+ }
+ },
+
+ module: {
+ rules: [
+ {
+ // Compile ES2015 using babel
+ test: /\.js$/,
+ include: [resolve('.')],
+ exclude: [/node_modules/],
+ use: [
+ {
+ loader: 'babel-loader',
+ options: BABEL_CONFIG
+ }
+ ]
+ }
+ ]
+ }
+};
+
+// Enables bundling against src in this repo rather than the installed version
+module.exports = env =>
+ env && env.local ? require('../webpack.config.local')(config)(env) : config;