Interactive maps 🌍

[theripnono]

Hi, I'm developing a social networking application where the main feature is an interactive map. Users click where they want and a form opens. when the user saves, an icon is displayed.

I don't know how to develop this in Reflex. In React you can use react-map-gl.

Any ideas?

Thanks.

[picklelo]

@theripnono you could try to wrap the component and publish it, currently we don't have a builtin map component.

[theripnono]

actually i'm developing the component but I've this error:

Server Error
ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
file:///C:/Users/Theri/Escritorio/hello-reflex/.web/node_modules/leaflet/dist/leaflet-src.js (230:19)
file:///C:/Users/Theri/Escritorio/hello-reflex/.web/node_modules/leaflet/dist/leaflet-src.js (7:66)
Object.`
file:///C:/Users/Theri/Escritorio/hello-reflex/.web/node_modules/leaflet/dist/leaflet-src.js (10:3)
Module._compile
node:internal/modules/cjs/loader (1368:14)
Module._extensions..js
node:internal/modules/cjs/loader (1426:10)
Module.load
node:internal/modules/cjs/loader (1205:32)
Module._load
node:internal/modules/cjs/loader (1021:12)
cjsLoader
node:internal/modules/esm/translators (366:17)
ModuleWrap.
node:internal/modules/esm/translators (315:7)
ModuleJob.run
node:internal/modules/esm/module_job (222:25)
async ModuleLoader.import
node:internal/modules/esm/loader (323:24)

I'm following the documentation, here it is the code:

import reflex as rx

class Leaflet (rx.Component):

    """react-leaflet"""
    # The name of the npm package.
    library = "@react-leaflet/core"
    tag='leaflet'
    is_default = True

leaflet = Leaflet.create


def index():
    return leaflet (
         # TileLayer component
            

                tag="TileLayer",
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            ,
    )



app = rx.App()
app.add_page(index)

Any suggestion?
Thanks

[tgberkeley]

@theripnono I Tested this out and it turns out the package leaflet needs to be a dynamic import (check these docs: https://reflex.dev/docs/wrapping-react/guide/#dynamic-imports)

This code below works:

from reflex.components.component import NoSSRComponent
from reflex import Component, Var

class MapContainer(NoSSRComponent):
# here even thouhg there was a / it must be a kibrary and wr cannot look at paths in the library (what can be in package.json)
    library = "react-leaflet"

    tag = "MapContainer"

    center: Var[list]

    zoom: Var[int]

    scroll_wheel_zoom: Var[bool]

    lib_dependencies: list[str] = [
        "react",
        "react-dom",
        "leaflet",
    ]

    def add_imports(self):
        return {"": ["leaflet/dist/leaflet.css"]}



class TileLayer(NoSSRComponent):

    library = "react-leaflet"

    tag = "TileLayer"

    lib_dependencies: list[str] = [
        "react",
        "react-dom",
        "leaflet",
    ]

    url: Var[str]


class useMap(NoSSRComponent):

    library = "react-leaflet"

    tag = "useMap"

    lib_dependencies: list[str] = [
        "react",
        "react-dom",
        "leaflet",
    ]


map_container = MapContainer.create
tile_layer = TileLayer.create
use_map = useMap.create

App code:

from .map import map_container, tile_layer, use_map

def index() -> rx.Component:
    return rx.fragment(
        rx.heading("3D Dice Roll"),
        rx.box(
            map_container(
                tile_layer(url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"),
                center=[51.505, -0.09], zoom=13,
                height="400px",
                width="400px",
            ),
            width="500px",
            height="500px",
    ),
    )

[theripnono]

thank you for the answer! will check it!