Add maplibre example (#1560)

2026-01-25 16:02:50 +00:00 · 2021-09-06 11:25:17 -07:00 · 2021-09-06 11:25:17 -07:00 · f96184e910
commit f96184e910
parent e21500aec9
7 changed files with 206 additions and 0 deletions
--- a/examples/maplibre/README.md
+++ 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
+```
--- a/examples/maplibre/app.css
+++ 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;
+}
--- a/examples/maplibre/index.html
+++ b/examples/maplibre/index.html
@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8' />
+    <title>react-map-gl Example</title>
+    <link rel="stylesheet" type="text/css" href="app.css" />
+    <link rel="stylesheet" type="text/css"  href="https://unpkg.com/maplibre-gl@^1.0.0/dist/maplibre-gl.css" />
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src='app.js'></script>
+  </body>
+  <script type="text/javascript">
+    App.renderToDom(document.getElementById('map'));
+  </script>
+</html>
--- a/examples/maplibre/package.json
+++ 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"
+  }
+}
--- a/examples/maplibre/src/app.js
+++ 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: '&copy; 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 (
+    <>
+      <MapGL
+        {...viewport}
+        width="100%"
+        height="100%"
+        mapStyle={OSM_MAP}
+        onViewportChange={setViewport}
+      >
+        <NavigationControl style={{padding: 20}} />
+      </MapGL>
+
+      <ControlPanel />
+    </>
+  );
+}
+
+export function renderToDom(container) {
+  render(<App />, container);
+}
--- a/examples/maplibre/src/control-panel.js
+++ b/examples/maplibre/src/control-panel.js
@ -0,0 +1,25 @@
+import * as React from 'react';
+
+function ControlPanel() {
+  return (
+    <div className="control-panel">
+      <h3>MapLibre</h3>
+      <p>
+        Example showing using react-map-gl with <a href="https://maplibre.org/">maplibre-gl</a>.
+      </p>
+      <p>
+        Data license:{' '}
+        <a href="http://www.openstreetmap.org/copyright" target="blank">
+          OpenStreetMap
+        </a>
+      </p>
+      <div className="source-link">
+        <a href="https://github.com/visgl/react-map-gl/tree/master/examples/maplibre" target="_new">
+          View Code ↗
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(ControlPanel);
--- a/examples/maplibre/webpack.config.js
+++ 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;