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 (6 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%;

}