Create a Mapbox Visualization

Creating a Mapbox visualization requires configuring one or more layers. You can use existing base type templates or create your own figure templates as well.

Here is an example of making a map using Mapbox:

  1. Add a <config> section and make it dependent on the base type template for a Mapbox map:

    {
    	"depends_on" : [ "mapbox-template"],
    	"height": 450
    }
  2. Add a query to your layer file to acquire the data:

    <query name="myquery">
    SELECT latitude, longitude, location_details FROM mytable
    </query>
  3. Add a step to your <pipeline> to execute the query. The query also formats an HTML tooltip using the location_details column and creates the new column.

    {
    	"steps" : [
    	    {
    	        "action" : "bigquery_query",
    	        "query_name" : "myquery" 
    	    },
    	    {
    	        "action" : "transform",
    	        "operation": "format",
    	        "format" : "<br>{{ location_details }}",
    	        "output_column_name": "tooltip"
    	    }
    	]
    }
  4. Add rules to your <mappings> to create GeoJSON from the data. The mapping configures which columns specify the latitude and longitude of the points as well as which properties to include in the properties section of GeoJSON.

    {
    	"rules" : [
    	    {
    	        "point_lat_column_name" : "latitude",
    	        "point_lon_column_name" : "longitude",
    	        "property_column_name_list" : [ "tooltip" ],
    	        "type" : "geojson",
    	        "figure_path" : [ "layers", 0, "source", "data", "features" ]
    	    }
    	]
    }
  5. Add the visualization tag to your HTML page.

Creating or Editing Figure Templates

You can create or modify your own <figure> templates in your layer file as well. An example Mapbox figure looks like this:

{
    "markerMode": "image",
    "map" : {
        "style": "mapbox://styles/mapbox/dark-v9",
        "center": [-98, 38.88],
        "minZoom": 2,
        "zoom": 2
    },
    "layers" : [
        {
            "source": {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection"
                }
            },
            "layout": {}
        }
    ]
}

The reference for these attributes can be found in the Mapbox GL documentation. You can use any option that you find in this specification and map data columns and values into the figure as it’s rendered. Reference: https://docs.mapbox.com/mapbox-gl-js/style-spec/