Skip to content

Commit 7e4ed44

Browse files
zakjanzakjan
authored
Rename Leaflet DeckLayer to DeckOverlay (#454)
* Revert wrongly updated global index.html * Rename Leaflet DeckLayer to DeckOverlay * Fix build
1 parent bf56f88 commit 7e4ed44

File tree

11 files changed

+46
-124
lines changed

11 files changed

+46
-124
lines changed

docs/modules/leaflet/api-reference/deck-layer.md renamed to docs/modules/leaflet/api-reference/deck-overlay.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
# DeckLayer
1+
# DeckOverlay
22

3-
A `DeckLayer` is a leaflet layer that renders deck.gl layers on top of a leaflet base map. `DeckLayer` is an implementation of [L.Layer](https://leafletjs.com/reference.html#layer) and can be interleaved with other Leaflet layers.
3+
A `DeckOverlay` is a leaflet layer that renders deck.gl layers on top of a leaflet base map. `DeckOverlay` is an implementation of [L.Layer](https://leafletjs.com/reference.html#layer) and can be interleaved with other Leaflet layers.
44

55
```js
6-
const deckLayer = new DeckLayer({
6+
const deckOverlay = new DeckOverlay({
77
views: [
88
new MapView({ repeat: true }),
99
],
1010
layers: [...],
1111
});
12-
map.addLayer(deckLayer);
12+
map.addLayer(deckOverlay);
1313
```
1414

1515
The constructor accepts a props object that is passed to the [Deck](https://deck.gl/docs/api-reference/core/deck) constructor. See the [limitations](#supported-features-and-limitations) section below for more details.
1616

17-
The following [Deck methods](https://deck.gl/docs/api-reference/core/deck#methods) can be called directly from a `DeckLayer` instance:
17+
The following [Deck methods](https://deck.gl/docs/api-reference/core/deck#methods) can be called directly from a `DeckOverlay` instance:
1818

19-
- `deckLayer.setProps`
20-
- `deckLayer.pickObject`
21-
- `deckLayer.pickMultipleObjects`
22-
- `deckLayer.pickObjects`
19+
- `deckOverlay.setProps`
20+
- `deckOverlay.pickObject`
21+
- `deckOverlay.pickMultipleObjects`
22+
- `deckOverlay.pickObjects`
2323

2424
## Supported Features and Limitations
2525

‎docs/modules/leaflet/developer-guide/get-started.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ npm install deck.gl @deck.gl-community/leaflet leaflet
1111
## Usage
1212

1313
```js
14-
import {DeckLayer} from '@deck.gl-community/leaflet';
14+
import {DeckOverlay} from '@deck.gl-community/leaflet';
1515
import {MapView} from '@deck.gl/core';
1616
import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
1717
import * as L from 'leaflet';
@@ -33,7 +33,7 @@ L.tileLayer('https://tiles.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png', {
3333
}).addTo(map);
3434

3535
// Add deck.gl overlay
36-
const deckLayer = new DeckLayer({
36+
const deckOverlay = new DeckOverlay({
3737
views: [
3838
new MapView({ repeat: true }),
3939
],
@@ -68,5 +68,5 @@ const deckLayer = new DeckLayer({
6868
],
6969
getTooltip: (info) => info.object && info.object.properties.name
7070
});
71-
map.addLayer(deckLayer);
71+
map.addLayer(deckOverlay);
7272
```

‎docs/modules/leaflet/sidebar.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
"label": "@deck.gl-community/leaflet",
44
"items": [
55
"modules/leaflet/README",
6-
"modules/leaflet/api-reference/deck-layer"
6+
"modules/leaflet/api-reference/deck-overlay"
77
]
88
}

‎examples/gallery/leaflet.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title>deck-gl.leaflet</title>
6+
<title>deck.gl w/ Leaflet example</title>
77
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
88
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
99
<script src="https://unpkg.com/[email protected]/dist.min.js"></script>
10-
<script src="https://unpkg.com/@deck.gl-community/[email protected]/dist/dist.min.js"></script>
11-
<!-- <script src="../dist/deck.gl-leaflet.umd.min.js"></script> -->
10+
<script src="https://unpkg.com/@deck.gl-community/[email protected]/dist/dist.min.js"></script>
1211

1312
<style>
1413
body {
@@ -43,7 +42,7 @@
4342
const latLngs = new Array(9).fill(undefined).map((_, i) => [startLatLng[0] + Math.floor(i / 3) * latDelta, startLatLng[1] + (i % 3) * lngDelta]);
4443
map.setView([startLatLng[0] + latDelta, startLatLng[1] + lngDelta]);
4544

46-
const deckLayer = new deckCommunity.DeckLayer({
45+
const deckOverlay = new deckCommunity.DeckOverlay({
4746
views: [
4847
new deck.MapView({
4948
repeat: true
@@ -72,7 +71,7 @@
7271
onHover: ({ object }) => object && console.log(object),
7372
getTooltip: ({ object }) => object && { html: object.id },
7473
});
75-
map.addLayer(deckLayer);
74+
map.addLayer(deckOverlay);
7675

7776
const featureGroup = L.featureGroup();
7877
latLngs.forEach(latLng => {

‎examples/leaflet/get-started/app.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {DeckLayer} from '@deck.gl-community/leaflet';
1+
import {DeckOverlay} from '@deck.gl-community/leaflet';
22
import {MapView} from '@deck.gl/core';
33
import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
44
import * as L from 'leaflet';
@@ -23,7 +23,7 @@ export function exampleApplication() {
2323
}).addTo(map);
2424

2525
// Add deck.gl overlay
26-
const deckLayer = new DeckLayer({
26+
const deckOverlay = new DeckOverlay({
2727
views: [
2828
new MapView({ repeat: true }),
2929
],
@@ -58,5 +58,5 @@ export function exampleApplication() {
5858
],
5959
getTooltip: (info) => info.object && info.object.properties.name
6060
});
61-
map.addLayer(deckLayer);
61+
map.addLayer(deckOverlay);
6262
}

‎examples/leaflet/scripting/index.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title>deck-gl.leaflet</title>
6+
<title>deck.gl w/ Leaflet example</title>
77
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
88
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
99
<script src="https://unpkg.com/[email protected]/dist.min.js"></script>
10-
<script src="https://unpkg.com/[email protected]/dist/deck.gl-leaflet.umd.min.js"></script>
11-
<!-- <script src="../dist/deck.gl-leaflet.umd.min.js"></script> -->
10+
<script src="https://unpkg.com/@deck.gl-community/[email protected]/dist/dist.min.js"></script>
1211

1312
<style>
1413
body {
@@ -43,7 +42,7 @@
4342
const latLngs = new Array(9).fill(undefined).map((_, i) => [startLatLng[0] + Math.floor(i / 3) * latDelta, startLatLng[1] + (i % 3) * lngDelta]);
4443
map.setView([startLatLng[0] + latDelta, startLatLng[1] + lngDelta]);
4544

46-
const deckLayer = new DeckGlLeaflet.LeafletLayer({
45+
const deckOverlay = new deckCommunity.DeckOverlay({
4746
views: [
4847
new deck.MapView({
4948
repeat: true
@@ -72,7 +71,7 @@
7271
onHover: ({ object }) => object && console.log(object),
7372
getTooltip: ({ object }) => object && { html: object.id },
7473
});
75-
map.addLayer(deckLayer);
74+
map.addLayer(deckOverlay);
7675

7776
const featureGroup = L.featureGroup();
7877
latLngs.forEach(latLng => {

‎index.html‎

Lines changed: 7 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,9 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
3-
4-
<head>
5-
<meta charset="utf-8">
6-
<title>deck-gl.leaflet</title>
7-
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
8-
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
9-
<script src="https://unpkg.com/[email protected]/dist.min.js"></script>
10-
<script src="https://unpkg.com/[email protected]/dist/deck.gl-leaflet.umd.min.js"></script>
11-
<!-- <script src="../dist/deck.gl-leaflet.umd.min.js"></script> -->
12-
13-
<style>
14-
body {
15-
margin: 0;
16-
background: #000;
17-
}
18-
19-
#map {
20-
width: 100vw;
21-
height: 100vh;
22-
}
23-
</style>
24-
</head>
25-
26-
<body>
27-
<div id="map"></div>
28-
29-
<script type="module">
30-
const mapElement = document.querySelector('#map');
31-
32-
const map = L.map(mapElement, {
33-
center: [51.5, -0.11],
34-
zoom: 13,
35-
});
36-
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
37-
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
38-
}).addTo(map);
39-
40-
const startLatLng = [51.5, -0.11];
41-
const latDelta = 0.01;
42-
const lngDelta = latDelta * 1.75;
43-
const latLngs = new Array(9).fill(undefined).map((_, i) => [startLatLng[0] + Math.floor(i / 3) * latDelta, startLatLng[1] + (i % 3) * lngDelta]);
44-
map.setView([startLatLng[0] + latDelta, startLatLng[1] + lngDelta]);
45-
46-
const deckLayer = new DeckGlLeaflet.LeafletLayer({
47-
views: [
48-
new deck.MapView({
49-
repeat: true
50-
})
51-
],
52-
layers: [
53-
new deck.PolygonLayer({
54-
data: [
55-
[[-180, 85.06], [0, 85.06], [180, 85.06], [180, -85.06], [0, -85.06], [-180, -85.06]]
56-
],
57-
getPolygon: d => d,
58-
stroked: true,
59-
filled: false,
60-
getLineColor: [255, 0, 0],
61-
getLineWidth: 2,
62-
lineWidthUnits: 'pixels',
63-
}),
64-
new deck.ScatterplotLayer({
65-
data: latLngs.map((latLng, i) => ({ id: i, position: [latLng[1], latLng[0]] })),
66-
getPosition: d => d.position,
67-
getRadius: 100,
68-
getFillColor: [255, 0, 0],
69-
pickable: true,
70-
}),
71-
],
72-
onHover: ({ object }) => object && console.log(object),
73-
getTooltip: ({ object }) => object && { html: object.id },
74-
});
75-
map.addLayer(deckLayer);
76-
77-
const featureGroup = L.featureGroup();
78-
latLngs.forEach(latLng => {
79-
featureGroup.addLayer(L.marker(latLng));
80-
});
81-
map.addLayer(featureGroup);
82-
</script>
83-
</body>
84-
3+
<head>
4+
<title>deck.gl-community tests</title>
5+
</head>
6+
<body>
7+
<script type="module" src="./test/browser.js"></script>
8+
</body>
859
</html>

‎modules/leaflet/README.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ npm install deck.gl @deck.gl-community/leaflet leaflet
1313
## Usage
1414

1515
```js
16-
import {DeckLayer} from '@deck.gl-community/leaflet';
16+
import {DeckOverlay} from '@deck.gl-community/leaflet';
1717
import {MapView} from '@deck.gl/core';
1818
import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
1919
import * as L from 'leaflet';
@@ -35,7 +35,7 @@ L.tileLayer('https://tiles.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png', {
3535
}).addTo(map);
3636

3737
// Add deck.gl overlay
38-
const deckLayer = new DeckLayer({
38+
const deckOverlay = new DeckOverlay({
3939
views: [
4040
new MapView({ repeat: true }),
4141
],
@@ -70,33 +70,33 @@ const deckLayer = new DeckLayer({
7070
],
7171
getTooltip: (info) => info.object && info.object.properties.name
7272
});
73-
map.addLayer(deckLayer);
73+
map.addLayer(deckOverlay);
7474
```
7575

7676
## API Reference
7777

78-
### DeckLayer
78+
### DeckOverlay
7979

8080
An implementation of [L.Layer](https://leafletjs.com/reference.html#layer).
8181

8282
```js
83-
const deckLayer = new DeckLayer({
83+
const deckOverlay = new DeckOverlay({
8484
views: [
8585
new MapView({ repeat: true }),
8686
],
8787
layers: [...],
8888
});
89-
map.addLayer(deckLayer);
89+
map.addLayer(deckOverlay);
9090
```
9191

9292
The constructor accepts a props object that is passed to the [Deck](https://deck.gl/docs/api-reference/core/deck) constructor. See the [limitations](#supported-features-and-limitations) section below for more details.
9393

94-
The following [Deck methods](https://deck.gl/docs/api-reference/core/deck#methods) can be called directly from a `DeckLayer` instance:
94+
The following [Deck methods](https://deck.gl/docs/api-reference/core/deck#methods) can be called directly from a `DeckOverlay` instance:
9595

96-
- `deckLayer.setProps`
97-
- `deckLayer.pickObject`
98-
- `deckLayer.pickMultipleObjects`
99-
- `deckLayer.pickObjects`
96+
- `deckOverlay.setProps`
97+
- `deckOverlay.pickObject`
98+
- `deckOverlay.pickMultipleObjects`
99+
- `deckOverlay.pickObjects`
100100

101101
## Supported Features and Limitations
102102

modules/leaflet/src/deck-layer.ts renamed to modules/leaflet/src/deck-overlay.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import type {Deck, DeckProps} from '@deck.gl/core';
77
import {createDeckInstance, updateDeckView} from './deck-utils';
88
import type {ViewOrViews} from './deck-utils';
99

10-
export class DeckLayer extends L.Layer {
10+
export class DeckOverlay extends L.Layer {
1111
props: DeckProps<ViewOrViews>;
1212
_container: HTMLDivElement | undefined = undefined;
1313
_deck: Deck<ViewOrViews> | undefined = undefined;

‎modules/leaflet/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
// SPDX-License-Identifier: MIT
33
// Copyright (c) vis.gl contributors
44

5-
export * from './deck-layer';
5+
export * from './deck-overlay';

0 commit comments

Comments
 (0)