First website

docs/api-reference/logo-control.md

@@ -0,0 +1,53 @@
+# LogoControl
+
+React component that wraps the base library's [LogoControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/LogoControl/) class.
+
+```tsx
+import * as React from 'react';
+import {Map, LogoControl} from '@vis.gl/react-maplibre';
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+function App() {
+  return <Map
+    initialViewState={{
+      longitude: -100,
+      latitude: 40,
+      zoom: 3.5
+    }}
+    mapStyle="https://demotiles.maplibre.org/style.json"
+  >
+    <LogoControl />
+  </Map>;
+}
+```
+
+
+## Properties
+
+### Reactive Properties
+
+#### `style`: CSSProperties {#style}
+
+CSS style override that applies to the control's container.
+
+
+### Other Properties
+
+The properties in this section are not reactive. They are only used when the component first mounts.
+
+Any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/LogoControlOptions/) supported by the `LogoControl` class, such as
+
+- `compact`
+
+Plus the following:
+
+#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
+
+Default: `'top-right'`
+
+Placement of the control relative to the map.
+
+
+## Source
+
+[logo-control.ts](https://github.com/visgl/react-maplibre/tree/1.0-release/src/components/logo-control.ts)

docs/api-reference/map.md

@@ -2,7 +2,7 @@
 
 React component that wraps the base library's [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) class. This is also the default export from `@vis.gl/react-maplibre`.
 
-```tsx title="app.tsx"
+```tsx
 import * as React from 'react';
 import {Map} from '@vis.gl/react-maplibre';
 import 'maplibre-gl/dist/maplibre-gl.css';
@@ -79,10 +79,10 @@ Default: `true`
 
 Enable diffing when `mapStyle` changes. If `false`, force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update.
 
-#### `terrain`: [Terrain](./types.md#terrain) {#terrain}
+#### `terrain`: [Terrain](./types.md#terrain)|null {#terrain}
 
 Terrain property of the style. Must conform to the [Terrain Style Specification](https://maplibre.org/maplibre-style-spec/terrain/).
-If `undefined` is provided, removes terrain from the map.
+If `null` is provided, removes terrain from the map.
 
 
 ### Camera options

docs/api-reference/terrain-control.md

@@ -0,0 +1,85 @@
+# TerrainControl
+
+React component that wraps the base library's [TerrainControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/TerrainControl/) class.
+
+```tsx
+import * as React from 'react';
+import {Map, MapStyle, TerrainControl} from '@vis.gl/react-maplibre';
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+// https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/
+const MAP_STYLE: MapStyle = {
+  version: 8,
+  sources: {
+    osm: {
+      type: 'raster',
+      tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
+      tileSize: 256,
+      attribution: '© OpenStreetMap Contributors',
+      maxzoom: 19
+    },
+    terrainSource: {
+      type: 'raster-dem',
+      url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
+      tileSize: 256
+    }
+  },
+  layers: [
+    {
+      id: 'osm',
+      type: 'raster',
+      source: 'osm'
+    }
+  ],
+  terrain: {
+    source: 'terrainSource',
+    exaggeration: 1
+  },
+  sky: {}
+};
+
+function App() {
+  return <Map
+    initialViewState={{
+      longitude: -100,
+      latitude: 40,
+      zoom: 3.5
+    }}
+    mapStyle={MAP_STYLE}
+  >
+    <TerrainControl />
+  </Map>;
+}
+```
+
+
+## Properties
+
+### Reactive Properties
+
+#### `style`: CSSProperties {#style}
+
+CSS style override that applies to the control's container.
+
+
+### Other Properties
+
+The properties in this section are not reactive. They are only used when the component first mounts.
+
+Any [options](https://maplibre.org/maplibre-style-spec/terrain/) supported by the `TerrainControl` class, such as
+
+- `source`
+- `exageration`
+
+Plus the following:
+
+#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
+
+Default: `'top-right'`
+
+Placement of the control relative to the map.
+
+
+## Source
+
+[terrain-control.ts](https://github.com/visgl/react-maplibre/tree/1.0-release/src/components/terrain-control.ts)

docs/api-reference/types.md

@@ -154,7 +154,7 @@ A [GeoJSON](http://geojson.org/) feature that also contains the following librar
 - `layer`: Layer
 - `source`: string
 - `sourceLayer`: string
-- `state`: { [key: string]: any }
+- `state`: `{ [key: string]: any }`
 
 #### ViewState
 

docs/api-reference/use-control.md

@@ -71,9 +71,9 @@ The hook creates an [IControl](https://maplibre.org/maplibre-gl-js/docs/API/inte
 
 Parameters:
 
-- `onCreate`: ({map: MapRef, mapLib: maplibregl}) => [IControl](./types.md#icontrol) - called to create an instance of the control.
-- `onAdd`: ({map: MapRef, mapLib: maplibregl}) => void - called when the control has been added to the map.
-- `onRemove`: ({map: MapRef, mapLib: maplibregl}) => void - called when the control is about to be removed from the map.
+- `onCreate`: `({map: MapRef, mapLib: maplibregl}) => IControl` - called to create an instance of the control.
+- `onAdd`: `({map: MapRef, mapLib: maplibregl}) => void` - called when the control has been added to the map.
+- `onRemove`: `({map: MapRef, mapLib: maplibregl}) => void` - called when the control is about to be removed from the map.
 - `options`: object
   + `position`: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map
 

docs/table-of-contents.json

@@ -27,12 +27,14 @@
       "api-reference/fullscreen-control",
       "api-reference/geolocate-control",
       "api-reference/layer",
+      "api-reference/logo-control",
       "api-reference/map-provider",
       "api-reference/marker",
       "api-reference/navigation-control",
       "api-reference/popup",
       "api-reference/scale-control",
       "api-reference/source",
+      "api-reference/terrain-control",
       "api-reference/use-control",
       "api-reference/use-map",
       "api-reference/types"

docs/whats-new.md

@@ -1,10 +1,10 @@
 # What's new
 
-## react-maplibre-gl v1.0
+## react-maplibre v1.0
 
 Release target: October 2024
 
-This is the initial release of `react-maplibre-gl`. The code base was spinned off from [react-map-gl v7.1](https://github.com/visgl/react-map-gl/tree/7.1-release). This version is intended to be a drop-in replacement of `react-map-gl` v7.
+This is the initial release of `@vis.gl/react-maplibre`. The code base was spinned off from [react-map-gl v7.1](https://github.com/visgl/react-map-gl/tree/7.1-release). This version is intended to be a drop-in replacement of `react-map-gl` v7.
 
 Major differences are listed below.
 

examples/clusters/src/app.tsx

@@ -14,6 +14,9 @@ export default function App() {
 
   const onClick = async (event: MapMouseEvent) => {
     const feature = event.features[0];
+    if (!feature) {
+      return;
+    }
     const clusterId = feature.properties.cluster_id;
 
     const geojsonSource: GeoJSONSource = mapRef.current.getSource('earthquakes');

examples/clusters/src/layers.ts

@@ -18,7 +18,6 @@ export const clusterCountLayer: LayerProps = {
   filter: ['has', 'point_count'],
   layout: {
     'text-field': '{point_count_abbreviated}',
-    'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
     'text-size': 12
   }
 };

examples/draggable-markers/src/app.tsx

@@ -56,7 +56,7 @@ export default function App() {
           <Pin size={20} />
         </Marker>
 
-        <NavigationControl />
+        <NavigationControl position="top-left" />
       </Map>
       <ControlPanel events={events} />
     </>

examples/draw-polygon/index.html

@@ -4,7 +4,6 @@
     <meta charset='UTF-8' />
     <title>react-maplibre Example</title>
     <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://unpkg.com/@mapbox/[email protected]/dist/mapbox-gl-draw.css" type="text/css">
     <style>
       body {
         margin: 0;

examples/draw-polygon/src/app.tsx

@@ -6,6 +6,8 @@ import {Map} from '@vis.gl/react-maplibre';
 import DrawControl from './draw-control';
 import ControlPanel from './control-panel';
 
+import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+
 export default function App() {
   const [features, setFeatures] = useState({});
 

examples/geocoder/index.html

@@ -4,7 +4,6 @@
     <meta charset='UTF-8' />
     <title>react-maplibre Example</title>
     <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://unpkg.com/@maplibre/[email protected]/dist/maplibre-gl-geocoder.css" type="text/css">
     <style>
       body {
         margin: 0;

examples/geocoder/src/app.tsx

@@ -5,6 +5,8 @@ import {Map} from '@vis.gl/react-maplibre';
 import GeocoderControl from './geocoder-control';
 import ControlPanel from './control-panel';
 
+import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
+
 export default function App() {
   return (
     <>

website/.gitignore

@@ -1,4 +1,5 @@
-public/
-.cache/
-.docusaurus/
-build/
+public
+.cache
+report*.json
+build
+.docusaurus

website/babel.config.js

@@ -1,8 +1,4 @@
 module.exports = {
   presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-  plugins: [
-    'version-inline',
-    // Ensure consistently hashed component classNames between environments (a must for SSR)
-    'styled-components'
-  ]
+  plugins: ["styled-components"]
 };