Skip to main content

Create Standalone Maps

In Fused Canvas you can create workflows by connecting UDFs together and visualizing them on a map.

We've created a simple UDF to serve as a map utils library to help you create standalone maps.

How to visualize your UDF on a standalone map​

In Canvas, create a simple UDF that returns a GeoDataFrame or a DataFrame with hex cells.

# vancouver_open_data
@fused.udf
def udf():
    import geopandas as gpd

    @fused.cache
    def load_geojson():
        # Load GeoJSON directly from the URL into a GeoDataFrame
        DATA_URL = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json"
        return gpd.read_file(DATA_URL)

    return load_geojson()

We have built a utils library to create common map visualizations using DeckGL:

@fused.udf
def udf():
    data = fused.run('vancouver_open_data')
    
    # Load map utilities for creating interactive maps
    map_utils = fused.load("https://github.com/fusedio/udfs/tree/cdb119d/community/milind/map_utils/")
    
    config = {
        "vectorLayer": {
            "@@type": "GeoJsonLayer",
            "stroked": True,
            "filled": True,
            "pickable": True,
            "getLineColor": [100, 100, 100, 200],
            "getLineWidth": 2,
            "getFillColor": {
                "@@function": "colorContinuous", 
                "attr": "growth", 
                "domain": [1, -1], 
                "colors": "ArmyRose"
            },
            "tooltipColumns": ["valuePerSqm", "growth"]
        }
    }
    
    return map_utils.deckgl_layers([
        {
            "type": "vector",
            "data": data,
            "config": config,
            "name": "Vancouver Price Increase"
        }
    ])

This creates a simple map that you can then embed anywhere:

Best Practices​

Ask AI to help create a map for you!​

  1. In Canvas, click on the (+) to create a dependency UDF to your data UDF.

  2. Ask AI to create a map for you:

Visualize this data on a standalone HTML map

Decouple your UDF from the map​

Keep your data logic in a separate UDF from the map. This allows you to keep the 2 UDFs separate and iterate on them independently.

Data UDF: Loads data, manipulates it and returns a GeoDataFrame or a DataFrame. Map UDF: Visualizes the data on a map with as little processing logic as possible.

Use debug=True in the Map UDFs to build faster​

In the Map UDF code using the map_utils library set debug=True to see the map being built in real time:

You can then copy the config from the debug mode, paste into your Map UDF and set debug=False to see the map in production.

Examples​

Template Canvas​

We put together a template Canvas you can use to see how to visualize:

  • Static data (GeoDataFrame, DataFrame, etc.)
  • Tiled data for any dataset too large to serve as a single file
Download this canvas to edit it yourself

You can download this canvas and then import it by drag & dropping the .zip file in your Workbench.