Anymap-ts

https://ts.anymap.dev
Admin
A Python package for creating interactive maps with anywidget and TypeScript, enabling interactive...
Tokens:292,812
Snippets:1,291
Trust Score:4.6
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install Anymap TS from Source

Source: https://ts.anymap.dev/installation

Installs the anymap-ts library directly from its GitHub repository. This is useful for installing the latest development version or contributing to the project.

```bash
pip install git+https://github.com/opengeos/anymap-ts
```

--------------------------------

### Development Installation of Anymap TS

Source: https://ts.anymap.dev/installation

Sets up the anymap-ts library for development. This involves cloning the repository and installing the package in editable mode with development dependencies.

```bash
git clone https://github.com/opengeos/anymap-ts.git
cd anymap-ts
pip install -e ".[dev]"
```

--------------------------------

### Set Camera Position and Target in Potree Viewer

Source: https://ts.anymap.dev/notebooks/potree/potree

Sets the initial position and target point for the camera within the Potree viewer. This allows users to define the starting viewpoint for exploring the point cloud data.

```python
# Set camera position
viewer.set_camera_position(0, 0, 100)
viewer.set_camera_target(0, 0, 0)
```

--------------------------------

### Install Anymap TS with Optional Dependencies

Source: https://ts.anymap.dev/installation

Installs anymap-ts with specific optional dependencies. Use '[vector]' for GeoDataFrame support, '[raster]' for local raster support, or '[all]' for all optional dependencies.

```bash
# For vector data support (GeoDataFrame)
pip install anymap-ts[vector]

# For local raster support (localtileserver)
pip install anymap-ts[raster]

# All optional dependencies
pip install anymap-ts[all]
```

--------------------------------

### Example Usage: Add Zarr Layer (Python)

Source: https://ts.anymap.dev/maplibre

Demonstrates how to use the `add_zarr_layer` method to add a Zarr layer to an AnyMap TS map. This example specifies the Zarr URL, variable, color limits, a custom colormap, and a selector for a specific month.

```python
from anymap_ts import Map
m = Map()
m.add_zarr_layer(
    "https://example.com/climate.zarr",
    variable="temperature",
    clim=(270, 310),
    colormap=['#0000ff', '#ffff00', '#ff0000'],
    selector={"month": 7}
)
```

--------------------------------

### Install anymap-ts with pip

Source: https://ts.anymap.dev/index_q=

This command installs the anymap-ts Python package using pip. Ensure you have pip installed and configured correctly.

```bash
pip install anymap-ts
```

--------------------------------

### Basic Point Cloud with MapLibre in Python

Source: https://ts.anymap.dev/notebooks/pointcloud_layer/pointcloud_layer

Generates sample 3D point cloud data with elevation-based coloring and adds it to a MapLibreMap. This example demonstrates basic point cloud visualization with custom data generation and layer configuration.

```python
import random
from anymap_ts import MapLibreMap


# Generate sample 3D point cloud data
def generate_points(center_lng, center_lat, num_points=1000, spread=0.01):
    points = []
    for _ in range(num_points):
        lng = center_lng + random.uniform(-spread, spread)
        lat = center_lat + random.uniform(-spread, spread)
        # Elevation based on distance from center (creates a dome shape)
        dist = ((lng - center_lng) ** 2 + (lat - center_lat) ** 2) ** 0.5
        elevation = max(0, 500 - dist * 50000) + random.uniform(0, 50)
        # Color by elevation (blue to red)
        color_ratio = min(elevation / 500, 1)
        color = [
            int(255 * color_ratio),
            int(100 * (1 - color_ratio)),
            int(255 * (1 - color_ratio)),
            255,
        ]
        points.append({"position": [lng, lat, elevation], "color": color})
    return points


# Generate points around San Francisco
point_cloud = generate_points(-122.4194, 37.7749)

m = MapLibreMap(center=[-122.4194, 37.7749], zoom=14, pitch=60)
m.add_basemap("CartoDB.DarkMatter")
m.add_point_cloud_layer(
    data=point_cloud,
    name="pointcloud-demo",
    get_position="position",
    get_color="color",
    point_size=3,
    opacity=0.9,
)
m
```

--------------------------------

### Point Cloud with Uniform Color in Python

Source: https://ts.anymap.dev/notebooks/pointcloud_layer/pointcloud_layer

Creates a simple point cloud with a uniform color using MapLibreMap. This example demonstrates how to apply a single color to all points in the layer and adjust point size for visibility.

```python
# Simple point cloud with uniform color
simple_points = [
    {"position": [lng, lat, alt]}
    for lng in [-122.42, -122.41, -122.40, -122.39]
    for lat in [37.77, 37.78, 37.79, 37.80]
    for alt in [0, 100, 200, 300]
]

m3 = MapLibreMap(center=[-122.405, 37.785], zoom=13, pitch=60)
m3.add_basemap("CartoDB.Positron")
m3.add_point_cloud_layer(
    data=simple_points,
    name="grid-points",
    get_position="position",
    get_color=[0, 200, 255, 200],  # Uniform cyan color
    point_size=8,
)
m3
```

--------------------------------

### Combine Point Clouds and Arc Layers

Source: https://ts.anymap.dev/notebooks/pointcloud_layer

This example demonstrates combining multiple point cloud layers with arc layers on a MapLibreMap. It generates point clouds at specified locations, assigns them different colors, and then draws arcs connecting these locations with distinct source and target colors. A layer control is also added.

```python
# Combine arc and point cloud layers
m5 = MapLibreMap(center=[-122.4, 37.78], zoom=11, pitch=50)
m5.add_basemap("CartoDB.DarkMatter")

# Add point clouds at locations
locations = [
    (-122.45, 37.80),  # Golden Gate
    (-122.40, 37.78),  # Downtown
    (-122.35, 37.75),  # East Bay
]

for i, (lng, lat) in enumerate(locations):
    cloud = generate_points(lng, lat, num_points=200, spread=0.003)
    for p in cloud:
        p["color"] = [100 + 50 * i, 200 - 50 * i, 150, 200]
    m5.add_point_cloud_layer(
        data=cloud,
        name=f"pointcloud-loc{i}",
        get_position="position",
        get_color="color",
        point_size=3,
    )

# Add arcs connecting the locations
arcs = [
    {"source": list(locations[0]), "target": list(locations[1])},
    {"source": list(locations[1]), "target": list(locations[2])},
    {"source": list(locations[0]), "target": list(locations[2])},
]

m5.add_arc_layer(
    data=arcs,
    name="arc-connections",
    get_source_color=[0, 255, 200, 255],
    get_target_color=[255, 200, 0, 255],
    get_width=2,
)

m5.add_layer_control()
m5
```

--------------------------------

### Initialize MapLibreMap Widget (Python)

Source: https://ts.anymap.dev/maplibre

Demonstrates how to initialize a MapLibreMap widget with specified center and zoom level. This is the basic setup for creating an interactive map.

```python
from anymap_ts import Map
m = Map(center=[-122.4, 37.8], zoom=10)
m.add_basemap("OpenStreetMap")
m
```

--------------------------------

### Point Cloud with DeckGLMap in Python

Source: https://ts.anymap.dev/notebooks/pointcloud_layer/pointcloud_layer

Visualizes a larger point cloud dataset using DeckGLMap. This example showcases adding a point cloud layer with specified size units and opacity, suitable for more detailed 3D visualizations.

```python
from anymap_ts import DeckGLMap

# Generate larger point cloud
large_cloud = generate_points(-122.4194, 37.7749, num_points=5000, spread=0.02)

m2 = DeckGLMap(center=[-122.4194, 37.7749], zoom=13, pitch=50, bearing=30)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_point_cloud_layer(
    data=large_cloud,
    name="large-cloud",
    get_position="position",
    get_color="color",
    point_size=2,
    size_units="pixels",
    opacity=0.8,
)
m2
```

--------------------------------

### Get Configuration API

Source: https://ts.anymap.dev/keplergl

Retrieves the current configuration of the KeplerGL visualization.

```APIDOC
## GET /websites/ts_anymap_dev/get_config

### Description
Fetches the current configuration settings of the KeplerGL map.

### Method
GET

### Endpoint
/websites/ts_anymap_dev/get_config

### Parameters
None

### Response
#### Success Response (200)
- **config** (Dict) - The current configuration dictionary of the KeplerGL map.

#### Response Example
```json
{
  "config": {
    "version": "v1",
    "config": {
      "visState": {},
      "mapState": {},
      "mapStyle": {}
    }
  }
}
```
```

--------------------------------

### Initialize Potree Viewer with Anymap-TS

Source: https://ts.anymap.dev/notebooks/potree/potree

Initializes the PotreeViewer with specified parameters such as point budget, point size, background color, and EDL settings. This is the first step to setting up the point cloud visualization environment.

```python
from anymap_ts import PotreeViewer

# Create a Potree viewer
viewer = PotreeViewer(
    point_budget=1000000, point_size=1.0, background="#1a1a2e", edl_enabled=True
)
viewer
```

--------------------------------

### Fly to Location on OpenLayers Map

Source: https://ts.anymap.dev/notebooks/openlayers

Animates the map view to smoothly transition to a specified location and zoom level. This enhances user experience by guiding attention to particular areas of interest.

```python
# Fly to location
m.fly_to(-122.4194, 37.7749, zoom=14)
```

--------------------------------

### Get Default KeplerGL HTML Template

Source: https://ts.anymap.dev/keplergl

Provides a basic HTML structure for embedding KeplerGL visualizations. This default template includes minimal styling and a placeholder message indicating that a full React setup is required for interactive use, suggesting the Jupyter widget as an alternative.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>KeplerGL Map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; }
        #app { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    <div id="app"></div>
    <script>
        const state = {{state}};
        // KeplerGL requires React/Redux setup - simplified placeholder
        document.getElementById('app').innerHTML = '<p>KeplerGL visualization requires full React setup. Use Jupyter widget for interactive visualization.</p>';
    </script>
</body>
</html>
```

--------------------------------

### Initialize KeplerGLMap and Add Data (Python)

Source: https://ts.anymap.dev/keplergl

Demonstrates how to create an instance of KeplerGLMap and add a Pandas DataFrame as a data layer. This involves importing necessary libraries, creating a DataFrame, and using the `add_data` method. The map is then displayed.

```python
from anymap_ts import KeplerGLMap
import pandas as pd

m = KeplerGLMap()
df = pd.DataFrame({
    'lat': [37.7749, 37.8044],
    'lng': [-122.4194, -122.2712],
    'value': [100, 200]
})
m.add_data(df, name='points')
m
```

--------------------------------

### Initialize Potree Viewer in Python

Source: https://ts.anymap.dev/typescript/examples/potree

Demonstrates how to initialize and configure the PotreeViewer in Python. It allows setting parameters like point budget, point size, background color, and EDL (Eye-Dome Lighting) settings. Camera position and annotations can also be set during initialization.

```python
from anymap_ts import PotreeViewer

viewer = PotreeViewer(
    point_budget=1000000,
    point_size=1.0,
    background="#1a1a2e",
    edl_enabled=True
)

# Adjust settings
viewer.set_point_budget(2000000)
viewer.set_point_size(1.5)
viewer.set_edl(enabled=True, radius=1.8, strength=0.5)

# Set camera
viewer.set_camera_position(0, 0, 100)
viewer.set_camera_target(0, 0, 0)

# Add annotation
viewer.add_annotation(position=(10, 20, 30), title="Point of Interest", description="Important location")

viewer
```

--------------------------------

### Initialize and Load Potree Point Cloud (Python)

Source: https://ts.anymap.dev/examples/potree

This snippet demonstrates how to initialize a Potree viewer with a specified point budget and EDL (Eye-Dome Lighting) enabled. It then loads a point cloud dataset from a given path and assigns it a name. The point size can also be adjusted.

```python
viewer = PotreeViewer(point_budget=1000000, edl_enabled=True)
viewer.load_point_cloud("path/to/cloud.js", name="lidar_data")
viewer.set_point_size(1.5)
```

--------------------------------

### Install Local Project Dependencies

Source: https://ts.anymap.dev/contributing_q=

Installs the local copy of anymap-ts into a virtual environment. This command installs development dependencies for both Python and Node.js.

```shell
cd anymap-ts
pip install -e ".[dev]"
npm install --legacy-peer-deps
```

--------------------------------

### Initialize Potree Viewer (Python)

Source: https://ts.anymap.dev/potree_q=

Initializes a Potree viewer widget with customizable parameters for width, height, point budget, point size, field of view, background color, and Eye Dome Lighting (EDL). It inherits from a base class and sets up internal storage for point clouds.

```python
def __init__(
    self,
    width: str = "100%",
    height: str = "600px",
    point_budget: int = 1000000,
    point_size: float = 1.0,
    fov: float = 60.0,
    background: str = "#000000",
    edl_enabled: bool = True,
    **kwargs,
):
    """Initialize a Potree viewer.

    Args:
        width: Widget width as CSS string.
        height: Widget height as CSS string.
        point_budget: Maximum number of points to render.
        point_size: Default point size.
        fov: Field of view in degrees.
        background: Background color (hex string).
        edl_enabled: Enable Eye Dome Lighting.
        **kwargs: Additional widget arguments.
    """
    # Potree doesn't use center/zoom like maps
    super().__init__(
        center=[0, 0],
        zoom=1,
        width=width,
        height=height,
        point_budget=point_budget,
        point_size=point_size,
        fov=fov,
        background=background,
        edl_enabled=edl_enabled,
        **kwargs,
    )
    self.point_clouds = {}

```

--------------------------------

### Initialize OpenLayersMap Widget

Source: https://ts.anymap.dev/openlayers

Demonstrates how to initialize an OpenLayersMap widget with specified center, zoom, and dimensions. It also shows adding a basemap and a WMS layer.

```python
from anymap_ts import OpenLayersMap
m = OpenLayersMap(center=[-122.4, 37.8], zoom=10)
m.add_basemap("OpenStreetMap")
m.add_wms_layer(
    url="https://example.com/wms",
    layers="layer_name",
    name="WMS Layer"
)
m
```

--------------------------------

### Potree Viewer Initialization

Source: https://ts.anymap.dev/potree_q=

Initializes a Potree viewer with customizable parameters for width, height, point budget, point size, field of view, background color, and Eye Dome Lighting.

```APIDOC
## Potree Viewer Initialization

### Description
Initializes a Potree viewer with customizable parameters for width, height, point budget, point size, field of view, background color, and Eye Dome Lighting.

### Method
`__init__`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **width** (str) - Optional - Widget width as CSS string. Default: '100%'
- **height** (str) - Optional - Widget height as CSS string. Default: '600px'
- **point_budget** (int) - Optional - Maximum number of points to render. Default: 1000000
- **point_size** (float) - Optional - Default point size. Default: 1.0
- **fov** (float) - Optional - Field of view in degrees. Default: 60.0
- **background** (str) - Optional - Background color (hex string). Default: '#000000'
- **edl_enabled** (bool) - Optional - Enable Eye Dome Lighting. Default: True
- **kwargs** - Optional - Additional widget arguments.

### Request Example
```python
viewer = PotreeViewer(
    width='800px',
    height='700px',
    point_budget=500000,
    point_size=1.5,
    fov=75.0,
    background='#FFFFFF',
    edl_enabled=False
)
```

### Response
#### Success Response (200)
None (initialization)

#### Response Example
None
```

--------------------------------

### Install Stable Release of Anymap TS using Conda

Source: https://ts.anymap.dev/installation

Installs the latest stable version of the anymap-ts library from the conda-forge channel. This method is suitable for users who manage their Python environments with Conda.

```bash
conda install -c conda-forge anymap-ts
```

--------------------------------

### GeoJSON Data Format Example

Source: https://ts.anymap.dev/typescript/examples/keplergl

This JavaScript code provides an example of GeoJSON data structure for KeplerGL. It defines a 'FeatureCollection' containing a 'Feature' with a 'Polygon' geometry and associated properties, illustrating how to represent geographical shapes and their attributes.

```javascript
const geojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [[[-122.5, 37.7], [-122.3, 37.7], [-122.3, 37.9], [-122.5, 37.9], [-122.5, 37.7]]],
      },
      properties: { name: 'Area' },
    },
  ],
};

```

--------------------------------

### DataFrame-like Data Format Example

Source: https://ts.anymap.dev/typescript/examples/keplergl

This example shows a JavaScript object representing data in a DataFrame-like format, suitable for use with KeplerGL. It includes arrays for 'latitude', 'longitude', 'value', and 'category', demonstrating how to structure tabular data for visualization.

```javascript
const data = {
  latitude: [37.7749, 37.8044, 37.3382],
  longitude: [-122.4194, -122.2712, -122.0308],
  value: [100, 80, 60],
  category: ['A', 'B', 'A'],
};

```

--------------------------------

### Load Point Cloud Data for Potree Viewer

Source: https://ts.anymap.dev/notebooks/potree/potree

Loads a Potree-formatted point cloud dataset into the viewer. Users need to provide the correct URL to their 'cloud.js' file. Options include setting point size type and shape.

```python
# Load a point cloud (replace with your Potree-formatted dataset URL)
# viewer.load_point_cloud(
#     url="path/to/pointcloud/cloud.js",
#     name="lidar_data",
#     point_size_type="adaptive",
#     shape="circle"
# )
```

--------------------------------

### Initialize PotreeViewer Widget

Source: https://ts.anymap.dev/potree

Initializes an instance of the PotreeViewer widget. This widget is used for rendering point clouds. It accepts various parameters to control the viewer's appearance and performance, such as dimensions, point budget, field of view, and background color.

```python
from anymap_ts import PotreeViewer

viewer = PotreeViewer(
    width="100%",
    height="600px",
    point_budget=1000000,
    point_size=1.0,
    fov=60.0,
    background="#000000",
    edl_enabled=True
)
```

--------------------------------

### Arc Layer with Great Circle Routing

Source: https://ts.anymap.dev/notebooks/arc_layer/arc_layer

This example demonstrates using the ArcLayer with `great_circle=True` to visualize international flight paths along their shortest routes on a sphere. It configures distinct source and target colors, line width, and height for the arcs.

```python
# International flights using great circle paths
international_flights = [
    {
        "source": [-122.4194, 37.7749],
        "target": [139.6917, 35.6895],
        "name": "SF to Tokyo",
    },
    {
        "source": [-122.4194, 37.7749],
        "target": [-0.1276, 51.5074],
        "name": "SF to London",
    },
    {
        "source": [-122.4194, 37.7749],
        "target": [2.3522, 48.8566],
        "name": "SF to Paris",
    },
    {
        "source": [-122.4194, 37.7749],
        "target": [151.2093, -33.8688],
        "name": "SF to Sydney",
    },
]

m2 = MapLibreMap(center=[-122.4, 20], zoom=1, pitch=20)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_arc_layer(
    data=international_flights,
    name="international",
    get_source_color=[255, 215, 0, 255],
    get_target_color=[255, 69, 0, 255],
    get_width=3,
    great_circle=True,
    get_height=1,
)
m2
```

--------------------------------

### Point Cloud with Layer Control in Python

Source: https://ts.anymap.dev/notebooks/pointcloud_layer/pointcloud_layer

Adds two distinct point cloud layers with different themes to a MapLibreMap. This example illustrates how to manage multiple point cloud layers, each with its own color scheme and data, on the same map.

```python
# Generate two point clouds
cloud1 = generate_points(-122.43, 37.78, num_points=500, spread=0.005)
cloud2 = generate_points(-122.40, 37.77, num_points=500, spread=0.005)

m4 = MapLibreMap(center=[-122.415, 37.775], zoom=13, pitch=45)
m4.add_basemap("CartoDB.DarkMatter")

# Add first point cloud (blue theme)
for p in cloud1:
    p["color"] = [100, 150, 255, 200]

m4.add_point_cloud_layer(
    data=cloud1,
    name="pointcloud-north",
    get_position="position",
    get_color="color",
    point_size=4,
)

# Add second point cloud (orange theme)
for p in cloud2:
    p["color"] = [255, 150, 100, 200] # Example: Orange theme

m4.add_point_cloud_layer(
    data=cloud2,
    name="pointcloud-south",
    get_position="position",
    get_color="color",
    point_size=4,
)
m4
```

--------------------------------

### Export Potree Viewer to HTML

Source: https://ts.anymap.dev/notebooks/potree/potree

Exports the current Potree viewer configuration and loaded data into a standalone HTML file. This allows for easy sharing and viewing of the point cloud visualization in a web browser.

```python
# Export to HTML
viewer.to_html("potree_example.html")
```

--------------------------------

### Initialize KeplerGL Map (Python)

Source: https://ts.anymap.dev/keplergl

Initializes a KeplerGL map widget with specified center, zoom, dimensions, and configuration options. It handles Mapbox token retrieval from environment variables if not provided directly. Dependencies include the `os` module.

```python
def __init__(
    self,
    center: Tuple[float, float] = (-122.4, 37.8),
    zoom: float = 10.0,
    width: str = "100%",
    height: str = "600px",
    config: Optional[Dict] = None,
    read_only: bool = False,
    show_data_table: bool = True,
    mapbox_token: Optional[str] = None,
    **kwargs,
):
    """Initialize a KeplerGL map.

    Args:
        center: Map center as (longitude, latitude).
        zoom: Initial zoom level.
        width: Widget width as CSS string.
        height: Widget height as CSS string.
        config: KeplerGL configuration dict.
        read_only: Whether the UI is read-only.
        show_data_table: Whether to show the data table panel.
        mapbox_token: Mapbox access token for basemaps.
        **kwargs: Additional widget arguments.
    """
    import os

    if mapbox_token is None:
        mapbox_token = os.environ.get("MAPBOX_TOKEN", "")

    super().__init__(
        center=list(center),
        zoom=zoom,
        width=width,
        height=height,
        config=config or {},
        read_only=read_only,
        show_data_table=show_data_table,
        mapbox_token=mapbox_token,
        **kwargs,
    )
    self.datasets = {}

```

--------------------------------

### Initialize Potree Viewer in TypeScript

Source: https://ts.anymap.dev/typescript/examples/potree

Shows how to initialize the Potree viewer dynamically in TypeScript, loading Potree core from a CDN. It covers setting up the viewer instance, configuring visual properties like point budget, background, and EDL, and setting the initial camera view.

```typescript
const POTREE_VERSION = '1.8.2';
const POTREE_BASE_URL = `https://unpkg.com/potree-core@${POTREE_VERSION}/build`;

class PotreeWidget {
  private viewer: any = null;
  private pointClouds: Map<string, any> = new Map();
  private annotations: Map<string, any> = new Map();

  async initialize(): Promise<void> {
    await loadPotree();

    const Potree = window.Potree;

    // Create viewer
    this.viewer = new Potree.Viewer(this.container);

    // Configure settings
    this.viewer.setPointBudget(this.model.get('point_budget') || 1000000);
    this.viewer.setBackground(this.model.get('background') || '#1a1a2e');
    this.viewer.setEDLEnabled(this.model.get('edl_enabled') !== false);

    // Set initial camera position
    const position = this.model.get('camera_position') || [0, 0, 100];
    const target = this.model.get('camera_target') || [0, 0, 0];
    this.viewer.scene.view.position.set(...position);
    this.viewer.scene.view.lookAt(new Potree.Vector3(...target));
  }
}
```

--------------------------------

### Add WMS Layer to OpenLayers Map (Commented Out)

Source: https://ts.anymap.dev/notebooks/openlayers

Provides a commented-out example for adding a Web Map Service (WMS) layer to the OpenLayers map. This functionality is useful for integrating external map services, but requires a valid WMS URL and layer name.

```python
# Add WMS layer (example - replace with actual WMS service)
# m.add_wms_layer(
#     url="https://example.com/wms",
#     layers="layer_name",
#     name="WMS Layer"
# )
```

--------------------------------

### Add Ocean Temperature Zarr Layer (v3) with Python

Source: https://ts.anymap.dev/notebooks/zarr_layer

Adds a Zarr layer for ocean temperature data using the Zarr v3 format and EPSG:3857 projection. This example configures the layer with specific colormap, opacity, and a time selector. It requires the 'anymap_ts' library.

```python
from anymap_ts import Map

# Ocean temperature (v3 pyramid, EPSG:3857)
OCEAN_URL = "https://atlantis-vis-o.s3-ext.jc.rl.ac.uk/noc-npd-era5-demo/npd-eorca1-era5v1/gn/T1y/tos_con"

m2 = Map(center=[0, 30], zoom=2, style="dark-matter")

m2.add_zarr_layer(
    url=OCEAN_URL,
    variable="tos_con",
    name="ocean-temp",
    clim=(0, 50),
    colormap=[
        "#000004",
        "#1b0c41",
        "#4a0c6b",
        "#781c6d",
        "#a52c60",
        "#cf4446",
        "#ed6925",
        "#fb9b06",
        "#f7d13d",
        "#fcffa4",
    ],  # Inferno
    opacity=0.9,
    selector={"time": 0},
)

m2
```

--------------------------------

### Load Configuration API

Source: https://ts.anymap.dev/keplergl

Loads a KeplerGL configuration from a specified JSON file path.

```APIDOC
## POST /websites/ts_anymap_dev/load_config

### Description
Loads a KeplerGL visualization configuration from a JSON file.

### Method
POST

### Endpoint
/websites/ts_anymap_dev/load_config

### Parameters
#### Request Body
- **filepath** (str) - Required - The path to the JSON configuration file.

### Request Example
```json
{
  "filepath": "/path/to/your/config.json"
}
```

### Response
#### Success Response (200)
- **status** (str) - Indicates success.

#### Response Example
```json
{
  "status": "Configuration loaded successfully"
}
```
```

--------------------------------

### Example Usage of add_arc_layer (Python)

Source: https://ts.anymap.dev/mapbox

This example demonstrates how to use the add_arc_layer function to visualize flight paths on a map. It initializes a MapboxMap object, defines a list of arc data with source and target coordinates, and then calls add_arc_layer to render these arcs on the map with a specified layer name.

```python
from anymap_ts import MapboxMap
m = MapboxMap()
arcs = [
    {"source": [-122.4, 37.8], "target": [-73.9, 40.7]},
    {"source": [-122.4, 37.8], "target": [-0.1, 51.5]},
]
m.add_arc_layer(arcs, name="flights")

```

--------------------------------

### PotreeViewer Initialization

Source: https://ts.anymap.dev/potree_q=

Initializes the PotreeViewer widget with specified dimensions and rendering options.

```APIDOC
## PotreeViewer Initialization

### Description
Initializes the PotreeViewer widget with specified dimensions and rendering options.

### Method
`__init__`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **width** (str) - Optional - Widget width as CSS string.
- **height** (str) - Optional - Widget height as CSS string.
- **point_budget** (int) - Optional - Maximum number of points to render.
- **point_size** (float) - Optional - Default point size.
- **fov** (float) - Optional - Field of view in degrees.
- **background** (str) - Optional - Background color (hex string).
- **edl_enabled** (bool) - Optional - Enable Eye Dome Lighting.

### Request Example
```python
from anymap_ts import PotreeViewer
viewer = PotreeViewer(width='800px', height='700px', point_size=1.5)
```

### Response
#### Success Response (200)
None (initializes the widget)

#### Response Example
None
```

--------------------------------

### Initialize Potree Viewer for Point Clouds with AnyMap TS

Source: https://ts.anymap.dev/usage

Sets up a Potree viewer using AnyMap TS for visualizing point cloud data. It allows configuration of the point budget and enables Edge-Light Illumination (EDL). The example shows how to load a point cloud from a specified path and assign it a name.

```python
from anymap_ts import PotreeViewer

viewer = PotreeViewer(
    point_budget=1000000,
    edl_enabled=True
)
viewer.load_point_cloud("path/to/pointcloud/cloud.js", name="lidar")
viewer
```

--------------------------------

### Example Usage: Add Arc Layer to MapLibre Map (Python)

Source: https://ts.anymap.dev/maplibre

This example demonstrates the practical usage of the `add_arc_layer` method. It initializes a `MapLibreMap` object and defines a list of arc data, each with 'source' and 'target' coordinates. The `add_arc_layer` method is then called with this data and a layer name, visualizing these arcs on the map.

```python
from anymap_ts import MapLibreMap
m = MapLibreMap()
arcs = [
    {"source": [-122.4, 37.8], "target": [-73.9, 40.7]},
    {"source": [-122.4, 37.8], "target": [-0.1, 51.5]},
]
m.add_arc_layer(arcs, name="flights")
```

--------------------------------

### MapboxMap Initialization and Configuration

Source: https://ts.anymap.dev/mapbox

This section details the initialization of the MapboxMap widget, including parameters for center, zoom, dimensions, style, bearing, pitch, and access token. It also covers adding default controls.

```APIDOC
## MapboxMap

### Description
Interactive map widget using Mapbox GL JS. This class provides a Python interface to Mapbox GL JS maps with full bidirectional communication through anywidget.

Note: Requires a Mapbox access token. Set via MAPBOX_TOKEN environment variable or pass directly to the constructor.

### Method
`__init__`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **center** (Tuple[float, float]) - Optional - Map center as (longitude, latitude).
- **zoom** (float) - Optional - Initial zoom level.
- **width** (str) - Optional - Map width as CSS string.
- **height** (str) - Optional - Map height as CSS string.
- **style** (str) - Optional - Mapbox style URL (e.g., "mapbox://styles/mapbox/streets-v12").
- **bearing** (float) - Optional - Map bearing in degrees.
- **pitch** (float) - Optional - Map pitch in degrees.
- **max_pitch** (float) - Optional - Maximum pitch angle in degrees (default: 85).
- **access_token** (Optional[str]) - Optional - Mapbox access token. If None, reads from MAPBOX_TOKEN env var.
- **controls** (Optional[Dict[str, Any]]) - Optional - Dict of controls to add (e.g., {"navigation": True}).

### Request Example
```python
from anymap_ts import MapboxMap
m = MapboxMap(center=[-122.4, 37.8], zoom=10)
```

### Response
#### Success Response (200)
None (This is a widget initialization)

#### Response Example
None
```

--------------------------------

### Remove Zarr Layer

Source: https://ts.anymap.dev/notebooks/zarr_layer_q=

Removes a specified Zarr layer from the map.

```APIDOC
## DELETE /map/remove_zarr_layer

### Description
Removes a Zarr layer from the map using its name.

### Method
DELETE

### Endpoint
/map/remove_zarr_layer

### Parameters
#### Query Parameters
- **name** (str) - Required - The name of the Zarr layer to remove.

### Request Example
```json
{
  "name": "climate-prec"
}
```

### Response
#### Success Response (200)
- **status** (str) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "Layer 'climate-prec' removed successfully."
}
```
```

--------------------------------

### Initialize PotreeViewer in Python

Source: https://ts.anymap.dev/potree_q=

Initializes an instance of the PotreeViewer class, setting up the viewer with specified dimensions and rendering parameters. It inherits from MapWidget but does not use its center/zoom functionality.

```python
from anymap_ts import PotreeViewer

viewer = PotreeViewer(
    width="100%",
    height="600px",
    point_budget=1000000,
    point_size=1.0,
    fov=60.0,
    background="#000000",
    edl_enabled=True
)

# The viewer object is now ready to load point clouds
```

--------------------------------

### Python Example: DeckGL Map Initialization and Layer Addition

Source: https://ts.anymap.dev/typescript/examples/deckgl_q=

Demonstrates how to initialize a DeckGL map using the anymap_ts library in Python. It shows adding a basemap and then overlaying scatterplot and hexagon aggregation layers with sample data. This is useful for quickly visualizing data on a map.

```python
from anymap_ts import DeckGLMap
import random

# Create map with dark basemap
m = DeckGLMap(center=[-122.4, 37.8], zoom=10)
m.add_basemap("CartoDB.DarkMatter")

# Generate sample data
points = [
    {"coordinates": [-122.4 + random.uniform(-0.2, 0.2), 37.8 + random.uniform(-0.2, 0.2)], "value": random.randint(1, 100)}
    for _ in range(1000)
]

# Add scatterplot layer
m.add_scatterplot_layer(data=points, name="scatterplot", get_radius=100, get_fill_color=[255, 140, 0, 200])

# Add hexagon aggregation layer
m.add_hexagon_layer(data=points, name="hexagons", radius=500, elevation_scale=10, extruded=True)

m
```

--------------------------------

### Colormaps

Source: https://ts.anymap.dev/typescript/examples/zarr_layer

Provides examples of common colormaps available for Zarr layer visualization.

```APIDOC
## Colormaps

### Description
Predefined colormaps that can be used for visualizing Zarr layer data.

### Colormap Definitions
```javascript
const colormaps = {
  // Blues (precipitation)
  blues: ['#f7fbff', '#deebf7', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#08519c', '#08306b'],

  // RdYlBu (temperature)
  rdylbu: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'],

  // Inferno (general)
  inferno: ['#000004', '#1b0c41', '#4a0c6b', '#781c6d', '#a52c60', '#cf4446', '#ed6925', '#fb9b06', '#f7d13d', '#fcffa4'],
};
```
```

--------------------------------

### Rendering Settings

Source: https://ts.anymap.dev/potree

Functions to configure rendering parameters like point budget, point size, and Eye Dome Lighting.

```APIDOC
## POST /rendering/set_point_budget

### Description
Sets the maximum number of points to be rendered.

### Method
POST

### Endpoint
/rendering/set_point_budget

### Parameters
#### Request Body
- **budget** (int) - Required - Maximum number of points.

### Request Example
```json
{
  "budget": 1000000
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

#### Response Example
```json
{
  "status": "success"
}
```

## POST /rendering/set_point_size

### Description
Sets the default size for rendered points.

### Method
POST

### Endpoint
/rendering/set_point_size

### Parameters
#### Request Body
- **size** (float) - Required - The size of the points.

### Request Example
```json
{
  "size": 2.5
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

#### Response Example
```json
{
  "status": "success"
}
```

## POST /rendering/set_edl

### Description
Configures Eye Dome Lighting (EDL) for enhanced depth perception.

### Method
POST

### Endpoint
/rendering/set_edl

### Parameters
#### Request Body
- **enabled** (bool) - Optional - Whether to enable EDL. Defaults to true.
- **radius** (float) - Optional - The radius for EDL calculations. Defaults to 1.4.
- **strength** (float) - Optional - The strength of the EDL effect. Defaults to 0.4.

### Request Example
```json
{
  "enabled": true,
  "radius": 1.6,
  "strength": 0.5
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates success.

#### Response Example
```json
{
  "status": "success"
}
```
```

--------------------------------

### Save Drawn Data

Source: https://ts.anymap.dev/maplibre

Saves drawn features to a file in a specified format. Requires geopandas to be installed.

```APIDOC
## POST /api/draw_data/save

### Description
Saves drawn features to a file in a specified format. Requires geopandas to be installed.

### Method
POST

### Endpoint
/api/draw_data/save

### Parameters
#### Request Body
- **filepath** (string) - Required - Path to save file.
- **driver** (string) - Optional - Output driver (auto-detected from extension if not provided).

### Request Example
```json
{
  "filepath": "/path/to/save/features.geojson",
  "driver": "GeoJSON"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Drawn features saved successfully."
}
```

#### Error Response (400)
- **error** (string) - Error message if geopandas is not installed or no features to save.

#### Error Response Example
```json
{
  "error": "geopandas is required to save draw data. Install with: pip install anymap-ts[vector]"
}
```
```
Tokens:
Raw