Draft: Add example output to docs

docs/api/along.mdx

@@ -41,27 +41,16 @@ var options = { units: "miles" };
 var along = turf.along(line, 200, options);
 ```
 
-export function Map0() {
-  "use strict";
+```javascript live
+function Map() {
+  var point = turf.point([-90.54863, 14.616599]);
+  var buffered = turf.buffer(point, 500, { units: "miles" });
 
-  // jsdoc example start
-  var line = turf.lineString([
-    [-83, 30],
-    [-84, 36],
-    [-78, 41],
-  ]);
-  var options = { units: "miles" };
+  console.log(buffered);
 
-  var along = turf.along(line, 200, options);
-
-  //addToMap
-  var addToMap = { along, line };
-  // jsdoc example end
-
-  return <ExampleMap addToMap={addToMap} />;
+  return <ExampleMap addToMap={{ point, buffered }} />;
 }
-
-<BrowserOnly>{() => <Map0 />}</BrowserOnly>
+```
 
 ### Installation
 

docs/api/area.mdx

@@ -41,10 +41,8 @@ var polygon = turf.polygon([
 var area = turf.area(polygon);
 ```
 
-export function Map0() {
-  "use strict";
-
-  // jsdoc example start
+```javascript live
+function Map() {
   var polygon = turf.polygon([
     [
       [125, -15],
@@ -56,16 +54,13 @@ export function Map0() {
   ]);
 
   var area = turf.area(polygon);
-
-  //addToMap
-  var addToMap = { polygon };
   polygon.properties.area = area;
-  // jsdoc example end
 
-  return <ExampleMap addToMap={addToMap} />;
-}
+  console.log(area);
 
-<BrowserOnly>{() => <Map0 />}</BrowserOnly>
+  return <ExampleMap addToMap={{ polygon }} />;
+}
+```
 
 ### Installation
 

docs/api/bbox.mdx

@@ -40,10 +40,8 @@ var bbox = turf.bbox(line);
 var bboxPolygon = turf.bboxPolygon(bbox);
 ```
 
-export function Map0() {
-  "use strict";
-
-  // jsdoc example start
+```javascript live
+function Map() {
   var line = turf.lineString([
     [-74, 40],
     [-78, 42],
@@ -52,14 +50,9 @@ export function Map0() {
   var bbox = turf.bbox(line);
   var bboxPolygon = turf.bboxPolygon(bbox);
 
-  //addToMap
-  var addToMap = { line, bboxPolygon };
-  // jsdoc example end
-
-  return <ExampleMap addToMap={addToMap} />;
+  return <ExampleMap addToMap={{ line, bboxPolygon }} />;
 }
-
-<BrowserOnly>{() => <Map0 />}</BrowserOnly>
+```
 
 ### Installation
 

docs/api/bboxClip.mdx

@@ -45,10 +45,8 @@ var poly = turf.polygon([
 var clipped = turf.bboxClip(poly, bbox);
 ```
 
-export function Map0() {
-  "use strict";
-
-  // jsdoc example start
+```javascript live
+function Map() {
   var bbox = [0, 0, 10, 10];
   var poly = turf.polygon([
     [
@@ -62,14 +60,9 @@ export function Map0() {
 
   var clipped = turf.bboxClip(poly, bbox);
 
-  //addToMap
-  var addToMap = { bbox, poly, clipped };
-  // jsdoc example end
-
-  return <ExampleMap addToMap={addToMap} />;
+  return <ExampleMap addToMap={{ bbox, poly, clipped }} />;
 }
-
-<BrowserOnly>{() => <Map0 />}</BrowserOnly>
+```
 
 ### Installation
 

docs/api/bboxPolygon.mdx

@@ -36,22 +36,14 @@ var bbox = [0, 0, 10, 10];
 var poly = turf.bboxPolygon(bbox);
 ```
 
-export function Map0() {
-  "use strict";
-
-  // jsdoc example start
+```javascript live
+function Map() {
   var bbox = [0, 0, 10, 10];
-
   var poly = turf.bboxPolygon(bbox);
 
-  //addToMap
-  var addToMap = { poly };
-  // jsdoc example end
-
-  return <ExampleMap addToMap={addToMap} />;
+  return <ExampleMap addToMap={{ poly }} />;
 }
-
-<BrowserOnly>{() => <Map0 />}</BrowserOnly>
+```
 
 ### Installation
 

docs/api/bearing.mdx

@@ -38,26 +38,19 @@ var point2 = turf.point([-75.534, 39.123]);
 var bearing = turf.bearing(point1, point2);
 ```
 
-export function Map0() {
-  "use strict";
-
-  // jsdoc example start
+```javascript live
+function Map() {
   var point1 = turf.point([-75.343, 39.984]);
   var point2 = turf.point([-75.534, 39.123]);
-
   var bearing = turf.bearing(point1, point2);
-
-  //addToMap
-  var addToMap = { point1, point2 };
+
   point1.properties["marker-color"] = "#f00";
   point2.properties["marker-color"] = "#0f0";
   point1.properties.bearing = bearing;
-  // jsdoc example end
 
-  return <ExampleMap addToMap={addToMap} />;
+  return <ExampleMap addToMap={{ point1, point2 }} />;
 }
-
-<BrowserOnly>{() => <Map0 />}</BrowserOnly>
+```
 
 ### Installation
 

docs/api/bezierSpline.mdx

@@ -48,10 +48,8 @@ var line = turf.lineString([
 var curved = turf.bezierSpline(line);
 ```
 
-export function Map0() {
-  "use strict";
-
-  // jsdoc example start
+```javascript live
+function Map() {
   var line = turf.lineString([
     [-76.091308, 18.427501],
     [-76.695556, 18.729501],
@@ -63,15 +61,13 @@ export function Map0() {
 
   var curved = turf.bezierSpline(line);
 
-  //addToMap
-  var addToMap = { line, curved };
+  console.log('curved', curved);
+
   curved.properties = { stroke: "#0F0" };
-  // jsdoc example end
 
-  return <ExampleMap addToMap={addToMap} />;
+  return <ExampleMap addToMap={{ line, curved }} />;
 }
-
-<BrowserOnly>{() => <Map0 />}</BrowserOnly>
+```
 
 ### Installation
 

docs/api/booleanIntersects.mdx

@@ -46,34 +46,18 @@ turf.booleanIntersects(line, point2);
 //=true
 ```
 
-export function Map0() {
-  "use strict";
-
-  // jsdoc example start
+```javascript live
+function Map() {
   var point1 = turf.point([2, 2]);
   var point2 = turf.point([1, 2]);
-  var line = turf.lineString([
-    [1, 1],
-    [1, 3],
-    [1, 4],
-  ]);
-
-  turf.booleanIntersects(line, point1);
-  //=false
-
-  turf.booleanIntersects(line, point2);
-  //=true
+  var line = turf.lineString([[1, 1], [1, 3], [1, 4]]);
 
-  //addToMap
-  var addToMap = { point1, point2, line };
   point1.properties["marker-color"] = "#f00";
   point2.properties["marker-color"] = "#0f0";
-  // jsdoc example end
 
-  return <ExampleMap addToMap={addToMap} />;
+  return <ExampleMap addToMap={{ point1, point2, line }} />;
 }
-
-<BrowserOnly>{() => <Map0 />}</BrowserOnly>
+```
 
 ### Installation
 

docs/api/buffer.mdx

@@ -42,21 +42,16 @@ var point = turf.point([-90.54863, 14.616599]);
 var buffered = turf.buffer(point, 500, { units: "miles" });
 ```
 
-export function Map0() {
-  "use strict";
-
-  // jsdoc example start
+```javascript live
+function Map() {
   var point = turf.point([-90.54863, 14.616599]);
   var buffered = turf.buffer(point, 500, { units: "miles" });
 
-  //addToMap
-  var addToMap = { point, buffered };
-  // jsdoc example end
+  console.log('buffered', buffered);
 
-  return <ExampleMap addToMap={addToMap} />;
+  return <ExampleMap addToMap={{ point, buffered }} />;
 }
-
-<BrowserOnly>{() => <Map0 />}</BrowserOnly>
+```
 
 ### Installation
 

docs/api/center.mdx

@@ -41,28 +41,21 @@ var features = turf.points([
 var center = turf.center(features);
 ```
 
-export function Map0() {
-  "use strict";
-
-  // jsdoc example start
+```javascript live
+function Map() {
   var features = turf.points([
     [-97.522259, 35.4691],
     [-97.502754, 35.463455],
     [-97.508269, 35.463245],
   ]);
 
   var center = turf.center(features);
-
-  //addToMap
-  var addToMap = { features, center };
   center.properties["marker-size"] = "large";
   center.properties["marker-color"] = "#000";
-  // jsdoc example end
 
-  return <ExampleMap addToMap={addToMap} />;
+  return <ExampleMap addToMap={{ features, center }} />;
 }
-
-<BrowserOnly>{() => <Map0 />}</BrowserOnly>
+```
 
 ### Installation
 

docs/api/centerMean.mdx

@@ -43,10 +43,8 @@ var options = { weight: "value" };
 var mean = turf.centerMean(features, options);
 ```
 
-export function Map0() {
-  "use strict";
-
-  // jsdoc example start
+```javascript live
+function Map() {
   var features = turf.featureCollection([
     turf.point([-97.522259, 35.4691], { value: 10 }),
     turf.point([-97.502754, 35.463455], { value: 3 }),
@@ -55,17 +53,12 @@ export function Map0() {
 
   var options = { weight: "value" };
   var mean = turf.centerMean(features, options);
-
-  //addToMap
-  var addToMap = { features, mean };
   mean.properties["marker-size"] = "large";
   mean.properties["marker-color"] = "#000";
-  // jsdoc example end
 
-  return <ExampleMap addToMap={addToMap} />;
+  return <ExampleMap addToMap={{ features, mean }} />;
 }
-
-<BrowserOnly>{() => <Map0 />}</BrowserOnly>
+```
 
 ### Installation
 

docs/api/centerMedian.mdx

@@ -76,26 +76,22 @@ var points = turf.points([
 var medianCenter = turf.centerMedian(points);
 ```
 
-export function Map0() {
-  "use strict";
-
-  // jsdoc example start
+```javascript live
+function Map() {
   var points = turf.points([
     [0, 0],
     [1, 0],
     [0, 1],
-    [5, 8],
+    [5, 8]
   ]);
+
   var medianCenter = turf.centerMedian(points);
 
-  //addToMap
-  var addToMap = { points, medianCenter };
-  // jsdoc example end
+  console.log('medianCenter', medianCenter);
 
-  return <ExampleMap addToMap={addToMap} />;
+  return <ExampleMap addToMap={{ points, medianCenter }} />;
 }
-
-<BrowserOnly>{() => <Map0 />}</BrowserOnly>
+```
 
 ### Installation