deck.gl not working with vue.js

[AlbertMarashi]

Hello,

I'm trying to make deck.gl work inside a Vue application, however, it's not working for me. The canvas is being recognised and attached and the canvas becomes interactive (can grab) However, my red dot doesn't appear in the canvas. I'm not sure why this is happening

<template>
    <div style="height: 100%">
          <canvas id="my-canvas"></canvas>
    </div>
</template>
<script>
import { Deck } from "@deck.gl/core"
import { ScatterplotLayer } from "@deck.gl/layers"

export default {
    data(){
        return {
            deck: null
        }
    },
    mounted(){
        const INITIAL_VIEW_STATE = {
            latitude: 37.78,
            longitude: -122.45,
            zoom: 3
        }

        this.deck = new Deck({
            canvas: 'my-canvas',
            initialViewState: INITIAL_VIEW_STATE,
            controller: true,
            layers: [
                new ScatterplotLayer({
                    data: [{
                        position: [-122.45, 37.8],
                        color: [255, 0, 0],
                        radius: 100
                    }]
                })
            ]
        })
    },

}
</script>

[AlbertMarashi]

Here's a codesandbox https://codesandbox.io/s/1mx1v97q3

[AlbertMarashi]

I'd be glad to help with the development of deck.gl and expand its reach into other frameworks like Vue, but I can't get a simple standalone working.

[Pessimistress]

It is working, it's just that your layer does not render anything visible.

First, you need to specify the getRadius prop of the ScatterplotLayer. The default is 1. Second, the radius is in meters, so it's not visible at zoom level 3.

You can try adding the following to the layer:

getRadius: d => d.radius,
getColor: d => d.color,
radiusMinPixels: 1

[AlbertMarashi]

@Pessimistress lol, thankyou! I've suggested some doc updates to make the standalone "get-started" guide simpler to get started. I think it'll help with adoption of deck.gl