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.

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

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

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

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 provide the base map imagery. The most common is OpenStreetMap:

Add point markers to specific locations:

Draw shapes and areas on the map:

Maps support comprehensive event handling for user interactions:

Add UI controls for enhanced user interaction:

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

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

Here are some commonly used API methods demonstrated in action:

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

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)

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

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

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