TalkingData open source geographic information visualization framework inMap

TalkingData open source geographic information visualization framework inMap

Author: TalkingData visualization engineer Lifeng Lu

inMap is a canvas-based big data visualization library open sourced by the TalkingData visualization team, focusing on the visualization of big data direction points, lines, and surfaces. Currently, it supports scattered points, fences, heat, grids, aggregation, etc.; it is committed to making big data visualization simple and easy to use.

GitHub address: (Please Star!)

Document address:


  • Multi-threaded high performance
  • Multi-layer overlay
  • Intelligent algorithm
  • Friendly API
  • Can customize the theme

The effect screenshot is as follows:

inMap is a more intelligent geographic visualization framework, mainly for engineers and designers who are engaged in data visualization applications.

  • Low-level drawing engine: currently provides basic drawing capabilities based on canvas 2d, and a version based on WebGL is under planning;
  • Algorithm: Built-in latitude and longitude Mercator conversion, text avoidance algorithm, best mark point algorithm, automatic grouping mark color matching algorithm, etc.

Every algorithm written by inMap is to enhance the user experience and pursue the ultimate effect. We hope to use inMap to make great products.

The inMap interface design is also very friendly. It is hoped that developers can quickly build beautiful visual effects through simple configuration.

Introduction to text avoidance algorithm:

In our projects, we often encounter the need to make dots and mark text on the map. We use a popular visualization library to show the effect as follows:

(The text is densely packed, all stacked together, the effect is very poor, it may be bitten by the product manager)

inMap implements a text-based typesetting algorithm. Isn t it awesome? The renderings are as follows:

Isn t it cool? InMap has implemented its own quartile text typesetting algorithm, which sounds unclear, don t worry, let me take it slowly.

Each marking point has four places for text, if you can t fit it on the left, then try on the right, and if it doesn t work, try on the bottom, and so on. The principle is as simple as that, haha.

The implementation details are as follows:

  • Find the rectangle to display the text (text width and height)
  • Create a virtual text collection object with coordinates, and sort the coordinates of the collection from small to large
  • Recursively traverse the virtual text collection to determine whether it intersects with others. If there is an intersection, move the current text position until it disjoins. When you can't find a suitable location, you choose to hide the current text.

Follow-up will create better visualization graphics and algorithms, and follow-up WebGL version.