Geospatial in Hilla

Hilla
1

i am trying to run a react leaflet map on hilla but its not showing what could be the problem

2

Hey, could you please share bit more details? How did you add it to your project? Maybe you can share project?

3

Just tried it myself and got it working.
If there are no errors: try to set height to the map as by default it has none.

4

installing:
https://react-leaflet.js.org/docs/start-installation/#using-a-package-registry
https://react-leaflet.js.org/docs/start-installation/#typescript-support

and then in any hilla view:
`import ‘leaflet/dist/leaflet.css’;
import {MapContainer, Marker, Popup, TileLayer} from ‘react-leaflet’
import {LatLngExpression} from “leaflet”;

export default function Hello() {
const position: LatLngExpression = {lat: 51.505, lng: -0.095};

return (
        <MapContainer center={position} style={{height:'500px'}} zoom={13} scrollWheelZoom={false}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={position}>
                    <Popup>
                        A pretty CSS3 popup. <br/> Easily customizable.
                    </Popup>
                </Marker>
            </MapContainer>
);

}`