🌏 [front-end map] series of fourth play to come, today to bring you is how to make a color thematic map. In the first two articles, we explained the basic use of Mapbox and how to design a highly customizable map. If you have not learned how to use Mapbox, you can check the first two articles.

Make ideas

There are two ways to make color-filled thematic maps:

  • Directly in theMapbox StudioUpload data, adjust color matching according to attribute values;
  • addfillLayer, usingMapbox ExpressionAdjust the color scheme.

To prepare data

In fact, in Mapbox map, we can upload country, province, continent, city etc. polygon data in Studio, and then reference this data layer in Style, also can use the own business boundary data. At the same time, GL JS SDK supports the function of matching colors according to the data in tiles, which is called Expression in Mapbox.

Data acquisition can recommend a site: http://datav.aliyun.com/tools/atlas/index.html#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

Support GeoJson data download of provinces and cities:

You can click the download button on the right to directly download the JSON file. Of course, the download is far from enough. You need to customize and add visual attributes. Add the data of Confirmed, Recovery and Deaths here. Since only provincial data are visualized this time, the above data of each province can be obtained by grouping query by province in the database, followed by routine operation. It is OK to add these properties to the GeoJSON properties, for example:

"properties": {
      "childNum": 17."size": "1700"."name": Henan Province."id": "41"."cp": [
             113.0668.33.8818]."confirmed": 1276."deaths": 24."recovery": 1270
 }

Copy the code

Idea 1 Implementation

You need to save the previously edited data as a local file and upload it to Mapbox Studio; The basic usage of Mapbox Studio will not be explained too much here. If you don’t know how to use Mapbox Studio, you can check out the previous several articles to understand it. Here directly create a new style map, style to your preferences

Upload our pre-downloaded GeoJson data:

Select the data we have downloaded in advance and upload it directly. The corresponding prompt will be given in the lower right corner when uploading successfully. Click the input box under Source to select the file we just uploaded

After selecting should page should show a map of China style, specific display according to their choice of data

Switch back to the style

Click on Style Across Data Range to customize the color palette according to the data attributes you added

Publish it and use it as a base map in your Mapbox application.

The above method can achieve the effect, but dynamic change is difficult to achieve, for example, I want to be able to quickly switch display attributes, if I still use the first method, I have to publish three layers, and then switch display, which is not efficient.

Idea 2 Implementation

In the front end, the program is used to add GeoJSON layers, and in the back end, GeoJSON data is generated according to the query conditions. When data is needed, you can access the back end interface. The front-end code is as follows:

      map.addSource("fillSourceID", {
        type: "geojson".data: "./GeoJson.json"  // Own json file
      });
      map.addLayer({
        id: "fillID".type: "fill" /* Fill is typically used to represent a face, usually larger */.source: "fillSourceID".paint: {
          "fill-color": {
            property: "confirmed".// this will be your density property form you geojson
            stops: [[0."#ffd0a6"],
              [10."#ffd0a6"],
              [100."#ffaa7f"],
              [500."#ff704e"],
              [1000."#f04040"],
              [10000."#b50a09"]]},"fill-opacity": 1 /* Transparency */}});Copy the code

In this way, the programmer can freely control the display attributes, display color configuration and display data time cycle, and the scalability of the program has been greatly enhanced. The final effect is achieved when:

The last

Write the article is not easy, remember to pay attention to wechat public number: front-end development enthusiasts to this article to a triple punch it 👍👍👍. Stay tuned, the series will continue to be updated, the next issue will bring more exciting events 🔥🔥🔥