Map Functions
Using the Unfolded Map SDK, you can configure the visualization configuration of maps, then embed them into a webpage or notebook.
For a full description of a function and its parameters, please follow the link to the full Map SDK reference.
Create Map
Creates a new UnfoldedMap instance. Calling this embeds an Unfolded Map in your web page or Jupyter notebook.
Below is an simple usage of UnfoldedMap, calling an an existing map by its UUID. The UUID can be retrieved from the Data SDK's list_maps() function or from the URL of the map on Unfolded Studio. This will load and embed the UnfoldedMap in the webpage.
const unfoldedMap = new UnfoldedMap({
mapUUID: 'MAP-UUID-GOES-HERE',
embed: true
});
from unfolded.map_sdk import UnfoldedMap
unfolded_map = UnfoldedMap(
mapUUID='MAP-UUID-GOES-HERE'
)
unfolded_map
If no UUID is provided, a new local map is created. Neither the map nor its data will be uploaded to the Unfolded cloud—all data stays in your local browser.
const unfoldedMap = new UnfoldedMap()
from unfolded.map_sdk import UnfoldedMap
unfolded_map = UnfoldedMap()
unfolded_map
In both instances, the returned object can be used to programmatically control the embedded map.
HTML Unfolded Map
Creates a static version of Unfolded Studio. This is intended to be used inside Databricks notebooks since they do not support full Jupyter Widgets.
In the below example, a new HTMLUnfoldedMap is created with a earthquake dataset.
from unfolded.map_sdk import HTMLUnfoldedMap
import pandas as pd
data_url = 'https://raw.githubusercontent.com/UnfoldedInc/examples/master/notebooks/data/earthquakes.csv'
earthquakes_df = pd.read_csv(data_url)
HTMLUnfoldedMap(
datasets=[
{
'label': 'Earthquakes',
'data': earthquakes_df,
}
]
)
You can also define a layer specification for each dataset:
import pandas as pd
from unfolded.map_sdk import HTMLUnfoldedMap
from unfolded.map_sdk.models import Dataset, LayerSpec, LayerConfig
data_url = 'https://raw.githubusercontent.com/UnfoldedInc/examples/master/notebooks/data/earthquakes.csv'
earthquakes_df = pd.read_csv(data_url)
dataset = Dataset(
label='Earthquakes',
data=earthquakes_df
)
layer = LayerSpec(
id = 'earthquake_points',
type = 'point',
config = LayerConfig(
data_id = dataset.uuid,
label = 'Earthquakes',
columns = {'lat': 'Latitude','lng': 'Longitude'},
is_visible = True,
color_field = {'name': 'Magnitude','type': 'real'}
)
)
HTMLUnfoldedMap(
datasets = [dataset],
layers = [layer],
height=500
)
For more information and examples, please visit the full Map SDK reference.
Get Map URL
Gets the url for a map created and published in Unfolded Studio.
var mapUrl = UnfoldedMapSDK.getMapUrl('MAP-UUID-GOES-HERE');
console.log(mapUrl);
// OUTPUT: 'https://studio.unfolded.ai/public/mapUUID'
from unfolded.map_sdk import UnfoldedMap
map_url = UnfoldedMap.get_map_url('MAP-UUID-GOES-HERE')
Get Map Configuration
Returns the map configuration object that contains mapState, mapStyle, and visState object properties. To ensure a return, only use getMapConfig after the map successfully loads.
getMapConfig can be used to store a configuration, then reload it using setMapConfig.
unfoldedMap.getMapConfig().then(mapConfig => {
console.log(mapConfig);
});
mapConfig = unfolded_map.get_map_config()
# Then, in another cell you can call:
mapConfig.result()
Set Map Configuration
Sets the map configuration, including the mapState, mapStyle, and visState object properties. You can use the version tag to assign a version of your map.
const unfoldedMap = new UnfoldedMap({
mapUUID: 'MAP-UUID-GOES-HERE'
});
unfoldedMap.setMapConfig({
version: 'v1',
config: {
mapState: {...},
mapStyle: {...},
visState: {...}
}
});
from unfolded.map_sdk import UnfoldedMap
unfolded_map = UnfoldedMap(mapUUID='MAP-UUID-GOES-HERE')
unfolded_map.set_map_config({
'version': 'v1',
'config': {
'mapState': {...},
'mapStyle': {...},
'visState': {...}
}
})
Set View State
Positions the map view at a location specified by coordinates with a defined zoom level.
const unfoldedMap = new UnfoldedMap({
mapUUID: 'MAP-UUID-GOES-HERE',
embed: true,
});
unfoldedMap.setViewState({
longitude: -74.006058,
latitude: 40.712772,
zoom: 10
});
unfolded_map.set_view_state({
'latitude': 36.4140,
'longitude':-113.7008,
'zoom': 15
})
Set Split Mode
Sets the map split mode. Allows the user to pass layer id's to set layer visibility per split view.
There are three split modes:
singlemode, which is the default view containing a single page.dualmode provides the user with a side-by-side comparison of the same map area.swipemode gives the user a slider to compare different data layers by swiping a seperator.
const unfoldedMap = new UnfoldedMap({
mapUUID: 'MAP-UUID-GOES-HERE',
embed: true,
});
unfoldedMap.setSplitMode('dual', [['layer_id_1'], ['layer_id_2', 'layer_id_3']]);
unfolded_map.set_split_mode('dual', [['layer_id_1'], ['layer_id_2', 'layer_id_3']])
Set Theme
Changes the Unfolded Studio theme to dark or light based on passed parameter.
You may also change any theme options available in your theme preset. This example changes the theme to light and the backgroundColor to red:
const unfoldedMap = new UnfoldedMap({
mapUUID: 'MAP-UUID-GOES-HERE',
embed: true,
});
unfoldedMap.setTheme('light', {backgroundColor: 'red'});
unfolded_map.set_theme(theme: 'light', {background_color: '#FF0000'})
Set Map Control Visibility
Controls the visibility of map controls, such as the map legend.
Note:
This function is not yet available in the Python SDK.
You can control the following map control visibility with the Map SDK through a configuration object. This object contains a panelID with an isVisible boolean.
Map Control | ID |
|---|---|
Legend |
|
2D / 3D View Control |
|
Split Map Control |
|
Map Draw Control |
|
const unfoldedMap = new UnfoldedMap({
mapUUID: 'MAP-UUID-GOES-HERE',
embed: true,
appendToDocument: true
});
const config = {
panelId: 'mapLegend',
isVisible: false
};
unfoldedMap.setMapControlVisibility(config);
Not yet supported. Coming soon.
Updated about 1 month ago