Documentation

Interactive Maps

The map components in Reflex Enterprise provide interactive mapping capabilities built on top of Leaflet, one of the most popular open-source JavaScript mapping libraries. These components enable you to create rich, interactive maps with markers, layers, controls, and event handling.

🌍 View Live Demo - See the map components in action with interactive examples.

Installation & Setup

Map components are included with reflex-enterprise. No additional installation is required.

Basic Usage

Here's a simple example of creating a map with a marker:

Core Components

Map Container

The rxe.map() component is the primary container that holds all other map elements:

rxe.map(
    # Child components (markers, layers, controls)
    id="my-map",
    center=rxe.map.latlng(lat=51.505, lng=-0.09),
    zoom=13,
    height="400px",
    width="100%",
)

Key Properties:

  • center: Initial map center coordinates
  • zoom: Initial zoom level (0-18+ depending on tile provider)
  • bounds: Alternative to center/zoom, fits map to bounds
  • height/width: Map container dimensions

Tile Layers

Tile layers provide the base map imagery. The most common is OpenStreetMap:

rxe.map.tile_layer(
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    attribution="© OpenStreetMap contributors",
)

Markers

Add point markers to specific locations:

Vector Layers

Draw shapes and areas on the map:

Interactive Features

Event Handling

Maps support comprehensive event handling for user interactions:

Last click: No clicks yet

Current zoom: 13

Map Controls

Add UI controls for enhanced user interaction:

Helper Functions

Coordinate Creation

# Create latitude/longitude coordinates
center = rxe.map.latlng(lat=51.505, lng=-0.09, nround=4)

# Create bounds
bounds = rxe.map.latlng_bounds(
    corner1_lat=51.49,
    corner1_lng=-0.11,
    corner2_lat=51.52,
    corner2_lng=-0.07,
)

Map API

The Map API provides programmatic control over your maps, allowing you to manipulate the map programmatically from your Reflex state methods.

Getting the API Reference

To access the Map API, you need to get a reference to your map using its ID:

map_api = rxe.map.api("my-map-id")

Interactive Demo

Here are some commonly used API methods demonstrated in action:

Current location: London

Common API Methods

View Control:

  • fly_to(latlng, zoom, options) - Smooth animated movement to location
  • set_view(latlng, zoom, options) - Instant movement to location
  • set_zoom(zoom) - Change zoom level
  • zoom_in() / zoom_out() - Zoom by one level
  • fit_bounds(bounds, options) - Fit map to specific bounds

Location Services:

  • locate(options) - Get user's current location
  • stop_locate() - Stop location tracking

Information Retrieval:

  • get_center(callback) - Get current map center
  • get_zoom(callback) - Get current zoom level
  • get_bounds(callback) - Get current map bounds
  • get_size(callback) - Get map container size

Layer Management:

  • add_layer(layer) - Add a layer to the map
  • remove_layer(layer) - Remove a layer from the map
  • has_layer(layer) - Check if layer exists on map

Full Leaflet API Access

This means you can use any method from the Leaflet Map documentation. For example:

Python (snake_case) → JavaScript (camelCase):

  • map_api.pan_to(latlng) → map.panTo(latlng)
  • map_api.set_max_bounds(bounds) → map.setMaxBounds(bounds)
  • map_api.get_pixel_bounds() → map.getPixelBounds()
  • map_api.container_point_to_lat_lng(point) → map.containerPointToLatLng(point)

Advanced Example

Status: Location tracking disabled

Constraints: None

Callback Handling

Many API methods that retrieve information require callbacks to handle the results:

class CallbackMapState(rx.State):
    map_info: str = ""

    def handle_center_result(self, result):
        lat = result.get("lat", 0)
        lng = result.get("lng", 0)
        self.map_info = f"Center: {lat:.4f}, {lng:.4f}"

    def handle_bounds_result(self, result):
        # result will contain bounds information
        self.map_info = f"Bounds: {result}"

    def get_map_info(self):
        map_api = rxe.map.api("info-map")
        yield map_api.get_center(self.handle_center_result)
        # or
        yield map_api.get_bounds(self.handle_bounds_result)

Available Events

The map components support a comprehensive set of events:

Map Events:

  • on_click, on_dblclick - Mouse click events
  • on_zoom, on_zoom_start, on_zoom_end - Zoom events
  • on_move, on_move_start, on_move_end - Pan events
  • on_resize - Map container resize
  • on_load, on_unload - Map lifecycle

Location Events:

  • on_locationfound, on_locationerror - Geolocation

Layer Events:

  • on_layeradd, on_layerremove - Layer management

Popup Events:

  • on_popupopen, on_popupclose - Popup lifecycle
  • on_tooltipopen, on_tooltipclose - Tooltip lifecycle

Common Patterns

Dynamic Markers

class DynamicMapState(rx.State):
    markers: list[dict] = [
        {"lat": 51.505, "lng": -0.09, "title": "London"},
        {"lat": 48.8566, "lng": 2.3522, "title": "Paris"},
        {"lat": 52.5200, "lng": 13.4050, "title": "Berlin"},
    ]


def dynamic_markers():
    return rxe.map(
        rxe.map.tile_layer(url="..."),
        rx.foreach(
            DynamicMapState.markers,
            lambda marker: rxe.map.marker(
                rxe.map.popup(marker["title"]),
                position=rxe.map.latlng(
                    lat=marker["lat"], lng=marker["lng"]
                ),
            ),
        ),
        # ... map configuration
    )

Best Practices

  1. Always include attribution for tile providers
  2. Set reasonable zoom levels (typically 1-18)
  3. Use bounds for multiple markers instead of arbitrary center/zoom
  4. Handle loading states for dynamic map content
  5. Optimize marker rendering for large datasets using clustering
  6. Test on mobile devices for touch interactions

← Back to main documentation

Built with Reflex