From 0b154e017c4cea46ac8f49ad284ec91732ee9179 Mon Sep 17 00:00:00 2001 From: Xiaoji Chen Date: Thu, 24 Jun 2021 10:14:55 -0700 Subject: [PATCH] Add leaflet examples (#5906) --- .../get-started/pure-js/leaflet/README.md | 26 +++++++ examples/get-started/pure-js/leaflet/app.js | 54 +++++++++++++ .../get-started/pure-js/leaflet/index.html | 21 +++++ .../get-started/pure-js/leaflet/package.json | 21 +++++ .../pure-js/leaflet/webpack.config.js | 13 ++++ .../get-started/scripting/leaflet/index.html | 78 +++++++++++++++++++ 6 files changed, 213 insertions(+) create mode 100644 examples/get-started/pure-js/leaflet/README.md create mode 100644 examples/get-started/pure-js/leaflet/app.js create mode 100644 examples/get-started/pure-js/leaflet/index.html create mode 100644 examples/get-started/pure-js/leaflet/package.json create mode 100644 examples/get-started/pure-js/leaflet/webpack.config.js create mode 100644 examples/get-started/scripting/leaflet/index.html diff --git a/examples/get-started/pure-js/leaflet/README.md b/examples/get-started/pure-js/leaflet/README.md new file mode 100644 index 00000000000..e6475674ac4 --- /dev/null +++ b/examples/get-started/pure-js/leaflet/README.md @@ -0,0 +1,26 @@ +
+ +
+ +## Example: Use deck.gl with Leaflet + +Uses [Webpack](https://github.com/webpack/webpack) to bundle files and serves it +with [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server). + +## Usage + +To install dependencies: + +```bash +npm install +# or +yarn +``` + +Commands: +* `npm start` is the development target, to serve the app and hot reload. +* `npm run build` is the production target, to create the final bundle and write to disk. + +## Attribution + +This example uses [deck.gl-leaflet](https://github.com/zakjan/deck.gl-leaflet) developed by [Jan Žák](https://github.com/zakjan/). diff --git a/examples/get-started/pure-js/leaflet/app.js b/examples/get-started/pure-js/leaflet/app.js new file mode 100644 index 00000000000..1ae3e7fc948 --- /dev/null +++ b/examples/get-started/pure-js/leaflet/app.js @@ -0,0 +1,54 @@ +/* eslint-disable */ +import * as L from 'leaflet'; +import {LeafletLayer} from 'deck.gl-leaflet'; +import {MapView} from '@deck.gl/core'; +import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers'; + +// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz +const AIR_PORTS = + 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson'; + +const map = L.map(document.getElementById('map'), { + center: [51.47, 0.45], + zoom: 4 +}); +L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: + '© OpenStreetMap contributors' +}).addTo(map); + +const deckLayer = new LeafletLayer({ + views: [ + new MapView({ + repeat: true + }) + ], + layers: [ + new GeoJsonLayer({ + id: 'airports', + data: AIR_PORTS, + // Styles + filled: true, + pointRadiusMinPixels: 2, + pointRadiusScale: 2000, + getPointRadius: f => 11 - f.properties.scalerank, + getFillColor: [200, 0, 80, 180] + }), + new ArcLayer({ + id: 'arcs', + data: AIR_PORTS, + dataTransform: d => d.features.filter(f => f.properties.scalerank < 4), + // Styles + getSourcePosition: f => [-0.4531566, 51.4709959], // London + getTargetPosition: f => f.geometry.coordinates, + getSourceColor: [0, 128, 200], + getTargetColor: [200, 0, 80], + getWidth: 1 + }) + ] +}); +map.addLayer(deckLayer); + +const featureGroup = L.featureGroup(); +featureGroup.addLayer(L.marker([51.4709959, -0.4531566])); +map.addLayer(featureGroup); diff --git a/examples/get-started/pure-js/leaflet/index.html b/examples/get-started/pure-js/leaflet/index.html new file mode 100644 index 00000000000..35c12ffa9d4 --- /dev/null +++ b/examples/get-started/pure-js/leaflet/index.html @@ -0,0 +1,21 @@ + + + + + deck.gl w/ Leaflet example + + + + +
+ + + diff --git a/examples/get-started/pure-js/leaflet/package.json b/examples/get-started/pure-js/leaflet/package.json new file mode 100644 index 00000000000..84654ddd4d9 --- /dev/null +++ b/examples/get-started/pure-js/leaflet/package.json @@ -0,0 +1,21 @@ +{ + "name": "pure-js-leaflet", + "version": "0.0.0", + "license": "MIT", + "scripts": { + "start": "webpack-dev-server --progress --hot --open", + "start-local": "webpack-dev-server --env.local --progress --hot --open", + "build": "webpack -p" + }, + "dependencies": { + "@deck.gl/core": "^8.1.0", + "@deck.gl/layers": "^8.1.0", + "deck.gl-leaflet": "^1.1.1", + "leaflet": "^1.7.1" + }, + "devDependencies": { + "webpack": "^4.20.2", + "webpack-cli": "^3.1.2", + "webpack-dev-server": "^3.1.1" + } +} diff --git a/examples/get-started/pure-js/leaflet/webpack.config.js b/examples/get-started/pure-js/leaflet/webpack.config.js new file mode 100644 index 00000000000..0bacc22fac4 --- /dev/null +++ b/examples/get-started/pure-js/leaflet/webpack.config.js @@ -0,0 +1,13 @@ +// NOTE: To use this example standalone (e.g. outside of deck.gl repo) +// delete the local development overrides at the bottom of this file + +const CONFIG = { + mode: 'development', + + entry: { + app: './app.js' + } +}; + +// This line enables bundling against src in this repo rather than installed module +module.exports = env => (env ? require('../../../webpack.config.local')(CONFIG)(env) : CONFIG); diff --git a/examples/get-started/scripting/leaflet/index.html b/examples/get-started/scripting/leaflet/index.html new file mode 100644 index 00000000000..1d76076bb04 --- /dev/null +++ b/examples/get-started/scripting/leaflet/index.html @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + +
+ + + +