Layer Functions

The Map SDK provides a variety of layer functions, allowing you to add, remove, and configure the visibility of layers on your map.


Add Layer

Add a new layer to the map.

To learn about configuring a specific layer programmatically, visit the Map and Layer Format documentation.

📘

Note:

The dataset specified in dataId must be added to the map prior to calling addLayer.

const unfoldedMap = new UnfoldedMap({
  mapUUID: 'MAP-UUID-GOES-HERE',
  embed: true,
});
unfoldedMap.addLayer({
  id: "my-points-layer",
  type: "point",
  config: {
    dataId: "data_1",
    columns: {
      lat: "point_lat",
      lng: "point_lng",
      altitude: "point_altitude"
    },
    label: "my point layer",
    isVisible: true,
    visConfig: {
      radius: 10,
      opacity: 0.8,
      colorRange: {
        name: "Global Warming",
        type: "sequential",
        category: "Uber",
        colors: ["#5A1846", "#900C3F", "#C70039", "#E3611C", "#F1920E", "#FFC300"]
      }
    }
  },
  visualChannels: {
    colorField: {
      name: "value",
      type: "real"
    },
    colorScale: "quantile"
  }
});
from unfolded.map_sdk import UnfoldedMap
dataset_id = 'data_1'
unfolded_map = UnfoldedMap(mapUUID='MAP-UUID-GOES-HERE')
unfolded_map.add_dataset(dataset_id)
unfolded_map.add_layer({
  "id": "layer_1",
  "type": "point",
  "config": {
    "dataId": dataset_id,
    "columns": {
      "lat": "point_lat",
      "lng": "point_lng",
      "altitude": "point_altitude"
    },
    "label": "my point layer",
    "isVisible": true,
    "visConfig": {
      "radius": 10,
      "opacity": 0.8,
      "colorRange": {
        "name": "Global Warming",
        "type": "sequential",
        "category": "Uber",
        "colors": ["#5A1846", "#900C3F", "#C70039", "#E3611C", "#F1920E", "#FFC300"]
      }
    }
  },
  "visualChannels": {
    "colorField": {
      "name": "value",
      "type": "real"
    },
    "colorScale": "quantile"
  }
})

addLayer reference


Get Layers

Returns the label, id, and isVisible for each layer available on the map.

unfoldedMap.getLayers().then(layers => {
  layers.forEach(layer => {
    console.log(layer);
  });
});
layers = unfolded_map.get_layers()
# Then, in another cell you can call:
layers.result()

getLayer reference

Set Layer Visibility

Shows or hides the layer for the provided layer ID. Simply pass the layerId (which can be retrieved from getLayers and set the isVisible boolean.

const unfoldedMap = new UnfoldedMap({
  mapUUID: 'MAP-UUID-GOES-HERE',
  embed: true,
});
unfoldedMap.setLayerVisibility('layer-id', true);
unfolded_map.set_layer_visibility(layer_id='layer-id', is_visible=True)

setLayerVisibility reference


Remove Layer

Removes a layer from the map.

const unfoldedMap = new UnfoldedMap({
  mapUUID: 'MAP-UUID-GOES-HERE',
  embed: true,
});
unfoldedMap.removeLayer('my-layer')
unfolded_map.remove_layer('my-layer')

removeLayer reference


Did this page help you?