chore: Add raster layer example (#3180)

* chore: raster layer example

example/src/examples/FillRasterLayer/ChoroplethLayerByZoomLevel.js

@@ -108,3 +108,13 @@ class ChoroplethLayerByZoomLevel extends React.PureComponent {
 }
 
 export default ChoroplethLayerByZoomLevel;
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Choropleth Layer By Zoom Level',
+  tags: [],
+  docs: '',
+};
+ChoroplethLayerByZoomLevel.metadata = metadata;

example/src/examples/FillRasterLayer/CustomVectorSource.js

@@ -72,3 +72,13 @@ class CustomVectorSource extends React.PureComponent {
 }
 
 export default CustomVectorSource;
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Custom Vector Source',
+  tags: [],
+  docs: '',
+};
+CustomVectorSource.metadata = metadata;

example/src/examples/FillRasterLayer/GeoJSONSource.js

@@ -56,3 +56,13 @@ class GeoJSONSource extends React.Component {
 }
 
 export default GeoJSONSource;
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'GeoJSON Source',
+  tags: [],
+  docs: '',
+};
+GeoJSONSource.metadata = metadata;

example/src/examples/FillRasterLayer/ImageOverlay.js

@@ -111,3 +111,13 @@ class ImageOverlay extends React.Component {
 }
 
 export default ImageOverlay;
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Image Overlay',
+  tags: [],
+  docs: '',
+};
+ImageOverlay.metadata = metadata;

example/src/examples/FillRasterLayer/IndoorBuilding.js

@@ -95,3 +95,13 @@ class IndoorBuilding extends React.Component {
 }
 
 export default IndoorBuilding;
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Indoor Building Map',
+  tags: [],
+  docs: '',
+};
+IndoorBuilding.metadata = metadata;

example/src/examples/FillRasterLayer/QueryAtPoint.js

@@ -97,3 +97,13 @@ class QueryAtPoint extends React.Component {
 }
 
 export default QueryAtPoint;
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Query Feature Point',
+  tags: [],
+  docs: '',
+};
+QueryAtPoint.metadata = metadata;

example/src/examples/FillRasterLayer/QuerySourceFeatures.tsx

@@ -94,3 +94,13 @@ const QuerySourceFeatures = (props: BaseExampleProps) => {
 };
 
 export default QuerySourceFeatures;
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Query Source Features',
+  tags: [],
+  docs: '',
+};
+QuerySourceFeatures.metadata = metadata;

example/src/examples/FillRasterLayer/QueryWithRect.js

@@ -119,3 +119,13 @@ class QueryWithRect extends React.Component {
 }
 
 export default QueryWithRect;
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Query Features Bounding Box',
+  tags: [],
+  docs: '',
+};
+QueryWithRect.metadata = metadata;

example/src/examples/FillRasterLayer/RasterSource.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  Images,
+  MapView,
+  RasterLayer,
+  RasterSource,
+  Camera,
+} from '@rnmapbox/maps';
+
+const styles = {
+  matchParent: { flex: 1 },
+};
+
+export default function RasterSourceExample() {
+  return (
+    <MapView style={styles.matchParent}>
+      <Camera
+        defaultSettings={{
+          centerCoordinate: [-74.00597, 40.71427],
+          zoomLevel: 14,
+        }}
+      />
+      <RasterSource
+        id="stamen-watercolor"
+        titleSize={256}
+        tileUrlTemplates={['https://tile.openstreetmap.org/{z}/{x}/{y}.png']}
+      />
+      <RasterLayer
+        id="stamen-watercolor-layer"
+        sourceID="stamen-watercolor"
+        style={{ rasterOpacity: 0.85 }}
+      />
+    </MapView>
+  );
+}
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Raster Source',
+  tags: [],
+  docs: '',
+};
+RasterSourceExample.metadata = metadata;

example/src/examples/FillRasterLayer/WatercolorRasterTiles.js

@@ -80,3 +80,13 @@ class WatercolorRasterTiles extends React.Component {
 }
 
 export default WatercolorRasterTiles;
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Watercolor Raster Tiles',
+  tags: [],
+  docs: '',
+};
+WatercolorRasterTiles.metadata = metadata;

example/src/examples/FillRasterLayer/index.js

@@ -0,0 +1,14 @@
+export { default as ChoroplethLayerByZoomLevel } from './ChoroplethLayerByZoomLevel';
+export { default as CustomVectorSource } from './CustomVectorSource';
+export { default as GeoJSONSource } from './GeoJSONSource';
+export { default as ImageOverlay } from './ImageOverlay';
+export { default as IndoorBuilding } from './IndoorBuilding';
+export { default as QueryAtPoint } from './QueryAtPoint';
+export { default as QuerySourceFeatures } from './QuerySourceFeatures';
+export { default as QueryWithRect } from './QueryWithRect';
+export { default as RasterSource } from './RasterSource';
+export { default as WatercolorRasterTiles } from './WatercolorRasterTiles';
+
+export const metadata = {
+  title: 'Fill/Raster Layer',
+};

example/src/scenes/GroupAndItem.tsx

@@ -26,15 +26,7 @@ import ShowPointAnnotation from '../examples/Annotations/ShowPointAnnotation';
 // CAMERA
 import * as Camera from '../examples/Camera';
 // FILLRASTERLAYER
-import ChoroplethLayerByZoomLevel from '../examples/FillRasterLayer/ChoroplethLayerByZoomLevel';
-import CustomVectorSource from '../examples/FillRasterLayer/CustomVectorSource';
-import GeoJSONSource from '../examples/FillRasterLayer/GeoJSONSource';
-import ImageOverlay from '../examples/FillRasterLayer/ImageOverlay';
-import IndoorBuilding from '../examples/FillRasterLayer/IndoorBuilding';
-import QueryAtPoint from '../examples/FillRasterLayer/QueryAtPoint';
-import QueryWithRect from '../examples/FillRasterLayer/QueryWithRect';
-import QuerySourceFeatures from '../examples/FillRasterLayer/QuerySourceFeatures';
-import WatercolorRasterTiles from '../examples/FillRasterLayer/WatercolorRasterTiles';
+import * as FillRasterLayer from '../examples/FillRasterLayer';
 // LINE LAYER
 import GradientLine from '../examples/LineLayer/GradientLine';
 import DrawPolyline from '../examples/LineLayer/DrawPolyline';
@@ -324,20 +316,8 @@ const Examples = new ExampleGroup('React Native Mapbox', [
   ]),*/
   exampleGroup(UserLocation),
   exampleGroup(SymbolCircleLayer),
-  new ExampleGroup('Fill/RasterLayer', [
-    new ExampleItem('GeoJSON Source', GeoJSONSource),
-    new ExampleItem('Watercolor Raster Tiles', WatercolorRasterTiles),
-    new ExampleItem('Indoor Building Map', IndoorBuilding),
-    new ExampleItem('Query Feature Point', QueryAtPoint),
-    new ExampleItem('Query Features Bounding Box', QueryWithRect),
-    new ExampleItem('Query Source Features', QuerySourceFeatures),
-    new ExampleItem('Custom Vector Source', CustomVectorSource),
-    new ExampleItem('Image Overlay', ImageOverlay),
-    new ExampleItem(
-      'Choropleth Layer By Zoom Level',
-      ChoroplethLayerByZoomLevel,
-    ),
-  ]),
+  // @ts-expect-error TODO: fix
+  exampleGroup(FillRasterLayer),
   new ExampleGroup('LineLayer', [
     new ExampleItem('GradientLine', GradientLine),
     example(DrawPolyline),