Skip to content

Commit e630af4

Browse files
ibgreenibgreen
authored
chore: add more examples (#159)
1 parent f8b0170 commit e630af4

File tree

37 files changed

+14900
-891
lines changed

37 files changed

+14900
-891
lines changed

‎examples/bing-maps/README.md renamed to ‎examples/bing-maps/get-started/README.md

File renamed without changes.

‎examples/bing-maps/get-started/app.ts

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import {loadModule} from '@deck.gl-community/bing-maps';
2+
import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
3+
4+
// set your Bing Maps API key here
5+
const BING_MAPS_API_KEY = (import.meta as any)?.env?.VITE_BING_MAPS_API_KEY || 'NO-KEY-SUPPLIED';
6+
7+
// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
8+
const AIR_PORTS =
9+
'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';
10+
11+
12+
export function exampleApplication() {
13+
loadModule().then(({Map, MapTypeId, Location, DeckOverlay}: any) => {
14+
// Create map
15+
const map = new Map(document.getElementById('map'), {
16+
credentials: BING_MAPS_API_KEY,
17+
supportedMapTypes: [MapTypeId.aerial, MapTypeId.canvasLight, MapTypeId.canvasDark],
18+
disableBirdsEye: true,
19+
disableStreetside: true
20+
});
21+
22+
map.setView({
23+
center: new Location(51.47, 0.45),
24+
zoom: 4
25+
});
26+
27+
// Add deck.gl overlay
28+
const deckOverlay = new DeckOverlay({
29+
layers: [
30+
new GeoJsonLayer({
31+
id: 'airports',
32+
data: AIR_PORTS,
33+
// Styles
34+
filled: true,
35+
pointRadiusMinPixels: 2,
36+
pointRadiusScale: 2000,
37+
getPointRadius: (f) => 11 - f.properties.scalerank,
38+
getFillColor: [200, 0, 80, 180],
39+
// Interactive props
40+
pickable: true,
41+
autoHighlight: true,
42+
onClick: (info) =>
43+
// eslint-disable-next-line
44+
info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
45+
}),
46+
new ArcLayer({
47+
id: 'arcs',
48+
data: AIR_PORTS,
49+
dataTransform: (d: any) => d.features.filter((f) => f.properties.scalerank < 4),
50+
// Styles
51+
getSourcePosition: (f) => [-0.4531566, 51.4709959], // London
52+
getTargetPosition: (f) => f.geometry.coordinates,
53+
getSourceColor: [0, 128, 200],
54+
getTargetColor: [200, 0, 80],
55+
getWidth: 1
56+
})
57+
],
58+
getTooltip: (info) => info.object && info.object.properties.name
59+
});
60+
map.layers.insert(deckOverlay);
61+
});
62+
}

‎examples/bing-maps/index.html renamed to ‎examples/bing-maps/get-started/index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
</head>
1919
<body>
2020
<div id="map"></div>
21-
<script type="module" src="app.ts"></script>
21+
<script type="module">
22+
import {exampleApplication} from './app.ts';
23+
exampleApplication();
24+
</script>
2225
</body>
2326
</html>

‎examples/bing-maps/package.json renamed to ‎examples/bing-maps/get-started/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
{
2+
"name": "bing-deck-get-started-example",
3+
"private": true,
24
"license": "MIT",
35
"type": "module",
46
"scripts": {

‎examples/bing-maps/tsconfig.json renamed to ‎examples/bing-maps/get-started/tsconfig.json

File renamed without changes.

‎examples/editable-layers/codesandbox/world-heritage/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"dependencies": {
3+
"@deck.gl-community/react": "^9.0.1",
34
"@deck.gl/core": "^8.8.23",
45
"@deck.gl/react": "^8.8.23",
5-
"@deck.gl-community/react": "^9.0.1",
66
"@turf/helpers": "^6.5.0",
77
"global": "4.4.0",
88
"react": "^18.2.0",

‎examples/leaflet/app.ts

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎examples/leaflet/README.md renamed to ‎examples/leaflet/get-started/README.md

File renamed without changes.

‎examples/bing-maps/app.ts renamed to ‎examples/leaflet/get-started/app.ts

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
1-
import {loadModule} from '@deck.gl-community/bing-maps';
1+
import {DeckLayer} from '@deck.gl-community/leaflet';
2+
import {MapView} from '@deck.gl/core';
23
import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
3-
4-
// set your Bing Maps API key here
5-
const BING_MAPS_API_KEY = (import.meta as any).env.VITE_BING_MAPS_API_KEY;
4+
import * as L from 'leaflet';
5+
import 'leaflet/dist/leaflet.css';
66

77
// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
88
const AIR_PORTS =
99
'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';
1010

11-
loadModule().then(({Map, MapTypeId, Location, DeckOverlay}: any) => {
11+
export function exampleApplication() {
1212
// Create map
13-
const map = new Map(document.getElementById('map'), {
14-
credentials: BING_MAPS_API_KEY,
15-
supportedMapTypes: [MapTypeId.aerial, MapTypeId.canvasLight, MapTypeId.canvasDark],
16-
disableBirdsEye: true,
17-
disableStreetside: true
18-
});
19-
20-
map.setView({
21-
center: new Location(51.47, 0.45),
22-
zoom: 4
13+
const map = L.map(document.getElementById('map'), {
14+
center: [51.47, 0.45],
15+
zoom: 4,
2316
});
17+
L.tileLayer('https://tiles.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png', {
18+
maxZoom: 22,
19+
attribution:
20+
'© <a href="https://carto.com/about-carto/" target="_blank" rel="noopener">CARTO</a>, © <a href="http://www.openstreetmap.org/about/" target="_blank">OpenStreetMap</a> contributors',
21+
}).addTo(map);
2422

2523
// Add deck.gl overlay
26-
const deckOverlay = new DeckOverlay({
24+
const deckLayer = new DeckLayer({
25+
views: [
26+
new MapView({ repeat: true }),
27+
],
2728
layers: [
2829
new GeoJsonLayer({
2930
id: 'airports',
@@ -55,5 +56,5 @@ loadModule().then(({Map, MapTypeId, Location, DeckOverlay}: any) => {
5556
],
5657
getTooltip: (info) => info.object && info.object.properties.name
5758
});
58-
map.layers.insert(deckOverlay);
59-
});
59+
map.addLayer(deckLayer);
60+
}

‎examples/leaflet/get-started/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>deck.gl w/ Leaflet example</title>
6+
<style>
7+
#map {
8+
position: absolute;
9+
top: 0;
10+
left: 0;
11+
width: 100%;
12+
height: 100%;
13+
}
14+
.deck-tooltip {
15+
white-space: nowrap;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<div id="map"></div>
21+
<script type="module">
22+
import {exampleApplication} from 'app.ts';
23+
exampleApplication();
24+
</script>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)