Interactive world map

Help
1

Hi guys, I’m trying to create an application with an interactive world map on reflex, where you can overlay points in layers, here’s an example of my code, which is displayed incorrectly

def index():
    return rx.container(
        rx.script(
            src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js",
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=",
            crossorigin="anonymous",
            on_ready=rx.call_script(
                """
                var map = L.map('map').setView([51.505, -0.09], 13);
                L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                }).addTo(map);

                """
            ),
        ),
        rx.box(id="map"),
    )
2

So I would recommend wrapping this component from its React Library. I actually did this in this doc page here so you can check it out: https://reflex.dev/docs/wrapping-react/more-wrapping-examples#react-leaflet and it should save your problem. The code I have here is copy and paste.