diff --git a/docs/examples/_overview.md b/docs/examples/_overview.md
new file mode 100644
index 000000000..54bf50970
--- /dev/null
+++ b/docs/examples/_overview.md
@@ -0,0 +1,13 @@
+# Overview
+
+[Use leaflet render raster map](./leaflet.xyz.3857.md)
+
+<iframe src="../index.leaflet.xyz.3857.html" height="500px" width="100%" scrolling="no"></iframe>
+
+[Use Maplibre adjust opacity of the map](./maplibre.opacity.3857.md)
+
+<iframe src="../index.maplibre.opacity.3857.html" height="500px" width="100%" scrolling="no"></iframe>
+
+[Use Maplibre to load vector tiles](./maplibre.vector.3857.md)
+
+<iframe src="../index.maplibre.vector.3857.html" height="500px" width="100%" scrolling="no"></iframe>
diff --git a/docs/examples/index.leaflet.xyz.3857.html b/docs/examples/index.leaflet.xyz.3857.html
new file mode 100644
index 000000000..b87dfeb84
--- /dev/null
+++ b/docs/examples/index.leaflet.xyz.3857.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Leaflet WGS84 Basemaps Demo</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha384-cxOPjt7s7Iz04uaHJceBmS+qpjv2JkIHNVcuOrM+YHwZOmJGBXI00mdUXEq65HTH"
+    crossorigin="anonymous"></script>
+  <style>
+    html,
+    body {
+      height: 100%;
+      margin: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="map" style="width: 100%; height: 500px;"></div>
+  <script>
+    const startPos = [-40.5, 173];
+    const startZoom = 6;
+
+    const url = 'https://basemaps.linz.govt.nz/v1/tiles/aerial/WebMercatorQuad/{z}/{x}/{y}.webp?api=d01hep5551e30kxb7w85hck49tp';
+
+    const tiles = L.tileLayer(url, {
+      attribution: '<a href="https://www.linz.govt.nz/data/linz-data/linz-basemaps/data-attribution">LINZ CC BY 4.0 © Imagery Basemap contributors</a>'
+    });
+
+    L.map('map')
+      .addLayer(tiles)
+      .setView(startPos, startZoom);
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/docs/examples/index.maplibre.opacity.3857.html b/docs/examples/index.maplibre.opacity.3857.html
new file mode 100644
index 000000000..a6f2b0c2c
--- /dev/null
+++ b/docs/examples/index.maplibre.opacity.3857.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Adjust a layer's opacity</title>
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.css' />
+    <script src="https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.js"
+        integrity="sha384-EYXW8ZhnlWPofZd2XtrFMKIJZXd8x1vTls280ww621jL26+4304H6YXxvU6RcKYd"
+        crossorigin="anonymous"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        body * {
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        .map {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+        }
+
+        .map-overlay {
+            font: bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+            position: absolute;
+            width: 25%;
+            top: 0;
+            left: 0;
+            padding: 10px;
+        }
+
+        .map-overlay .map-overlay-inner {
+            background-color: #fff;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+            border-radius: 3px;
+            padding: 10px;
+            margin-bottom: 10px;
+        }
+
+        .map-overlay label {
+            display: block;
+            margin: 0 0 10px;
+        }
+
+        .map-overlay input {
+            background-color: transparent;
+            display: inline-block;
+            width: 100%;
+            position: relative;
+            margin: 0;
+            cursor: ew-resize;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="raster" class="map"></div>
+    <div id="vector" class="map"></div>
+
+    <div class="map-overlay top">
+        <div class="map-overlay-inner">
+            <label>Layer opacity: <span id="slider-value">100%</span></label>
+            <input id="slider" type="range" min="0" max="100" step="0" value="100" />
+        </div>
+    </div>
+
+    <script>
+        // vector layers
+        const styleUrl =
+            'https://basemaps.linz.govt.nz/v1/tiles/topographic/WebMercatorQuad/style/topographic.json?api=d01hep5551e30kxb7w85hck49tp';
+
+        // Raster layers
+        const url = 'https://basemaps.linz.govt.nz/v1/tiles/aerial/WebMercatorQuad/{z}/{x}/{y}.webp?api=d01hep5551e30kxb7w85hck49tp';
+
+        const startPos = [173, -40.5];
+        const startZoom = 6;
+
+        var raster = new maplibregl.Map({
+            container: 'raster', // Container ID
+            style: {
+                version: 8,
+                sources: {
+                    'raster-tiles': {
+                        type: 'raster',
+                        tiles: [url],
+                        tileSize: 256,
+                    },
+                },
+                layers: [
+                    {
+                        id: 'LINZ Raster Basemaps',
+                        type: 'raster',
+                        source: 'raster-tiles',
+                    },
+                ],
+            },
+            center: startPos,
+            zoom: startZoom,
+        });
+
+        var vector = new maplibregl.Map({
+            container: 'vector', // Container ID
+            style: styleUrl,
+            center: startPos,
+            zoom: startZoom,
+        });
+
+        var slider = document.getElementById('slider');
+        var sliderValue = document.getElementById('slider-value');
+
+        vector.on('load', function () {
+            slider.addEventListener('input', function (e) {
+                var vectorMap = document.querySelector('#vector');
+                vectorMap.style.opacity = parseInt(e.target.value, 10) / 100;
+                sliderValue.textContent = e.target.value + '%';
+            });
+        });
+
+        // Copyright (c) 2016, Mapbox - ISC License
+        // https://github.com/mapbox/mapbox-gl-sync-move
+        function moveToMapPosition(master, clones) {
+            let center = master.getCenter();
+            let zoom = master.getZoom();
+            let bearing = master.getBearing();
+            let pitch = master.getPitch();
+
+            clones.forEach(function (clone) {
+                clone.jumpTo({
+                    center: center,
+                    zoom: zoom,
+                    bearing: bearing,
+                    pitch: pitch,
+                });
+            });
+        }
+
+        // Sync movements of two maps.
+        //
+        // All interactions that result in movement end up firing
+        // a "move" event. The trick here, though, is to
+        // ensure that movements don't cycle from one map
+        // to the other and back again, because such a cycle
+        // - could cause an infinite loop
+        // - prematurely halts prolonged movements like
+        //   double-click zooming, box-zooming, and flying
+        function syncMaps() {
+            let maps;
+            let argLen = arguments.length;
+            if (argLen === 1) {
+                maps = arguments[0];
+            } else {
+                maps = [];
+                for (let i = 0; i < argLen; i++) {
+                    maps.push(arguments[i]);
+                }
+            }
+
+            // Create all the movement functions, because if they're created every time
+            // they wouldn't be the same and couldn't be removed.
+            let fns = [];
+            maps.forEach(function (map, index) {
+                fns[index] = sync.bind(
+                    null,
+                    map,
+                    maps.filter(function (o, i) {
+                        return i !== index;
+                    }),
+                );
+            });
+
+            function on() {
+                maps.forEach(function (map, index) {
+                    map.on('move', fns[index]);
+                });
+            }
+
+            function off() {
+                maps.forEach(function (map, index) {
+                    map.off('move', fns[index]);
+                });
+            }
+
+            // When one map moves, we turn off the movement listeners
+            // on all the maps, move it, then turn the listeners on again
+            function sync(master, clones) {
+                off();
+                moveToMapPosition(master, clones);
+                on();
+            }
+
+            on();
+            return function () {
+                off();
+                fns = [];
+                maps = [];
+            };
+        }
+
+        syncMaps(raster, vector);
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/docs/examples/index.maplibre.vector.3857.html b/docs/examples/index.maplibre.vector.3857.html
new file mode 100644
index 000000000..4d8f5dbf7
--- /dev/null
+++ b/docs/examples/index.maplibre.vector.3857.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Maplibre WGS84 Topographic Vector Basemaps Demo</title>
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.css' />
+    <script src="https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.js"
+        integrity="sha384-EYXW8ZhnlWPofZd2XtrFMKIJZXd8x1vTls280ww621jL26+4304H6YXxvU6RcKYd"
+        crossorigin="anonymous"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        #map {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="map"></div>
+    <script>
+        const startPos = [173, -40.5];
+        const startZoom = 6;
+
+        // vector layers
+        const style =
+            'https://basemaps.linz.govt.nz/v1/tiles/topographic/WebMercatorQuad/style/topographic.json?api=d01hep5551e30kxb7w85hck49tp';
+        var map = new maplibregl.Map({
+            container: 'map', // container id
+            style: style, // style URL
+            center: startPos, // starting position [lng, lat]
+            zoom: startZoom, // starting zoom
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/docs/examples/leaflet.xyz.3857.md b/docs/examples/leaflet.xyz.3857.md
new file mode 100644
index 000000000..c85f48921
--- /dev/null
+++ b/docs/examples/leaflet.xyz.3857.md
@@ -0,0 +1,9 @@
+# Leaflet Raster Map
+
+Use leaflet render raster map
+
+<iframe src="../index.leaflet.xyz.3857.html" height="500px" width="100%" scrolling="no"></iframe>
+
+```html
+--8<-- "examples/index.leaflet.xyz.3857.html"
+```
\ No newline at end of file
diff --git a/docs/examples/maplibre.opacity.3857.md b/docs/examples/maplibre.opacity.3857.md
new file mode 100644
index 000000000..e88a9ca9e
--- /dev/null
+++ b/docs/examples/maplibre.opacity.3857.md
@@ -0,0 +1,9 @@
+# Maplibre Opacity Slider
+
+Use Maplibre adjust opacity of the map
+
+<iframe src="../index.maplibre.opacity.3857.html" height="500px" width="100%" scrolling="no"></iframe>
+
+```html
+--8<-- "examples/index.maplibre.opacity.3857.html"
+```
\ No newline at end of file
diff --git a/docs/examples/maplibre.vector.3857.md b/docs/examples/maplibre.vector.3857.md
new file mode 100644
index 000000000..e64a97448
--- /dev/null
+++ b/docs/examples/maplibre.vector.3857.md
@@ -0,0 +1,9 @@
+# Maplibre Vector Map
+
+Use Maplibre to load vector tiles
+
+<iframe src="../index.maplibre.vector.3857.html" height="500px" width="100%" scrolling="no"></iframe>
+
+```html
+--8<-- "examples/index.maplibre.vector.3857.html"
+```
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index 27f550db7..daced6bd9 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -35,6 +35,7 @@ theme:
 
   features:
     - navigation.indexes
+    - content.code.copy
 
 extra_css:
   - "index.css"
@@ -48,8 +49,9 @@ markdown_extensions:
       pygments_lang_class: true
   # Additional syntax highlighting
   - pymdownx.inlinehilite
-  # Copy / paste to code blocks
-  - pymdownx.snippets
+  - pymdownx.snippets:
+      base_path: 'docs'
+      check_paths: true
 
   # Adds inline notes with `!!! note`
   #
@@ -70,4 +72,4 @@ markdown_extensions:
 extra:
   analytics:
     provider: google
-    property: !ENV [GOOGLE_ANALYTICS]
+    property: !ENV [GOOGLE_ANALYTICS]
\ No newline at end of file
