Mapbox implementation of heat map tutorial

Heat map is a kind of thematic map in maobox. It uses the color and weight of the point to render the point and the indicators around the point. This article will share with you how to use maobox to implement the heat map function.

 Let’s take the temperature indicators of the top ten famous tea producing areas in the country as an example to create an effect like the picture above.

First, there must be relevant point data:
 

var tentea = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {
        name: "西湖龙井",
        dis: "杭州市西湖区",
        temp: 19.21,
        rank: 2,
      },
      geometry: {
        type: "Point",
        coordinates: [120.07637104262216, 30.110987373108287],
      },
    },
    {
      type: "Feature",
      properties: {
        name: "安溪铁观音",
        dis: "泉州市安溪县",
        temp: 19.03,
        rank: 3,
      },
      geometry: {
        type: "Point",
        coordinates: [117.93324898736677, 24.798769462568657],
      },
    }