Mapbox Integration

Adding Geometries to Mapbox in Polygonjs is done thanks to a few nodes:

  • mapbox_camera: Allows you to see a map and edit its global properties, such as camera longitude, latitude and zoom.
  • mapbox_transform: Moves geometries and points into Mapbox world.
  • mapbox_plane: Creates a plane constrained to the mapbox view.

Here is a 3 part tutorial:

Part 1/3: The Basics (5 min)

This first part shows you how the mapbox camera works and the basics on how to transform a geometry to see it on the map.

Part 2/3: Import Data from an API (11 min)

This part 2 of the tutorial shows you how to:

  • import data from an API and display it as points cloud
  • visualize those points on the map
  • add geometry on those points to clarify their meaning
  • add colors to the points and geometries depending on the values fetched from the API

Note that this video does not show yet how to show the number of cyclists. This will be shown as a completed scene file shortly.

Links shown in the video:

Part 3/3: Create A Heatmap (14 min)

This part 3 of the tutorial shows you how to:

  • copy values imported from the API onto a plane
  • add color to the plane to use it as a heatmap
  • constrain a plane to the camera to increase resolution as we zoom in
  • add tubes on the plane to visualize a 3D heatmap

The AirNow API mentioned in this video is available here: AirNow API

That's all you really need to know to add geometries to your maps. This should hopefully convince you make even more maps, as there is so much data available that could really be even more impactful if it was more visible.