Rescript Leaflet React ·  · 

Rescript bindings for React Leaflet JS

Getting Started

1. Install the package
``json
npm i rescript-leaflet-react
`
1. Add this to you bsconfig.json:
`json
"bs-dependencies": [
"@rescript/react",
"rescript-leaflet-react"
]
`
1. Import into your Rescript project
`rescript
open RescriptLeafletReact
`

5. Access the LeafletReact module

Example Usage

`rescript
open RescriptLeafletReact

let s = React.string

module EventLogger = {
@react.component
let make = () => {
open LeafletHooks

let map = useMap()
let mapEvents = useMapEvents(EventHandlers.make(
~click = (event) => {
Js.log("Mouse Click:")
Js.log(event)
},
()
))

let onSingleEvent = useMapEvent("drag", (pos) => {
Js.log("Drag Event:")
Js.log(pos)
})

Js.log("Center:")
Js.log(map.getCenter(.))
<>
}
}

@react.component
let make = () => {
open LeafletReact

let logMouseEvent = (t) => {
Js.log(t)
}

let logPopupEvent = (t) => {
Js.log(t)
}

let logDragEvent = (t) => {
Js.log(t)
}

let bounds = create_bounds(
(39.043705, -95.692240), (40.043705, -93.692240)
)

let pathOptions = PathOptions.make(
~color="#00ff00",
()
)


}
`
This snippet of code generates this map:
!Example Map

Limitations:

This is not a complete binding, if anyone wants to chip away at the library
I would happily merge it in.

Because of some weirdness with this binding and rescript's currying system, all the hook functions (getCenter, zoomIn, etc.) must be called in the uncurried way
(using func(. param)` notation)

Support

Here is a basic list of what is supported right now:

$3

- MapContainer
- TileLayer
- Market
- Popup
- Tooltip
- Circle
- Polyline
- Polygon
- Rectangle
- Pane
- ImageOverlay
- VideoOverlay

$3

- useMap
- useMapEvents
- useMapEvent