Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arperyan/svelte-deckgl
https://github.com/arperyan/svelte-deckgl
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/arperyan/svelte-deckgl
- Owner: arperyan
- Created: 2021-01-25T14:07:17.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-07T23:03:40.000Z (almost 3 years ago)
- Last Synced: 2024-05-31T21:01:04.325Z (5 months ago)
- Language: Svelte
- Size: 2.67 MB
- Stars: 9
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte DeckGL
## Deck.gl and Mapbox
Head over to Deck.gl and Mapbox to see the official documentation to learn more.### Using Mapbox
```import { HexagonLayer } from "@deck.gl/aggregation-layers";
import { SvelteDeckGL } from "./components/components.module";const DATA_URL = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json";
const MAPBOX_TOKEN = "<YOUR_TOKEN>";
let deckInstance;
// Create you own Tooltip
function getTooltip({ object }) {
if (!object) {
return null;
}const count = object.points.length;
return (
object &&
`${object.position.join(", ")}
No. of bikes: ${count} `
);
}
// Add the options for mapbox and the style
let viewState = {
longitude: -122.4,
latitude: 37.74,
zoom: 11,
maxZoom: 20,
pitch: 30,
bearing: 0,
style: "mapbox://styles/arperyan/cj8n10t397cyn2rkap4ybrjid",
};// Add your own layer
const layers = new HexagonLayer({
id: "hexagon-layer",
data: DATA_URL,
pickable: true,
extruded: true,
radius: 200,
autoHighlight: true,
elevationScale: 4,
getPosition: (d) => d.COORDINATES,
});
.App {
height: 100%;
}