Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/arperyan/svelte-deckgl


https://github.com/arperyan/svelte-deckgl

Last synced: 3 months ago
JSON representation

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%;
}