Merge branch 'master' into x/types

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2020 Urban Computing Foundation
+Copyright Vis.gl contributors.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -63,7 +63,7 @@ See [contribution guide](/CONTRIBUTING.md).
 
 ### Attributions
 
-react-map-gl is part of vis.gl, an [Urban Computing Foundation](https://uc.foundation) project.
+react-map-gl is part of vis.gl, an [OpenJS Foundation](https://openjsf.org) project.
 
 Development is also supported by
 

docs/api-reference/fullscreen-control.md

@@ -56,7 +56,7 @@ function App() {
 
 ### Reactive Properties
 
-#### `style`: CSSProperties {#style}
+#### `style`: CSSProperties {#style}
 
 CSS style override that applies to the control's container.
 
@@ -65,11 +65,11 @@ CSS style override that applies to the control's container.
 
 The properties in this section are not reactive. They are only used when the component first mounts.
 
-#### `containerId`: string {#containerid}
+#### `containerId`: string {#containerid}
 
 Id of the DOM element which should be made full screen. By default, the map container element will be made full screen.
 
-#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
+#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
 
 Default: `'top-right'`
 
@@ -78,4 +78,4 @@ Placement of the control relative to the map.
 
 ## Source
 
-[fullscreen-control.ts](https://github.com/visgl/react-map-gl/tree/7.0-release/src/components/fullscreen-control.ts)
+[fullscreen-control.ts](https://github.com/visgl/react-map-gl/tree/7.1-release/src/components/fullscreen-control.tsx)

docs/api-reference/types.md

@@ -128,27 +128,27 @@ An object with the following fields:
 
 #### LngLat
 
-A [mapboxgl.LngLat](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglat) object.
+A `LngLat` object ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglat) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/LngLat/)).
 
 #### LngLatLike
 
-A [LngLat](#lnglat) object, an array of two numbers representing longitude and latitude, or an object with `lng` and `lat` or `lon` and `lat` properties.
+A [`LngLat`](#lnglat) object, an array of two numbers representing longitude and latitude, or an object with `lng` and `lat` or `lon` and `lat` properties. ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatlike) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/LngLatLike/))
 
 #### LngLatBounds
 
-A [mapboxgl.LngLatBounds](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatbounds) object.
+A `LngLatBounds` object ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatbounds) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/LngLatBounds/)).
 
 #### LngLatBoundsLike
 
-A [LngLatBounds](#lnglatbounds) object, an array of [LngLatLike](#lnglatlike) objects in [sw, ne] order, or an array of numbers in [west, south, east, north] order.
+A [`LngLatBounds`](#lnglatbounds) object, an array of [`LngLatLike`](#lnglatlike) objects in [sw, ne] order, or an array of numbers in [west, south, east, north] order. ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatboundslike) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/LngLatBoundsLike/))
 
 #### Point
 
-A [mapboxgl.Point](https://github.com/mapbox/point-geometry) object.
+A `Point` object. ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/geography/#point) | [Maplibre](https://github.com/mapbox/point-geometry))
 
 #### PointLike
 
-A [Point](#point) or an array of two numbers representing x and y screen coordinates in pixels.
+A [Point](#point) or an array of two numbers representing x and y screen coordinates in pixels ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/geography/#pointlike) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PointLike/)).
 
 #### MapGeoJSONFeature
 

docs/get-started/adding-custom-data.md

@@ -13,7 +13,14 @@ import type {FeatureCollection} from 'geojson';
 const geojson: FeatureCollection = {
   type: 'FeatureCollection',
   features: [
-    {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
+    {
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [-122.4, 37.8]
+      },
+      properties: {title: '915 Front Street, San Francisco, California'}
+    }
   ]
 };
 

docs/get-started/get-started.md

@@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem';
   <TabItem value="mapbox" label="Mapbox">
 
 ```bash
-npm install --save react-map-gl mapbox-gl @types/mapbox-gl
+npm install react-map-gl mapbox-gl @types/mapbox-gl
 ```
 
   </TabItem>
   <TabItem value="maplibre" label="Maplibre">
 
 ```bash
-npm install --save react-map-gl maplibre-gl
+npm install react-map-gl maplibre-gl
 ```
 
   </TabItem>
@@ -129,7 +129,7 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 ## Using with a Compatible Fork
 
 ```bash
-npm install --save react-map-gl my-map-gl-fork
+npm install react-map-gl my-map-gl-fork
 ```
 
 Then override the `mapLib` prop of `Map`:
@@ -144,4 +144,4 @@ import 'my-map-gl-fork/path/to/style-sheet.css';
 function App() {
   return <Map mapLib={import('my-map-gl-fork')} />;
 }
-```
+```

docs/get-started/state-management.md

@@ -80,7 +80,7 @@ function App() {
     const newCenter = [viewState.longitude, viewState.latitude];
     // Only update the view state if the center is inside the geofence
     if (turf.booleanPointInPolygon(newCenter, GEOFENCE)) {
-      setViewState(newCenter);
+      setViewState(viewState);
     }
   }, [])
 

examples/geojson/src/control-panel.tsx

@@ -11,7 +11,10 @@ function ControlPanel(props) {
         see details.
       </p>
       <p>
-        Data source: <a href="www.census.gov">US Census Bureau</a>
+        Data source:{' '}
+        <a href="https://www.census.gov" target="_new">
+          US Census Bureau
+        </a>
       </p>
       <div className="source-link">
         <a