doc: 3rd party vector source example

rnmapbox · Dec 2, 2023 · 708217c · 708217c
1 parent 9fa63b7
commit 708217c
Show file tree

Hide file tree

Showing 7 changed files with 205 additions and 74 deletions.
diff --git a/docs/VectorSource.md b/docs/VectorSource.md
@@ -50,7 +50,7 @@ Array
 An array of tile URL templates. If multiple endpoints are specified, clients may use any combination of endpoints.
 Example: https://example.com/vector-tiles/{z}/{x}/{y}.pbf
 
-
+[Third Party Vector Source](../examples/LineLayer/ThirdPartyVectorSource)
 
 ### minZoomLevel
 

diff --git a/docs/examples.json b/docs/examples.json
@@ -703,7 +703,50 @@
     "metadata": {
       "title": "LineLayer"
     },
-    "examples": []
+    "examples": [
+      {
+        "metadata": {
+          "title": "Draw Polyline",
+          "tags": [
+            "LineLayer",
+            "ShapeSource",
+            "onCameraChanged",
+            "getCoordinateFromView",
+            "Overlay"
+          ],
+          "docs": "This example shows a simple polyline editor. It uses `onCameraChanged` to get the center of the map and `getCoordinateFromView` \n  to get the coordinates of the crosshair.\n  \n  The crosshair is an overlay that is positioned using `onLayout` and `getCoordinateFromView`.\n  \n  The `ShapeSource` is updated with the new coordinates and the `LineLayer` is updated with the new coordinates."
+        },
+        "fullPath": "example/src/examples/LineLayer/DrawPolyline.tsx",
+        "relPath": "LineLayer/DrawPolyline.tsx",
+        "name": "DrawPolyline"
+      },
+      {
+        "metadata": {
+          "title": "Gradient Line",
+          "tags": [
+            "LineLayer",
+            "LineLayer#lineGradient"
+          ],
+          "docs": "This example demonstrates how to use interpolate expression in the `lineGradient` property of a `LineLayer` to create a gradient line."
+        },
+        "fullPath": "example/src/examples/LineLayer/GradientLine.js",
+        "relPath": "LineLayer/GradientLine.js",
+        "name": "GradientLine"
+      },
+      {
+        "metadata": {
+          "title": "Third Party Vector Source",
+          "tags": [
+            "VectorSource",
+            "VectorSource#tileUrlTemplates"
+          ],
+          "docs": "This example renders vector tiles using a third party vector tile source.\n\nIn this case, Mapillary provides the vector tiles, which are added to the map using VectorSource."
+        },
+        "fullPath": "example/src/examples/LineLayer/ThirdPartyVectorSource.js",
+        "relPath": "LineLayer/ThirdPartyVectorSource.js",
+        "name": "ThirdPartyVectorSource"
+      }
+    ]
   },
   {
     "groupName": "Camera",

diff --git a/example/src/examples/BugReportExample.js b/example/src/examples/BugReportExample.js
@@ -7,6 +7,8 @@ import {
   SymbolLayer,
   CircleLayer,
   Camera,
+  VectorSource,
+  LineLayer,
 } from '@rnmapbox/maps';
 
 const styles = {
@@ -70,16 +72,35 @@ class BugReportExample extends React.Component {
 
     return (
       <>
-        <Button
-          title="Grow"
-          onPress={() => this.setState({ radius: this.state.radius + 20 })}
-        />
-        <MapView
-          style={styles.mapView}
-          styleURL="mapbox://styles/mapbox/standard-beta"
-        >
-          <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
+        <MapView style={styles.mapView}>
+          <Camera
+            defaultSettings={{
+              centerCoordinate: [-87.622088, 41.878781],
+              zoomLevel: 10,
+            }}
+          />
           <Images images={{ example: require('../assets/example.png') }} />
+          <VectorSource
+            id="mapillary"
+            tileUrlTemplates={[
+              'https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token=MLY|4142433049200173|72206abe5035850d6743b23a49c41333'.replaceAll(
+                '|',
+                '%7C',
+              ),
+            ]}
+          >
+            <LineLayer
+              id="mapillary-lines"
+              sourceLayerID="sequence"
+              style={{
+                lineCap: 'round',
+                lineJoin: 'round',
+                lineOpacity: 0.6,
+                lineColor: 'rgb(53, 175, 109)',
+                lineWidth: 2.0,
+              }}
+            />
+          </VectorSource>
           <ShapeSource id={'shape-source-id-0'} shape={features}>
             <CircleLayer
               id={'circle-layer'}

diff --git a/example/src/examples/LineLayer/DrawPolyline.tsx b/example/src/examples/LineLayer/DrawPolyline.tsx
@@ -189,23 +189,26 @@ const DrawPolyline = () => {
   );
 };
 
-DrawPolyline.title = 'Draw Polyline';
-DrawPolyline.tags = [
-  'LineLayer',
-  'ShapeSource',
-  'onCameraChanged',
-  'getCoordinateFromView',
-  'Overlay',
-];
-DrawPolyline.docs = `
-# Draw Polyline
-
-This example shows a simple polyline editor. It uses \`onCameraChanged\` to get the center of the map and \`getCoordinateFromView\` 
-to get the coordinates of the crosshair.
+export default DrawPolyline;
 
-The crosshair is an overlay that is positioned using \`onLayout\` and \`getCoordinateFromView\`.
+/* end-example-doc */
 
-The \`ShapeSource\` is updated with the new coordinates and the \`LineLayer\` is updated with the new coordinates.
-`;
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Draw Polyline',
+  tags: [
+    'LineLayer',
+    'ShapeSource',
+    'onCameraChanged',
+    'getCoordinateFromView',
+    'Overlay',
+  ],
+  docs: `This example shows a simple polyline editor. It uses \`onCameraChanged\` to get the center of the map and \`getCoordinateFromView\` 
+  to get the coordinates of the crosshair.
+  
+  The crosshair is an overlay that is positioned using \`onLayout\` and \`getCoordinateFromView\`.
+  
+  The \`ShapeSource\` is updated with the new coordinates and the \`LineLayer\` is updated with the new coordinates.`,
+};
 
-export default DrawPolyline;
+DrawPolyline.metadata = metadata;
diff --git a/example/src/examples/LineLayer/GradientLine.js b/example/src/examples/LineLayer/GradientLine.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import MapboxGL from '@rnmapbox/maps';
+import { MapView, Camera, ShapeSource, LineLayer } from '@rnmapbox/maps';
 
-import sheet from '../../styles/sheet';
-import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
-import Page from '../common/Page';
 
 const styles = {
+  matchParent: {
+    flex: 1,
+  },
   lineLayer: {
     lineColor: 'red',
     lineCap: 'round',
@@ -31,54 +31,61 @@ const styles = {
   },
 };
 
-class GradientLine extends React.Component {
-  static propTypes = {
-    ...BaseExamplePropTypes,
-  };
+const lineString = {
+  type: 'Feature',
+  geometry: {
+    type: 'LineString',
+    coordinates: [
+      [-77.044211, 38.852924],
+      [-77.045659, 38.860158],
+      [-77.044232, 38.862326],
+      [-77.040879, 38.865454],
+      [-77.039936, 38.867698],
+      [-77.040338, 38.86943],
+      [-77.04264, 38.872528],
+      [-77.03696, 38.878424],
+      [-77.032309, 38.87937],
+      [-77.030056, 38.880945],
+      [-77.027645, 38.881779],
+      [-77.026946, 38.882645],
+      [-77.026942, 38.885502],
+      [-77.028054, 38.887449],
+      [-77.02806, 38.892088],
+      [-77.03364, 38.892108],
+      [-77.033643, 38.899926],
+    ],
+  },
+};
 
+class GradientLine extends React.Component {
   render() {
     return (
-      <Page {...this.props}>
-        <MapboxGL.MapView style={sheet.matchParent}>
-          <MapboxGL.Camera
-            centerCoordinate={[-77.035, 38.875]}
-            zoomLevel={12}
-          />
-          <MapboxGL.ShapeSource
-            id="source1"
-            lineMetrics={true}
-            shape={{
-              type: 'Feature',
-              geometry: {
-                type: 'LineString',
-                coordinates: [
-                  [-77.044211, 38.852924],
-                  [-77.045659, 38.860158],
-                  [-77.044232, 38.862326],
-                  [-77.040879, 38.865454],
-                  [-77.039936, 38.867698],
-                  [-77.040338, 38.86943],
-                  [-77.04264, 38.872528],
-                  [-77.03696, 38.878424],
-                  [-77.032309, 38.87937],
-                  [-77.030056, 38.880945],
-                  [-77.027645, 38.881779],
-                  [-77.026946, 38.882645],
-                  [-77.026942, 38.885502],
-                  [-77.028054, 38.887449],
-                  [-77.02806, 38.892088],
-                  [-77.03364, 38.892108],
-                  [-77.033643, 38.899926],
-                ],
-              },
+      <>
+        <MapView style={styles.matchParent}>
+          <Camera
+            defaultSettings={{
+              centerCoordinate: [-77.035, 38.875],
+              zoomLevel: 12,
             }}
-          >
-            <MapboxGL.LineLayer id="layer1" style={styles.lineLayer} />
-          </MapboxGL.ShapeSource>
-        </MapboxGL.MapView>
-      </Page>
+          />
+          <ShapeSource id="line-source" lineMetrics={true} shape={lineString}>
+            <LineLayer id="line-layer" style={styles.lineLayer} />
+          </ShapeSource>
+        </MapView>
+      </>
     );
   }
 }
 
 export default GradientLine;
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Gradient Line',
+  tags: ['LineLayer', 'LineLayer#lineGradient'],
+  docs: 'This example demonstrates how to use interpolate expression in the `lineGradient` property of a `LineLayer` to create a gradient line.',
+};
+
+GradientLine.metadata = metadata;
diff --git a/example/src/examples/LineLayer/ThirdPartyVectorSource.js b/example/src/examples/LineLayer/ThirdPartyVectorSource.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { MapView, Camera, VectorSource, LineLayer } from '@rnmapbox/maps';
+
+const styles = {
+  mapView: { flex: 1 },
+  lineLayer: {
+    lineCap: 'round',
+    lineJoin: 'round',
+    lineOpacity: 0.6,
+    lineColor: 'rgb(53, 175, 109)',
+    lineWidth: 2.0,
+  },
+};
+
+const defaultCameraSettings = {
+  centerCoordinate: [-87.622088, 41.878781],
+  zoomLevel: 10,
+};
+
+const tileUrlTemplates = [
+  'https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token=MLY|4142433049200173|72206abe5035850d6743b23a49c41333'.replaceAll(
+    '|',
+    '%7C',
+  ),
+];
+
+function ThirdPartyVectorSource() {
+  return (
+    <>
+      <MapView style={styles.mapView}>
+        <Camera defaultSettings={defaultCameraSettings} />
+        <VectorSource id="mapillary" tileUrlTemplates={tileUrlTemplates}>
+          <LineLayer
+            id="mapillary-lines"
+            sourceLayerID="sequence"
+            style={styles.lineLayer}
+          />
+        </VectorSource>
+      </MapView>
+    </>
+  );
+}
+
+export default ThirdPartyVectorSource;
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Third Party Vector Source',
+  tags: ['VectorSource', 'VectorSource#tileUrlTemplates'],
+  docs: `This example renders vector tiles using a third party vector tile source.
+
+In this case, Mapillary provides the vector tiles, which are added to the map using VectorSource.`,
+};
+
+ThirdPartyVectorSource.metadata = metadata;
diff --git a/example/src/examples/LineLayer/index.js b/example/src/examples/LineLayer/index.js
@@ -1,5 +1,6 @@
 export { default as DrawPolyline } from './DrawPolyline';
 export { default as GradientLine } from './GradientLine';
+export { default as ThirdPartyVectorSource } from './ThirdPartyVectorSource';
 
 export const metadata = {
   title: 'LineLayer',