Added example image for dynamic maps

docs/README.md

@@ -28,14 +28,18 @@ tagline: Maps in minutes. Powered by the Mapbox API.
 actionText: Get Started →
 actionLink: /getting-started/
 features:
-- title: Address Field
-  details: Provides a powerful and customizable Address field to store location data.
 - title: Dynamic Maps
   details: Get all the richness of the Mapbox API using simple, chainable methods.
+- title: Address Field
+  details: Provides a powerful and customizable Address field to store location data.
 - title: Universal API
   details: Use the same methods to build a map, whether it's in JavaScript, Twig, or PHP.
 ---
 
+<p align="center">
+    <a href="/mapbox/dynamic-maps"><img class="dropshadow" :src="$withBase('/images/maps/example.png')" alt="Example of a generated map, showing a popup and differently colored markers" width="850"></a>
+</p>
+
 ---
 ---
 

docs/dynamic-maps/README.md

@@ -1,5 +1,26 @@
 ---
 description: Create a dynamic map quickly, then chain additional commands to further customize it. The same chainable commands are available in JS, Twig, and PHP.
+meta:
+  - property: og:type
+    content: website
+  - property: og:url
+    content: https://plugins.doublesecretagency.com/mapbox/dynamic-maps/
+  - property: og:title
+    content: Dynamic Maps | Mapbox plugin for Craft CMS
+  - property: og:description
+    content: Create a dynamic map quickly, then chain additional commands to further customize it. The same chainable commands are available in JS, Twig, and PHP.
+  - property: og:image
+    content: https://plugins.doublesecretagency.com/mapbox/images/maps/example.png
+  - property: twitter:card
+    content: summary_large_image
+  - property: twitter:url
+    content: https://plugins.doublesecretagency.com/mapbox/dynamic-maps/
+  - property: twitter:title
+    content: Dynamic Maps | Mapbox plugin for Craft CMS
+  - property: twitter:description
+    content: Create a dynamic map quickly, then chain additional commands to further customize it. The same chainable commands are available in JS, Twig, and PHP.
+  - property: twitter:image
+    content: https://plugins.doublesecretagency.com/mapbox/images/maps/example.png
 ---
 
 # Dynamic Maps
@@ -9,6 +30,10 @@ We've designed this plugin to be a universally helpful tool, regardless of which
  - The [Universal API](/dynamic-maps/universal-api/) provides a harmonious way to manipulate your maps across languages.
  - [Chaining](/dynamic-maps/chaining/) allows you to quickly customize maps in the most flexible possible way. 
 
+<p align="center">
+    <img class="dropshadow" :src="$withBase('/images/maps/example.png')" alt="Example of a generated map, showing a popup and differently colored markers" width="850">
+</p>
+
 ## Creating a Map in Twig
 
 Here's a straightforward example of how you might create a simple dynamic map in Twig...