Maplibre.res
1%%raw(
2 "export const defaultStyleBundled = `https://api.maptiler.com/maps/7c99d821-43d4-4937-b9db-7aa3cad6d359/style.json?key=${import.meta.env.VITE_MAPTILER_KEY}`"
3)
4
5@module("./Maplibre.res.mjs") @val external defaultStyle: string = "defaultStyleBundled"
6
7/** Point on surface (longitude first) */
8type lngLat = (float, float)
9
10/** Point in pixels (x,y) */
11type point = (int, int)
12
13/** Bounding box from the SW -> NE corner */
14type lngLatBounds = {
15 sw: lngLat,
16 ne: lngLat,
17}
18
19/** View state to set initial state or on map camera movements */
20type viewState = {
21 longitude?: float,
22 latitude?: float,
23 zoom?: float,
24 bounds?: lngLatBounds,
25 pitch?: int,
26 bearing?: int,
27}
28
29/** Layer */
30type layer = {
31 id: string,
32 \"type": string,
33 beforeId?: string,
34 source?: string,
35}
36
37/** Generic type for a maplibre.Map instance */
38type map
39type mapEvent = {
40 \"type": string,
41 target: map,
42}
43type mapEventHandler = mapEvent => unit
44
45type moveLoc = {
46 center: (float, float),
47 padding?: {"top": int, "bottom": int, "left": int, "right": int},
48}
49@send external flyTo: (map, moveLoc) => unit = "flyTo"
50
51// fit bounds
52type bbox = (float, float, float, float)
53type fitOptions = {
54 padding: {"bottom": int, "left": int, "top": int, "right": int},
55}
56@send external fitBoundsWithOptions: (map, bbox, fitOptions) => unit = "fitBounds"
57@send external fitBounds: (map, bbox) => unit = "fitBounds"
58type center = {
59 lng: float,
60 lat: float,
61}
62@send external getCenter: map => center = "getCenter"
63@send external getZoom: map => float = "getZoom"
64
65/** useMap to get a current map instance */
66type currentMap = {
67 current: map,
68}
69@module("@vis.gl/react-maplibre")
70external useMap: unit => currentMap = "useMap"
71
72/** Event for mouse movement on the map */
73type feature = {
74 layer: layer,
75 source: string,
76 sourceLayer: string,
77 state: unknown,
78 properties: JSON.t,
79}
80
81type mapLayerMouseEvent = {
82 \"type": string,
83 target: map,
84 point: {x: float, y: float},
85 lngLat: Geo.lngLat,
86 preventDefault: unit => unit,
87 defaultPrevented: bool,
88 features?: array<feature>,
89}
90
91type mapLayerMouseHandler = mapLayerMouseEvent => unit
92
93/** Event emitted when view state changes due to controlled update or user actions */
94type viewStateChangeEvent = {
95 \"type": string,
96 target: map,
97 viewState: {
98 longitude: float,
99 latitude: float,
100 zoom: float,
101 bounds: lngLatBounds,
102 },
103}
104type viewStateChangeHandler = viewStateChangeEvent => unit
105
106/** FFI to the react-maplibre Map component */
107module Map = {
108 @module("@vis.gl/react-maplibre") @jsx.component
109 external make: (
110 // styles
111 ~id: string=?,
112 ~style: string=?,
113 ~cursor: [#pointer | #help | #wait | #crosshair | #auto]=?,
114 ~mapStyle: {..}=?,
115 ~renderWorldCopies: bool=?,
116 // view controls
117 ~initialViewState: viewState=?,
118 ~longitude: float=?,
119 ~latitude: float=?,
120 ~zoom: float=?,
121 ~pitch: int=?,
122 ~bearing: int=?,
123 ~interactiveLayerIds: array<string>=?,
124 // handlers
125 ~onResize: mapEventHandler=?,
126 ~onLoad: mapEventHandler=?, // after first complete render
127 ~onRender: mapEventHandler=?, // any change to the map rendering
128 ~onIdle: mapEventHandler=?, // no camera changes, all tiles loaded, transitions complete
129 ~onRemove: mapEventHandler=?,
130 ~onError: mapEventHandler=?, // defaults to console.error
131 ~onMouseDown: mapLayerMouseHandler=?,
132 ~onMouseUp: mapLayerMouseHandler=?,
133 ~onMouseOver: mapLayerMouseHandler=?, // initial movement onto map or children
134 ~onMouseEnter: mapLayerMouseHandler=?, // over an interactiveLayerId or from outside map canvas
135 ~onMouseMove: mapLayerMouseHandler=?, // called continuously on movement over map, features defined on interactiveLayerIds
136 ~onMouseLeave: mapLayerMouseHandler=?, // left interactiveLayerId or the map
137 ~onMouseOut: mapLayerMouseHandler=?, // leave map canvas
138 ~onClick: mapLayerMouseHandler=?,
139 ~onDblClick: mapLayerMouseHandler=?,
140 ~onContextMenu: mapLayerMouseHandler=?,
141 ~onMoveStart: viewStateChangeHandler=?,
142 ~onMove: viewStateChangeHandler=?, // event.viewState is the proposed next location, called repeatedly during transition, use to set the center/zoom on a controlled map
143 ~onMoveEnd: viewStateChangeHandler=?,
144 ~children: Jsx.element=?,
145 ) => Jsx.element = "Map"
146}
147
148/** Marker component for displaying points on the map
149 * Valid anchor values: "center", "top", "bottom", "left", "right",
150 * "top-left", "top-right", "bottom-left", "bottom-right"
151 */
152module Marker = {
153 @module("@vis.gl/react-maplibre") @jsx.component
154 external make: (
155 ~longitude: float,
156 ~latitude: float,
157 ~children: Jsx.element=?,
158 ~anchor: string=?,
159 ~offset: (int, int)=?,
160 ~draggable: bool=?,
161 ~onDragStart: mapLayerMouseHandler=?,
162 ~onDrag: mapLayerMouseHandler=?,
163 ~onDragEnd: mapLayerMouseHandler=?,
164 ~onClick: mapLayerMouseHandler=?,
165 ~style: string=?,
166 ~className: string=?,
167 ~color: string=?,
168 ~opacity: float=?,
169 ~opacityWhenCovered: float=?,
170 ) => Jsx.element = "Marker"
171}
172
173/** Source component for adding data sources to the map
174 * Used with GeoJSON data or other source types
175 */
176module Source = {
177 @module("@vis.gl/react-maplibre") @jsx.component
178 external make: (
179 ~id: string,
180 @as("type") ~type_: string,
181 ~data: JSON.t, // URL string or GeoJSON object
182 ~children: Jsx.element=?,
183 ) => Jsx.element = "Source"
184}
185
186/** Layer component for styling map features
187 * Used inside Source to render data
188 */
189module Layer = {
190 @module("@vis.gl/react-maplibre") @jsx.component
191 external make: (
192 ~id: string,
193 @as("type") ~type_: string,
194 ~source: string=?,
195 ~beforeId: string=?,
196 ~paint: JSON.t=?, // Flexible object for paint properties
197 ~layout: JSON.t=?,
198 ) => // Flexible object for layout properties
199 Jsx.element = "Layer"
200}
201
202module Popup = {
203 type t
204
205 type event = {
206 \"type": string,
207 target: t,
208 }
209
210 type anchor =
211 | @as("center") Center
212 | @as("right") Right
213 | @as("left") Left
214 | @as("top") Top
215 | @as("bottom") Bottom
216 | @as("top-left") TopLeft
217 | @as("top-right") TopRight
218 | @as("bottom-left") BottomLeft
219 | @as("bottom-right") BottomRight
220
221 @module("@vis.gl/react-maplibre") @jsx.component
222 external make: (
223 ~longitude: float,
224 ~latitude: float,
225 ~anchor: anchor=?,
226 ~children: Jsx.element=?,
227 ~offset: (float, float)=?,
228 ~maxWidth: string=?, // default: 240px
229 ~style: {..}=?,
230 ~className: string=?,
231 ~onOpen: event => unit=?,
232 ~onClose: event => unit=?,
233 ~closeButton: bool=?,
234 ~closeOnClick: bool=?,
235 ~closeOnMove: bool=?,
236 ~focusAfterOpen: bool=?,
237 ) => Jsx.element = "Popup"
238}
