Layers: An Introduction to Map Creation with

Encora | September 23, 2021 is part of the framework suite, an open source framework for big data visualizations. The basic idea of using is to render a stack of visual overlays, usually over maps.

This image has an empty alt attribute; its file name is bitmap-layer.png
Figure 1. Column Layer example

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.

This image has an empty alt attribute; its file name is Screen-Shot-2019-12-02-at-4.45.49-PM.png
Figure 2. Initial values from map

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.


This image has an empty alt attribute; its file name is Screen-Shot-2019-12-02-at-3.01.48-PM.png
Figure 3. Code to create a layer
This image has an empty alt attribute; its file name is column-layer.png
Figure 4. Layer over map 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, 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, considers the new layer instance an "update" of the old instance.

Finally.. 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.

This image has an empty alt attribute; its file name is Animated-GIF-downsized.gif

Vision meets Robotics: The KITTI Dataset” licensed under CC BY-NC-SA 3.0.  "Lexus IS F 3D Model" by Yo.Ri licensed under CC BY 4.0

Insight Content


Share this Post

Featured Insights

Fill Out Later