First steps with from Uber is one of these cool libraries you may heard, you may even have looked at the examples, but not necessarily get hands dirty with it.

Let's change it.

What is for?

Well, you can do visualizations on maps (not necessarily on maps but I suppose this is primary purpose of this library).

What concept is important?

Layers. You can create many layers and each layer can show different things.

Can I use it with React?

Yes. It exposes a React component.

Can I use it without React?

Also yes. You dont' need React to use



npm install


import { DeckGL } from '';

Layers for choose:

Using with React

Let's choose some layer, say ScatterplotLayer. Let's import it.

import { ScatterplotLayer } from '';

And the rest of the code (like "draw the rest of the fucking owl" xD NOTE: this article is not meant to be a tutorial. They are just my first steps with but I decided to write about it because I thought it could be valuable for others).

Notice that coordinates are not pixels, but longitude and latitude.

Final effect:

Using without React

(if you don't want to use React, you can read this: Using without React. But what that docs won't tell you that you have to add canvas to DOM:


Weird fact: when I played first time with, I did it in "non-React way" (though I used React, I just created Deck imperatively within useEffect hook. And weird thing happened. Positioning was quite off. But I found out quickly that the reason was default styling from create-react-app, i.e. .App { text-align: center; }. So I removed it and it worked)


Popular posts from this blog

First steps with Plotly.js