Add leaflet examples (visgl#5906)

harisbal · Jun 24, 2021 · 0b154e0 · 0b154e0
1 parent f73ab05
commit 0b154e0
Show file tree

Hide file tree

Showing 6 changed files with 213 additions and 0 deletions.
diff --git a/examples/get-started/pure-js/leaflet/README.md b/examples/get-started/pure-js/leaflet/README.md
@@ -0,0 +1,26 @@
+<div align="center">
+   <img width="150" heigth="150" src="https://webpack.js.org/assets/icon-square-big.svg" />
+</div>
+
+## 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
@@ -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:
+    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8' />
+    <title>deck.gl w/ Leaflet example</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
+    <style>
+      #map {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src='app.js'></script>
+  </body>
+</html>
diff --git a/examples/get-started/pure-js/leaflet/package.json 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
@@ -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
@@ -0,0 +1,78 @@
+<html>
+  <head>
+    <!-- leaflet -->
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
+
+    <!-- deck.gl standalone bundle -->
+    <script src="https://unpkg.com/deck.gl@^8.1.0/dist.min.js"></script>
+    <!-- deck.gl-leaflet -->
+    <script src="https://unpkg.com/deck.gl-leaflet@1.1.1/dist/deck.gl-leaflet.min.js"></script>
+
+    <style>
+      #map {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="map"></div>
+  </body>
+
+  <script type="text/javascript">
+
+// 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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+}).addTo(map);
+
+const deckLayer = new DeckGlLeaflet.LeafletLayer({
+  views: [
+    new deck.MapView({
+      repeat: true
+    })
+  ],
+  layers: [
+    new deck.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 deck.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);
+
+  </script>
+</html>