-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add(widgets) fullscreen widget (#8024)
- Loading branch information
1 parent
a2b5690
commit d03dc5a
Showing
18 changed files
with
739 additions
and
135 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
# FullscreenWidget | ||
|
||
## Props | ||
|
||
### `id` (String) | ||
|
||
Default: `'fullscreen'` | ||
|
||
Unique identifier of the widget. | ||
|
||
### `placement` (String, optional) | ||
|
||
Default: `'top-left'` | ||
|
||
Widget position within the view relatitive to the map container. Valid options are `top-left`, `top-right`, `bottom-left`, `bottom-right`, or `fill`. | ||
|
||
### `container` (HTMLElement, optional) | ||
|
||
Default: `undefined` | ||
|
||
A [compatible DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements) which should be made full screen. By default, the map container element will be made full screen. | ||
|
||
### `enterLabel` (String, optional) | ||
|
||
Toolip message displayed while hovering a mouse over the widget when out of fullscreen. | ||
|
||
Default: `'Enter Fullscreen'` | ||
|
||
### `exitLabel` (String, optional) | ||
|
||
Toolip message displayed while hovering a mouse over the widget when fullscreen. | ||
|
||
Default: `'Exit Fullscreen'` | ||
|
||
### `style` (Object, optional) | ||
|
||
Default: `{}` | ||
|
||
Additional CSS styles for the canvas. | ||
|
||
### `className` (String, optional) | ||
|
||
Default: `undefined` | ||
|
||
Class name to attach to the widget element. The element has the default class name of `deck-widget deck-fullscreen-widget`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
## Example: Use deck.gl with widgets | ||
|
||
Uses [Vite](https://vitejs.dev/) to bundle and serve files. | ||
|
||
## 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
import {Deck} from '@deck.gl/core'; | ||
import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers'; | ||
import {FullscreenWidget, DarkGlassTheme, LightGlassTheme} from '@deck.gl/widgets'; | ||
import '@deck.gl/widgets/stylesheet.css'; | ||
import {luma} from '@luma.gl/core'; | ||
import {WebGLDevice} from '@luma.gl/webgl'; | ||
|
||
luma.registerDevices([WebGLDevice]); | ||
|
||
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); | ||
const widgetTheme = prefersDarkScheme.matches ? DarkGlassTheme : LightGlassTheme; | ||
|
||
// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz | ||
const COUNTRIES = | ||
'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson'; //eslint-disable-line | ||
const AIR_PORTS = | ||
'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson'; | ||
|
||
const INITIAL_VIEW_STATE = { | ||
latitude: 51.47, | ||
longitude: 0.45, | ||
zoom: 4, | ||
bearing: 0, | ||
pitch: 30 | ||
}; | ||
|
||
new Deck({ | ||
initialViewState: INITIAL_VIEW_STATE, | ||
controller: true, | ||
layers: [ | ||
new GeoJsonLayer({ | ||
id: 'base-map', | ||
data: COUNTRIES, | ||
// Styles | ||
stroked: true, | ||
filled: true, | ||
lineWidthMinPixels: 2, | ||
opacity: 0.4, | ||
getLineColor: [60, 60, 60], | ||
getFillColor: [200, 200, 200] | ||
}), | ||
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], | ||
// Interactive props | ||
pickable: true, | ||
autoHighlight: true, | ||
onClick: info => | ||
// eslint-disable-next-line | ||
info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`) | ||
}), | ||
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 | ||
}) | ||
], | ||
widgets: [ | ||
new FullscreenWidget({}), | ||
new FullscreenWidget({id: 'themed', style: widgetTheme}), | ||
new FullscreenWidget({id: 'purple', className: 'purple'}) | ||
] | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>deck.gl Example</title> | ||
<style> | ||
body {margin: 0; width: 100vw; height: 100vh; overflow: hidden;} | ||
|
||
@media screen and (max-width: 600px) { | ||
.deck-widget { | ||
/* mobile */ | ||
--button-size: 48px; | ||
--button-corner-radius: 12px; | ||
} | ||
} | ||
|
||
.purple { | ||
--button-background: hsl(240, 40%, 40%); | ||
--button-stroke: hsla(240, 40%, 40%, 0.3); | ||
--button-icon-hover: rgb(236, 236, 236); | ||
--button-icon-idle: rgb(174, 174, 202); | ||
} | ||
</style> | ||
</head> | ||
<body></body> | ||
<script type="module" src="app.js"></script> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
{ | ||
"name": "deckgl-example-pure-js-basic", | ||
"version": "0.0.0", | ||
"private": true, | ||
"license": "MIT", | ||
"scripts": { | ||
"start": "vite --open", | ||
"start-local": "vite --config ../../../vite.config.local.mjs", | ||
"build": "vite build" | ||
}, | ||
"dependencies": { | ||
"@deck.gl/core": "^8.8.0", | ||
"@deck.gl/layers": "^8.8.0", | ||
"@deck.gl/widgets": "8.10.0-alpha.2", | ||
"@luma.gl/core": "^8.6.0-alpha.1", | ||
"@luma.gl/webgl": "^8.5.20" | ||
}, | ||
"devDependencies": { | ||
"vite": "^4.0.0" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import {h, render} from 'preact'; | ||
|
||
export const IconButton = props => { | ||
const {className, label, onClick} = props; | ||
return ( | ||
<div className="deck-widget-button-border"> | ||
<button | ||
className={`deck-widget-button ${className}`} | ||
type="button" | ||
onClick={onClick} | ||
title={label} | ||
> | ||
<div className="deck-widget-icon" /> | ||
</button> | ||
</div> | ||
); | ||
}; |
Oops, something went wrong.