Svelte DeckGL

Deck.gl and Mapbox

Head over to Deck.gl and Mapbox to see the official documentation to learn more.

Using Mapbox

<script>
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,
});
</script>

<div class="App">
  <SvelteDeckGL {layers} {viewState} {getTooltip} TOKEN={MAPBOX_TOKEN} bind:deck={deckInstance}/>
</div>

<style>
.App {
    height: 100%;
}
</style>