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/7848ea5/community/milind/map_utils/")

    # Widgets give greater control over the layout of the map widgets
    widgets = {
      "controls": "bottom-right",
      "scale": "bottom-left",
      "basemap": "bottom-right",
      "layers": {"position": "top-right", "expanded":True},
      "legend": False,
      "geocoder": "top-left",
    }
    

    config = {
        "style": {
            "filled": True,
            "stroked": True,
            "opacity": 0.9,
            "lineColor": [100, 100, 100],
            "lineWidth": 2,
            "fillColor": {
                "type": "continuous",
                "attr": "growth",
                "domain": [-1, 1],
                "palette": "ArmyRose",
                "steps": 7
            }
        },
        "tooltip": ["valuePerSqm", "growth"]
    }
    
    return map_utils.deckgl_layers(
        layers = [{
            "type": "vector",
            "data": data,
            "config": config,
            "name": "Vancouver Price Increase"
        }], 
        widgets=widgets
    )

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 sidebar="show" in the Map UDFs to build faster​

In the Map UDF code using the map_utils library set sidebar="show" or sidebar="hide" to show or hide the sidebar for debugging.

You can then copy the generated config from the config panel, paste it into your Map UDF, and set sidebar=None 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.