From f96184e91071c049466225802ded4e23fdf7cd45 Mon Sep 17 00:00:00 2001 From: Xiaoji Chen Date: Mon, 6 Sep 2021 11:25:17 -0700 Subject: [PATCH] Add maplibre example (#1560) --- examples/maplibre/README.md | 10 +++++ examples/maplibre/app.css | 24 +++++++++++ examples/maplibre/index.html | 16 +++++++ examples/maplibre/package.json | 22 ++++++++++ examples/maplibre/src/app.js | 60 ++++++++++++++++++++++++++ examples/maplibre/src/control-panel.js | 25 +++++++++++ examples/maplibre/webpack.config.js | 49 +++++++++++++++++++++ 7 files changed, 206 insertions(+) create mode 100644 examples/maplibre/README.md create mode 100644 examples/maplibre/app.css create mode 100644 examples/maplibre/index.html create mode 100644 examples/maplibre/package.json create mode 100644 examples/maplibre/src/app.js create mode 100644 examples/maplibre/src/control-panel.js create mode 100644 examples/maplibre/webpack.config.js 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 ( +
+

MapLibre

+

+ Example showing using react-map-gl with maplibre-gl. +

+

+ Data license:{' '} + + OpenStreetMap + +

+
+ + View Code ↗ + +
+
+ ); +} + +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;