Layers: An Introduction to Map Creation with Deck.gl

Deck.gl is part of the vis.gl framework suite, an open source framework for big data visualizations. The basic idea of using Deck.gl is to render a stack of visual overlays, usually over maps.

 

 

Layers in a Map

A layer is a packaged visualization type which takes a collection of data, every element with a position, color and it is rendered on a map. This data could be from a GeoJSon file or CSV, as an example, and could be represented in BitmapLayer, GeoJSon layer, line or polygon layer, among others. The layers are represented over a map, we have to indicate the position and the zoom, as parameters.

 

 

Elements of a Layer

To construct a Layer, you can instantiate an object with some properties,

• Layer ID: the unique identifier of this layer among all layers. It is recommended that this prop is set explicitly to avoid collision.
• Data: specifies data source of this layer's visualization. The value is expected to be a collection in JavaScript; Array, Map or Set, any object that contains a length field.
• Accessor: maps an object in data to its visual configuration, e.g. the radius of a circle, the color of a line, etc. All accessor prop names start with get.
• Other Layer Props: The rest of the props are typically numeric or boolean values. This includes props that define the render options (opacity, font family of the TextLayer, etc.), coordinate system, and interactivity.

 

 

 

 

Deck.gl allows you to render multiple layers using the same or different data sets. You simply provide an array of layer instances and the framework will render them in order. The layer can specify how its state is initialized and finalized, if and how it should react to property changes, and how it should draw and pick the layer.

Internally, Deck.gl sets up the animation loop and calls provided callbacks on initial load and for each rendered frame. When the layer list is drawn to screen it matches the new layer instances with the instances from the previous render call, and they are uniquely identified by their id property. Every time you create a new layer with the same id property as a layer you rendered last time, Deck.gl considers the new layer instance an "update" of the old instance.

Finally..

Deck.gl is part of the frameworks created by Uber, a good option to create beautiful maps with different layers and effects. It can be useful if we want to represent data in a map, and JavaScript development makes very easy to use.