diff --git a/dist/index.html b/dist/index.html
index 65f8192b..6c65b53a 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -4185,6 +4185,109 @@ <h4 class="card-header">
           </div>
         </div>
 
+        <div
+          class="card"
+          id="card-map-type-hybrid"
+          onclick="
+            setSource(
+              event,
+              './samples/map-type-hybrid/highlight/highlight.html',
+              'Map Type Hybrid',
+              'map-type-hybrid',
+              this,
+            )
+          "
+        >
+          <h4 class="card-header">
+            Map Type Hybrid <span class="subheader">(map-type-hybrid)</span>
+          </h4>
+          <div class="card-description">
+            Initialize a map with the hybrid satellite view and use the built-in
+            map type control to switch between roadmap and satellite.
+          </div>
+          <div class="card-footer">
+            <button
+              class="button"
+              onclick="
+                setSource(
+                  event,
+                  './samples/map-type-hybrid/highlight/highlight.html',
+                  'Map Type Hybrid',
+                  'map-type-hybrid',
+                  this,
+                )
+              "
+            >
+              Highlight
+            </button>
+            <button
+              class="button"
+              onclick="
+                setSource(
+                  event,
+                  './samples/map-type-hybrid/iframe/index.html',
+                  'Map Type Hybrid',
+                  'map-type-hybrid',
+                  this,
+                )
+              "
+            >
+              Iframe
+            </button>
+            <button
+              class="button"
+              onclick="
+                setSource(
+                  event,
+                  './samples/map-type-hybrid/app/dist/index.html',
+                  'Map Type Hybrid',
+                  'map-type-hybrid',
+                  this,
+                )
+              "
+            >
+              App
+            </button>
+            <button class="button">
+              <div class="buttonIcon codesandbox"></div>
+              <a
+                target="_blank"
+                href="https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/map-type-hybrid/app?file=index.ts"
+              >
+                CodeSandbox
+              </a>
+            </button>
+
+            <button class="button">
+              <div class="buttonIcon stackblitz"></div>
+              <a
+                target="_blank"
+                href="https://stackblitz.com/github/woosmap/js-samples/tree/master/dist/samples/map-type-hybrid/app?file=index.ts"
+              >
+                StackBlitz
+              </a>
+            </button>
+
+            <button class="button">
+              <div class="buttonIcon jsfiddle"></div>
+              <a
+                target="_blank"
+                href="https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/map-type-hybrid/jsfiddle"
+              >
+                JsFiddle
+              </a>
+            </button>
+
+            <button class="button">
+              <a
+                target="_blank"
+                href="https://github.com/woosmap/js-samples/tree/master/samples/map-type-hybrid"
+                >Code</a
+              >
+            </button>
+          </div>
+        </div>
+
         <div
           class="card"
           id="card-marker-click-event"
diff --git a/dist/samples/map-type-hybrid/app/.eslintrc.json b/dist/samples/map-type-hybrid/app/.eslintrc.json
new file mode 100644
index 00000000..841a372a
--- /dev/null
+++ b/dist/samples/map-type-hybrid/app/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-this-alias": 1,
+    "@typescript-eslint/no-empty-function": 1,
+    "@typescript-eslint/explicit-module-boundary-types": 1,
+    "@typescript-eslint/no-unused-vars": 1
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/map-type-hybrid/app/.gitignore b/dist/samples/map-type-hybrid/app/.gitignore
new file mode 100644
index 00000000..10ec7666
--- /dev/null
+++ b/dist/samples/map-type-hybrid/app/.gitignore
@@ -0,0 +1,4 @@
+
+node_modules
+dist
+package-lock.json
diff --git a/dist/samples/map-type-hybrid/app/README.md b/dist/samples/map-type-hybrid/app/README.md
new file mode 100644
index 00000000..621b1288
--- /dev/null
+++ b/dist/samples/map-type-hybrid/app/README.md
@@ -0,0 +1,17 @@
+# Woosmap JavaScript Sample
+
+This sample is generated from @woosmap/js-samples located at
+https://github.com/woosmap/js-samples.
+
+## Setup
+
+```sh
+npm i
+npm start  # development
+npm run build  # production
+```
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/woosmap/js-samples/issues).
diff --git a/dist/samples/map-type-hybrid/app/env.d.ts b/dist/samples/map-type-hybrid/app/env.d.ts
new file mode 100644
index 00000000..181e6cdc
--- /dev/null
+++ b/dist/samples/map-type-hybrid/app/env.d.ts
@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+/**
+ *  @external https://vitejs.dev/guide/env-and-mode.html
+ */
+interface ImportMetaEnv {
+  readonly VITE_WOOSMAP_PUBLIC_API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/dist/samples/map-type-hybrid/app/index.html b/dist/samples/map-type-hybrid/app/index.html
new file mode 100644
index 00000000..108176b8
--- /dev/null
+++ b/dist/samples/map-type-hybrid/app/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Map Type Hybrid</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8" />
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.ts"></script>
+  </head>
+  <body>
+    <!--The div element for the map -->
+    <div id="map"></div>
+
+    <script
+      src="https://sdk.woosmap.com/map/map.js?key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&callback=initMap"
+      defer
+    ></script>
+  </body>
+</html>
diff --git a/dist/samples/map-type-hybrid/app/index.ts b/dist/samples/map-type-hybrid/app/index.ts
new file mode 100644
index 00000000..b0de25bd
--- /dev/null
+++ b/dist/samples/map-type-hybrid/app/index.ts
@@ -0,0 +1,31 @@
+// Initialize and add the map with hybrid (satellite) map type
+let map: woosmap.map.Map;
+
+function initMap(): void {
+  const position: woosmap.map.LatLngLiteral = {
+    lat: 48.8584,
+    lng: 2.2945,
+  };
+
+  // The map, initialized with hybrid satellite view
+  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+    zoom: 16,
+    center: position,
+    mapTypeId: woosmap.map.MapTypeId.HYBRID,
+    mapTypeControl: true,
+  });
+
+  // Listen for map type changes via the built-in control
+  map.addListener("mapTypeId_changed", () => {
+    console.log("Map type switched to:", map.getMapTypeId());
+  });
+}
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/map-type-hybrid/app/package.json b/dist/samples/map-type-hybrid/app/package.json
new file mode 100644
index 00000000..eed6247a
--- /dev/null
+++ b/dist/samples/map-type-hybrid/app/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "map-type-hybrid",
+  "description": "Samples for Woosmap Map JS API",
+  "version": "1.45.2",
+  "keywords": [
+    "woosmap",
+    "javascript",
+    "map"
+  ],
+  "homepage": "https://github.com/woosmap/js-samples#readme",
+  "bugs": {
+    "url": "https://github.com/woosmap/js-samples/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/woosmap/js-samples.git"
+  },
+  "files": [],
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build --outDir dist --base './'",
+    "test": "tsc --no-emit",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/woosmap.map": "^1.4.24",
+    "typescript": "^5.3.3",
+    "vite": "^6.4.1"
+  },
+  "dependencies": {}
+}
\ No newline at end of file
diff --git a/dist/samples/map-type-hybrid/app/style.css b/dist/samples/map-type-hybrid/app/style.css
new file mode 100644
index 00000000..02dace4d
--- /dev/null
+++ b/dist/samples/map-type-hybrid/app/style.css
@@ -0,0 +1,19 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
diff --git a/dist/samples/map-type-hybrid/app/tsconfig.json b/dist/samples/map-type-hybrid/app/tsconfig.json
new file mode 100644
index 00000000..b405998d
--- /dev/null
+++ b/dist/samples/map-type-hybrid/app/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "target": "esnext",
+    "strict": true,
+    "noImplicitAny": false,
+    "lib": [
+      "esnext",
+      "es6",
+      "dom",
+      "dom.iterable"
+    ],
+    "moduleResolution": "Node",
+    "jsx": "preserve"
+  }
+}
\ No newline at end of file
diff --git a/dist/samples/map-type-hybrid/app/vite.config.js b/dist/samples/map-type-hybrid/app/vite.config.js
new file mode 100644
index 00000000..803ecc26
--- /dev/null
+++ b/dist/samples/map-type-hybrid/app/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    hmr: process.env.CODESANDBOX_SSE ? 443 : undefined,
+  },
+});
diff --git a/dist/samples/map-type-hybrid/docs/index.html b/dist/samples/map-type-hybrid/docs/index.html
new file mode 100644
index 00000000..42621648
--- /dev/null
+++ b/dist/samples/map-type-hybrid/docs/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- [START woosmap_map_type_hybrid] -->
+<html>
+  <head>
+    <title>Map Type Hybrid</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8" />
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <!--The div element for the map -->
+    <div id="map"></div>
+
+    <script
+      src="https://sdk.woosmap.com/map/map.js?key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&callback=initMap"
+      defer
+    ></script>
+  </body>
+</html>
+<!-- [END woosmap_map_type_hybrid] -->
diff --git a/dist/samples/map-type-hybrid/docs/index.js b/dist/samples/map-type-hybrid/docs/index.js
new file mode 100644
index 00000000..ad9c219f
--- /dev/null
+++ b/dist/samples/map-type-hybrid/docs/index.js
@@ -0,0 +1,25 @@
+// [START woosmap_map_type_hybrid]
+// Initialize and add the map with hybrid (satellite) map type
+let map;
+
+function initMap() {
+  const position = {
+    lat: 48.8584,
+    lng: 2.2945,
+  };
+
+  // The map, initialized with hybrid satellite view
+  map = new woosmap.map.Map(document.getElementById("map"), {
+    zoom: 16,
+    center: position,
+    mapTypeId: woosmap.map.MapTypeId.HYBRID,
+    mapTypeControl: true,
+  });
+  // Listen for map type changes via the built-in control
+  map.addListener("mapTypeId_changed", () => {
+    console.log("Map type switched to:", map.getMapTypeId());
+  });
+}
+
+window.initMap = initMap;
+// [END woosmap_map_type_hybrid]
diff --git a/dist/samples/map-type-hybrid/docs/index.ts b/dist/samples/map-type-hybrid/docs/index.ts
new file mode 100644
index 00000000..24715217
--- /dev/null
+++ b/dist/samples/map-type-hybrid/docs/index.ts
@@ -0,0 +1,33 @@
+// [START woosmap_map_type_hybrid]
+// Initialize and add the map with hybrid (satellite) map type
+let map: woosmap.map.Map;
+
+function initMap(): void {
+  const position: woosmap.map.LatLngLiteral = {
+    lat: 48.8584,
+    lng: 2.2945,
+  };
+
+  // The map, initialized with hybrid satellite view
+  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+    zoom: 16,
+    center: position,
+    mapTypeId: woosmap.map.MapTypeId.HYBRID,
+    mapTypeControl: true,
+  });
+
+  // Listen for map type changes via the built-in control
+  map.addListener("mapTypeId_changed", () => {
+    console.log("Map type switched to:", map.getMapTypeId());
+  });
+}
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+// [END woosmap_map_type_hybrid]
+
+export {};
diff --git a/dist/samples/map-type-hybrid/docs/style.css b/dist/samples/map-type-hybrid/docs/style.css
new file mode 100644
index 00000000..f7b3bda9
--- /dev/null
+++ b/dist/samples/map-type-hybrid/docs/style.css
@@ -0,0 +1,21 @@
+/* [START woosmap_map_type_hybrid] */
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+/* [END woosmap_map_type_hybrid] */
\ No newline at end of file
diff --git a/dist/samples/map-type-hybrid/highlight/highlight.html b/dist/samples/map-type-hybrid/highlight/highlight.html
new file mode 100644
index 00000000..730c4f64
--- /dev/null
+++ b/dist/samples/map-type-hybrid/highlight/highlight.html
@@ -0,0 +1,1597 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Highlight</title>
+    <script>
+      var _self =
+          "undefined" != typeof window
+            ? window
+            : "undefined" != typeof WorkerGlobalScope &&
+                self instanceof WorkerGlobalScope
+              ? self
+              : {},
+        Prism = (function (e) {
+          var n = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,
+            t = 0,
+            r = {},
+            a = {
+              manual: e.Prism && e.Prism.manual,
+              disableWorkerMessageHandler:
+                e.Prism && e.Prism.disableWorkerMessageHandler,
+              util: {
+                encode: function e(n) {
+                  return n instanceof i
+                    ? new i(n.type, e(n.content), n.alias)
+                    : Array.isArray(n)
+                      ? n.map(e)
+                      : n
+                          .replace(/&/g, "&amp;")
+                          .replace(/</g, "&lt;")
+                          .replace(/\u00a0/g, " ");
+                },
+                type: function (e) {
+                  return Object.prototype.toString.call(e).slice(8, -1);
+                },
+                objId: function (e) {
+                  return (
+                    e.__id || Object.defineProperty(e, "__id", { value: ++t }),
+                    e.__id
+                  );
+                },
+                clone: function e(n, t) {
+                  var r, i;
+                  switch (((t = t || {}), a.util.type(n))) {
+                    case "Object":
+                      if (((i = a.util.objId(n)), t[i])) return t[i];
+                      for (var l in ((r = {}), (t[i] = r), n))
+                        n.hasOwnProperty(l) && (r[l] = e(n[l], t));
+                      return r;
+                    case "Array":
+                      return (
+                        (i = a.util.objId(n)),
+                        t[i]
+                          ? t[i]
+                          : ((r = []),
+                            (t[i] = r),
+                            n.forEach(function (n, a) {
+                              r[a] = e(n, t);
+                            }),
+                            r)
+                      );
+                    default:
+                      return n;
+                  }
+                },
+                getLanguage: function (e) {
+                  for (; e; ) {
+                    var t = n.exec(e.className);
+                    if (t) return t[1].toLowerCase();
+                    e = e.parentElement;
+                  }
+                  return "none";
+                },
+                setLanguage: function (e, t) {
+                  ((e.className = e.className.replace(RegExp(n, "gi"), "")),
+                    e.classList.add("language-" + t));
+                },
+                currentScript: function () {
+                  if ("undefined" == typeof document) return null;
+                  if ("currentScript" in document)
+                    return document.currentScript;
+                  try {
+                    throw new Error();
+                  } catch (r) {
+                    var e = (/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(
+                      r.stack,
+                    ) || [])[1];
+                    if (e) {
+                      var n = document.getElementsByTagName("script");
+                      for (var t in n) if (n[t].src == e) return n[t];
+                    }
+                    return null;
+                  }
+                },
+                isActive: function (e, n, t) {
+                  for (var r = "no-" + n; e; ) {
+                    var a = e.classList;
+                    if (a.contains(n)) return !0;
+                    if (a.contains(r)) return !1;
+                    e = e.parentElement;
+                  }
+                  return !!t;
+                },
+              },
+              languages: {
+                plain: r,
+                plaintext: r,
+                text: r,
+                txt: r,
+                extend: function (e, n) {
+                  var t = a.util.clone(a.languages[e]);
+                  for (var r in n) t[r] = n[r];
+                  return t;
+                },
+                insertBefore: function (e, n, t, r) {
+                  var i = (r = r || a.languages)[e],
+                    l = {};
+                  for (var o in i)
+                    if (i.hasOwnProperty(o)) {
+                      if (o == n)
+                        for (var s in t) t.hasOwnProperty(s) && (l[s] = t[s]);
+                      t.hasOwnProperty(o) || (l[o] = i[o]);
+                    }
+                  var u = r[e];
+                  return (
+                    (r[e] = l),
+                    a.languages.DFS(a.languages, function (n, t) {
+                      t === u && n != e && (this[n] = l);
+                    }),
+                    l
+                  );
+                },
+                DFS: function e(n, t, r, i) {
+                  i = i || {};
+                  var l = a.util.objId;
+                  for (var o in n)
+                    if (n.hasOwnProperty(o)) {
+                      t.call(n, o, n[o], r || o);
+                      var s = n[o],
+                        u = a.util.type(s);
+                      "Object" !== u || i[l(s)]
+                        ? "Array" !== u ||
+                          i[l(s)] ||
+                          ((i[l(s)] = !0), e(s, t, o, i))
+                        : ((i[l(s)] = !0), e(s, t, null, i));
+                    }
+                },
+              },
+              plugins: {},
+              highlightAll: function (e, n) {
+                a.highlightAllUnder(document, e, n);
+              },
+              highlightAllUnder: function (e, n, t) {
+                var r = {
+                  callback: t,
+                  container: e,
+                  selector:
+                    'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code',
+                };
+                (a.hooks.run("before-highlightall", r),
+                  (r.elements = Array.prototype.slice.apply(
+                    r.container.querySelectorAll(r.selector),
+                  )),
+                  a.hooks.run("before-all-elements-highlight", r));
+                for (var i, l = 0; (i = r.elements[l++]); )
+                  a.highlightElement(i, !0 === n, r.callback);
+              },
+              highlightElement: function (n, t, r) {
+                var i = a.util.getLanguage(n),
+                  l = a.languages[i];
+                a.util.setLanguage(n, i);
+                var o = n.parentElement;
+                o &&
+                  "pre" === o.nodeName.toLowerCase() &&
+                  a.util.setLanguage(o, i);
+                var s = {
+                  element: n,
+                  language: i,
+                  grammar: l,
+                  code: n.textContent,
+                };
+                function u(e) {
+                  ((s.highlightedCode = e),
+                    a.hooks.run("before-insert", s),
+                    (s.element.innerHTML = s.highlightedCode),
+                    a.hooks.run("after-highlight", s),
+                    a.hooks.run("complete", s),
+                    r && r.call(s.element));
+                }
+                if (
+                  (a.hooks.run("before-sanity-check", s),
+                  (o = s.element.parentElement) &&
+                    "pre" === o.nodeName.toLowerCase() &&
+                    !o.hasAttribute("tabindex") &&
+                    o.setAttribute("tabindex", "0"),
+                  !s.code)
+                )
+                  return (
+                    a.hooks.run("complete", s),
+                    void (r && r.call(s.element))
+                  );
+                if ((a.hooks.run("before-highlight", s), s.grammar))
+                  if (t && e.Worker) {
+                    var c = new Worker(a.filename);
+                    ((c.onmessage = function (e) {
+                      u(e.data);
+                    }),
+                      c.postMessage(
+                        JSON.stringify({
+                          language: s.language,
+                          code: s.code,
+                          immediateClose: !0,
+                        }),
+                      ));
+                  } else u(a.highlight(s.code, s.grammar, s.language));
+                else u(a.util.encode(s.code));
+              },
+              highlight: function (e, n, t) {
+                var r = { code: e, grammar: n, language: t };
+                if ((a.hooks.run("before-tokenize", r), !r.grammar))
+                  throw new Error(
+                    'The language "' + r.language + '" has no grammar.',
+                  );
+                return (
+                  (r.tokens = a.tokenize(r.code, r.grammar)),
+                  a.hooks.run("after-tokenize", r),
+                  i.stringify(a.util.encode(r.tokens), r.language)
+                );
+              },
+              tokenize: function (e, n) {
+                var t = n.rest;
+                if (t) {
+                  for (var r in t) n[r] = t[r];
+                  delete n.rest;
+                }
+                var a = new s();
+                return (
+                  u(a, a.head, e),
+                  o(e, a, n, a.head, 0),
+                  (function (e) {
+                    for (var n = [], t = e.head.next; t !== e.tail; )
+                      (n.push(t.value), (t = t.next));
+                    return n;
+                  })(a)
+                );
+              },
+              hooks: {
+                all: {},
+                add: function (e, n) {
+                  var t = a.hooks.all;
+                  ((t[e] = t[e] || []), t[e].push(n));
+                },
+                run: function (e, n) {
+                  var t = a.hooks.all[e];
+                  if (t && t.length) for (var r, i = 0; (r = t[i++]); ) r(n);
+                },
+              },
+              Token: i,
+            };
+          function i(e, n, t, r) {
+            ((this.type = e),
+              (this.content = n),
+              (this.alias = t),
+              (this.length = 0 | (r || "").length));
+          }
+          function l(e, n, t, r) {
+            e.lastIndex = n;
+            var a = e.exec(t);
+            if (a && r && a[1]) {
+              var i = a[1].length;
+              ((a.index += i), (a[0] = a[0].slice(i)));
+            }
+            return a;
+          }
+          function o(e, n, t, r, s, g) {
+            for (var f in t)
+              if (t.hasOwnProperty(f) && t[f]) {
+                var h = t[f];
+                h = Array.isArray(h) ? h : [h];
+                for (var d = 0; d < h.length; ++d) {
+                  if (g && g.cause == f + "," + d) return;
+                  var v = h[d],
+                    p = v.inside,
+                    m = !!v.lookbehind,
+                    y = !!v.greedy,
+                    k = v.alias;
+                  if (y && !v.pattern.global) {
+                    var x = v.pattern.toString().match(/[imsuy]*$/)[0];
+                    v.pattern = RegExp(v.pattern.source, x + "g");
+                  }
+                  for (
+                    var b = v.pattern || v, w = r.next, A = s;
+                    w !== n.tail && !(g && A >= g.reach);
+                    A += w.value.length, w = w.next
+                  ) {
+                    var E = w.value;
+                    if (n.length > e.length) return;
+                    if (!(E instanceof i)) {
+                      var P,
+                        L = 1;
+                      if (y) {
+                        if (!(P = l(b, A, e, m)) || P.index >= e.length) break;
+                        var S = P.index,
+                          O = P.index + P[0].length,
+                          j = A;
+                        for (j += w.value.length; S >= j; )
+                          j += (w = w.next).value.length;
+                        if (((A = j -= w.value.length), w.value instanceof i))
+                          continue;
+                        for (
+                          var C = w;
+                          C !== n.tail && (j < O || "string" == typeof C.value);
+                          C = C.next
+                        )
+                          (L++, (j += C.value.length));
+                        (L--, (E = e.slice(A, j)), (P.index -= A));
+                      } else if (!(P = l(b, 0, E, m))) continue;
+                      S = P.index;
+                      var N = P[0],
+                        _ = E.slice(0, S),
+                        M = E.slice(S + N.length),
+                        W = A + E.length;
+                      g && W > g.reach && (g.reach = W);
+                      var z = w.prev;
+                      if (
+                        (_ && ((z = u(n, z, _)), (A += _.length)),
+                        c(n, z, L),
+                        (w = u(n, z, new i(f, p ? a.tokenize(N, p) : N, k, N))),
+                        M && u(n, w, M),
+                        L > 1)
+                      ) {
+                        var I = { cause: f + "," + d, reach: W };
+                        (o(e, n, t, w.prev, A, I),
+                          g && I.reach > g.reach && (g.reach = I.reach));
+                      }
+                    }
+                  }
+                }
+              }
+          }
+          function s() {
+            var e = { value: null, prev: null, next: null },
+              n = { value: null, prev: e, next: null };
+            ((e.next = n), (this.head = e), (this.tail = n), (this.length = 0));
+          }
+          function u(e, n, t) {
+            var r = n.next,
+              a = { value: t, prev: n, next: r };
+            return ((n.next = a), (r.prev = a), e.length++, a);
+          }
+          function c(e, n, t) {
+            for (var r = n.next, a = 0; a < t && r !== e.tail; a++) r = r.next;
+            ((n.next = r), (r.prev = n), (e.length -= a));
+          }
+          if (
+            ((e.Prism = a),
+            (i.stringify = function e(n, t) {
+              if ("string" == typeof n) return n;
+              if (Array.isArray(n)) {
+                var r = "";
+                return (
+                  n.forEach(function (n) {
+                    r += e(n, t);
+                  }),
+                  r
+                );
+              }
+              var i = {
+                  type: n.type,
+                  content: e(n.content, t),
+                  tag: "span",
+                  classes: ["token", n.type],
+                  attributes: {},
+                  language: t,
+                },
+                l = n.alias;
+              (l &&
+                (Array.isArray(l)
+                  ? Array.prototype.push.apply(i.classes, l)
+                  : i.classes.push(l)),
+                a.hooks.run("wrap", i));
+              var o = "";
+              for (var s in i.attributes)
+                o +=
+                  " " +
+                  s +
+                  '="' +
+                  (i.attributes[s] || "").replace(/"/g, "&quot;") +
+                  '"';
+              return (
+                "<" +
+                i.tag +
+                ' class="' +
+                i.classes.join(" ") +
+                '"' +
+                o +
+                ">" +
+                i.content +
+                "</" +
+                i.tag +
+                ">"
+              );
+            }),
+            !e.document)
+          )
+            return e.addEventListener
+              ? (a.disableWorkerMessageHandler ||
+                  e.addEventListener(
+                    "message",
+                    function (n) {
+                      var t = JSON.parse(n.data),
+                        r = t.language,
+                        i = t.code,
+                        l = t.immediateClose;
+                      (e.postMessage(a.highlight(i, a.languages[r], r)),
+                        l && e.close());
+                    },
+                    !1,
+                  ),
+                a)
+              : a;
+          var g = a.util.currentScript();
+          function f() {
+            a.manual || a.highlightAll();
+          }
+          if (
+            (g &&
+              ((a.filename = g.src),
+              g.hasAttribute("data-manual") && (a.manual = !0)),
+            !a.manual)
+          ) {
+            var h = document.readyState;
+            "loading" === h || ("interactive" === h && g && g.defer)
+              ? document.addEventListener("DOMContentLoaded", f)
+              : window.requestAnimationFrame
+                ? window.requestAnimationFrame(f)
+                : window.setTimeout(f, 16);
+          }
+          return a;
+        })(_self);
+      ("undefined" != typeof module &&
+        module.exports &&
+        (module.exports = Prism),
+        "undefined" != typeof global && (global.Prism = Prism));
+      ((Prism.languages.markup = {
+        comment: { pattern: /<!--(?:(?!<!--)[\s\S])*?-->/, greedy: !0 },
+        prolog: { pattern: /<\?[\s\S]+?\?>/, greedy: !0 },
+        doctype: {
+          pattern:
+            /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,
+          greedy: !0,
+          inside: {
+            "internal-subset": {
+              pattern: /(^[^\[]*\[)[\s\S]+(?=\]>$)/,
+              lookbehind: !0,
+              greedy: !0,
+              inside: null,
+            },
+            string: { pattern: /"[^"]*"|'[^']*'/, greedy: !0 },
+            punctuation: /^<!|>$|[[\]]/,
+            "doctype-tag": /^DOCTYPE/i,
+            name: /[^\s<>'"]+/,
+          },
+        },
+        cdata: { pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i, greedy: !0 },
+        tag: {
+          pattern:
+            /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
+          greedy: !0,
+          inside: {
+            tag: {
+              pattern: /^<\/?[^\s>\/]+/,
+              inside: { punctuation: /^<\/?/, namespace: /^[^\s>\/:]+:/ },
+            },
+            "special-attr": [],
+            "attr-value": {
+              pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
+              inside: {
+                punctuation: [
+                  { pattern: /^=/, alias: "attr-equals" },
+                  { pattern: /^(\s*)["']|["']$/, lookbehind: !0 },
+                ],
+              },
+            },
+            punctuation: /\/?>/,
+            "attr-name": {
+              pattern: /[^\s>\/]+/,
+              inside: { namespace: /^[^\s>\/:]+:/ },
+            },
+          },
+        },
+        entity: [
+          { pattern: /&[\da-z]{1,8};/i, alias: "named-entity" },
+          /&#x?[\da-f]{1,8};/i,
+        ],
+      }),
+        (Prism.languages.markup.tag.inside["attr-value"].inside.entity =
+          Prism.languages.markup.entity),
+        (Prism.languages.markup.doctype.inside["internal-subset"].inside =
+          Prism.languages.markup),
+        Prism.hooks.add("wrap", function (a) {
+          "entity" === a.type &&
+            (a.attributes.title = a.content.replace(/&amp;/, "&"));
+        }),
+        Object.defineProperty(Prism.languages.markup.tag, "addInlined", {
+          value: function (a, e) {
+            var s = {};
+            ((s["language-" + e] = {
+              pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
+              lookbehind: !0,
+              inside: Prism.languages[e],
+            }),
+              (s.cdata = /^<!\[CDATA\[|\]\]>$/i));
+            var t = {
+              "included-cdata": {
+                pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+                inside: s,
+              },
+            };
+            t["language-" + e] = {
+              pattern: /[\s\S]+/,
+              inside: Prism.languages[e],
+            };
+            var n = {};
+            ((n[a] = {
+              pattern: RegExp(
+                "(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(
+                  /__/g,
+                  function () {
+                    return a;
+                  },
+                ),
+                "i",
+              ),
+              lookbehind: !0,
+              greedy: !0,
+              inside: t,
+            }),
+              Prism.languages.insertBefore("markup", "cdata", n));
+          },
+        }),
+        Object.defineProperty(Prism.languages.markup.tag, "addAttribute", {
+          value: function (a, e) {
+            Prism.languages.markup.tag.inside["special-attr"].push({
+              pattern: RegExp(
+                "(^|[\"'\\s])(?:" +
+                  a +
+                  ")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))",
+                "i",
+              ),
+              lookbehind: !0,
+              inside: {
+                "attr-name": /^[^\s=]+/,
+                "attr-value": {
+                  pattern: /=[\s\S]+/,
+                  inside: {
+                    value: {
+                      pattern: /(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
+                      lookbehind: !0,
+                      alias: [e, "language-" + e],
+                      inside: Prism.languages[e],
+                    },
+                    punctuation: [
+                      { pattern: /^=/, alias: "attr-equals" },
+                      /"|'/,
+                    ],
+                  },
+                },
+              },
+            });
+          },
+        }),
+        (Prism.languages.html = Prism.languages.markup),
+        (Prism.languages.mathml = Prism.languages.markup),
+        (Prism.languages.svg = Prism.languages.markup),
+        (Prism.languages.xml = Prism.languages.extend("markup", {})),
+        (Prism.languages.ssml = Prism.languages.xml),
+        (Prism.languages.atom = Prism.languages.xml),
+        (Prism.languages.rss = Prism.languages.xml));
+      !(function (s) {
+        var e =
+          /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
+        ((s.languages.css = {
+          comment: /\/\*[\s\S]*?\*\//,
+          atrule: {
+            pattern: RegExp(
+              "@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|" +
+                e.source +
+                ")*?(?:;|(?=\\s*\\{))",
+            ),
+            inside: {
+              rule: /^@[\w-]+/,
+              "selector-function-argument": {
+                pattern:
+                  /(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,
+                lookbehind: !0,
+                alias: "selector",
+              },
+              keyword: {
+                pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
+                lookbehind: !0,
+              },
+            },
+          },
+          url: {
+            pattern: RegExp(
+              "\\burl\\((?:" + e.source + "|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)",
+              "i",
+            ),
+            greedy: !0,
+            inside: {
+              function: /^url/i,
+              punctuation: /^\(|\)$/,
+              string: { pattern: RegExp("^" + e.source + "$"), alias: "url" },
+            },
+          },
+          selector: {
+            pattern: RegExp(
+              "(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|" +
+                e.source +
+                ")*(?=\\s*\\{)",
+            ),
+            lookbehind: !0,
+          },
+          string: { pattern: e, greedy: !0 },
+          property: {
+            pattern:
+              /(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,
+            lookbehind: !0,
+          },
+          important: /!important\b/i,
+          function: {
+            pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,
+            lookbehind: !0,
+          },
+          punctuation: /[(){};:,]/,
+        }),
+          (s.languages.css.atrule.inside.rest = s.languages.css));
+        var t = s.languages.markup;
+        t &&
+          (t.tag.addInlined("style", "css"),
+          t.tag.addAttribute("style", "css"));
+      })(Prism);
+      Prism.languages.clike = {
+        comment: [
+          {
+            pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
+            lookbehind: !0,
+            greedy: !0,
+          },
+          { pattern: /(^|[^\\:])\/\/.*/, lookbehind: !0, greedy: !0 },
+        ],
+        string: {
+          pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+          greedy: !0,
+        },
+        "class-name": {
+          pattern:
+            /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
+          lookbehind: !0,
+          inside: { punctuation: /[.\\]/ },
+        },
+        keyword:
+          /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
+        boolean: /\b(?:false|true)\b/,
+        function: /\b\w+(?=\()/,
+        number: /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
+        operator: /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
+        punctuation: /[{}[\];(),.:]/,
+      };
+      ((Prism.languages.javascript = Prism.languages.extend("clike", {
+        "class-name": [
+          Prism.languages.clike["class-name"],
+          {
+            pattern:
+              /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
+            lookbehind: !0,
+          },
+        ],
+        keyword: [
+          { pattern: /((?:^|\})\s*)catch\b/, lookbehind: !0 },
+          {
+            pattern:
+              /(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
+            lookbehind: !0,
+          },
+        ],
+        function:
+          /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
+        number: {
+          pattern: RegExp(
+            "(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])",
+          ),
+          lookbehind: !0,
+        },
+        operator:
+          /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/,
+      })),
+        (Prism.languages.javascript["class-name"][0].pattern =
+          /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/),
+        Prism.languages.insertBefore("javascript", "keyword", {
+          regex: {
+            pattern: RegExp(
+              "((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))",
+            ),
+            lookbehind: !0,
+            greedy: !0,
+            inside: {
+              "regex-source": {
+                pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
+                lookbehind: !0,
+                alias: "language-regex",
+                inside: Prism.languages.regex,
+              },
+              "regex-delimiter": /^\/|\/$/,
+              "regex-flags": /^[a-z]+$/,
+            },
+          },
+          "function-variable": {
+            pattern:
+              /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,
+            alias: "function",
+          },
+          parameter: [
+            {
+              pattern:
+                /(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,
+              lookbehind: !0,
+              inside: Prism.languages.javascript,
+            },
+            {
+              pattern:
+                /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,
+              lookbehind: !0,
+              inside: Prism.languages.javascript,
+            },
+            {
+              pattern:
+                /(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,
+              lookbehind: !0,
+              inside: Prism.languages.javascript,
+            },
+            {
+              pattern:
+                /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,
+              lookbehind: !0,
+              inside: Prism.languages.javascript,
+            },
+          ],
+          constant: /\b[A-Z](?:[A-Z_]|\dx?)*\b/,
+        }),
+        Prism.languages.insertBefore("javascript", "string", {
+          hashbang: { pattern: /^#!.*/, greedy: !0, alias: "comment" },
+          "template-string": {
+            pattern:
+              /`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,
+            greedy: !0,
+            inside: {
+              "template-punctuation": { pattern: /^`|`$/, alias: "string" },
+              interpolation: {
+                pattern:
+                  /((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,
+                lookbehind: !0,
+                inside: {
+                  "interpolation-punctuation": {
+                    pattern: /^\$\{|\}$/,
+                    alias: "punctuation",
+                  },
+                  rest: Prism.languages.javascript,
+                },
+              },
+              string: /[\s\S]+/,
+            },
+          },
+          "string-property": {
+            pattern:
+              /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
+            lookbehind: !0,
+            greedy: !0,
+            alias: "property",
+          },
+        }),
+        Prism.languages.insertBefore("javascript", "operator", {
+          "literal-property": {
+            pattern:
+              /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
+            lookbehind: !0,
+            alias: "property",
+          },
+        }),
+        Prism.languages.markup &&
+          (Prism.languages.markup.tag.addInlined("script", "javascript"),
+          Prism.languages.markup.tag.addAttribute(
+            "on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)",
+            "javascript",
+          )),
+        (Prism.languages.js = Prism.languages.javascript));
+      !(function (t) {
+        var n = t.util.clone(t.languages.javascript),
+          e = "(?:\\{<S>*\\.{3}(?:[^{}]|<BRACES>)*\\})";
+        function a(t, n) {
+          return (
+            (t = t
+              .replace(/<S>/g, function () {
+                return "(?:\\s|//.*(?!.)|/\\*(?:[^*]|\\*(?!/))\\*/)";
+              })
+              .replace(/<BRACES>/g, function () {
+                return "(?:\\{(?:\\{(?:\\{[^{}]*\\}|[^{}])*\\}|[^{}])*\\})";
+              })
+              .replace(/<SPREAD>/g, function () {
+                return e;
+              })),
+            RegExp(t, n)
+          );
+        }
+        ((e = a(e).source),
+          (t.languages.jsx = t.languages.extend("markup", n)),
+          (t.languages.jsx.tag.pattern = a(
+            "</?(?:[\\w.:-]+(?:<S>+(?:[\\w.:$-]+(?:=(?:\"(?:\\\\[^]|[^\\\\\"])*\"|'(?:\\\\[^]|[^\\\\'])*'|[^\\s{'\"/>=]+|<BRACES>))?|<SPREAD>))*<S>*/?)?>",
+          )),
+          (t.languages.jsx.tag.inside.tag.pattern = /^<\/?[^\s>\/]*/),
+          (t.languages.jsx.tag.inside["attr-value"].pattern =
+            /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/),
+          (t.languages.jsx.tag.inside.tag.inside["class-name"] =
+            /^[A-Z]\w*(?:\.[A-Z]\w*)*$/),
+          (t.languages.jsx.tag.inside.comment = n.comment),
+          t.languages.insertBefore(
+            "inside",
+            "attr-name",
+            { spread: { pattern: a("<SPREAD>"), inside: t.languages.jsx } },
+            t.languages.jsx.tag,
+          ),
+          t.languages.insertBefore(
+            "inside",
+            "special-attr",
+            {
+              script: {
+                pattern: a("=<BRACES>"),
+                alias: "language-javascript",
+                inside: {
+                  "script-punctuation": {
+                    pattern: /^=(?=\{)/,
+                    alias: "punctuation",
+                  },
+                  rest: t.languages.jsx,
+                },
+              },
+            },
+            t.languages.jsx.tag,
+          ));
+        var s = function (t) {
+            return t
+              ? "string" == typeof t
+                ? t
+                : "string" == typeof t.content
+                  ? t.content
+                  : t.content.map(s).join("")
+              : "";
+          },
+          g = function (n) {
+            for (var e = [], a = 0; a < n.length; a++) {
+              var o = n[a],
+                i = !1;
+              if (
+                ("string" != typeof o &&
+                  ("tag" === o.type &&
+                  o.content[0] &&
+                  "tag" === o.content[0].type
+                    ? "</" === o.content[0].content[0].content
+                      ? e.length > 0 &&
+                        e[e.length - 1].tagName ===
+                          s(o.content[0].content[1]) &&
+                        e.pop()
+                      : "/>" === o.content[o.content.length - 1].content ||
+                        e.push({
+                          tagName: s(o.content[0].content[1]),
+                          openedBraces: 0,
+                        })
+                    : e.length > 0 &&
+                        "punctuation" === o.type &&
+                        "{" === o.content
+                      ? e[e.length - 1].openedBraces++
+                      : e.length > 0 &&
+                          e[e.length - 1].openedBraces > 0 &&
+                          "punctuation" === o.type &&
+                          "}" === o.content
+                        ? e[e.length - 1].openedBraces--
+                        : (i = !0)),
+                (i || "string" == typeof o) &&
+                  e.length > 0 &&
+                  0 === e[e.length - 1].openedBraces)
+              ) {
+                var r = s(o);
+                (a < n.length - 1 &&
+                  ("string" == typeof n[a + 1] ||
+                    "plain-text" === n[a + 1].type) &&
+                  ((r += s(n[a + 1])), n.splice(a + 1, 1)),
+                  a > 0 &&
+                    ("string" == typeof n[a - 1] ||
+                      "plain-text" === n[a - 1].type) &&
+                    ((r = s(n[a - 1]) + r), n.splice(a - 1, 1), a--),
+                  (n[a] = new t.Token("plain-text", r, null, r)));
+              }
+              o.content && "string" != typeof o.content && g(o.content);
+            }
+          };
+        t.hooks.add("after-tokenize", function (t) {
+          ("jsx" !== t.language && "tsx" !== t.language) || g(t.tokens);
+        });
+      })(Prism);
+      !(function (e) {
+        ((e.languages.typescript = e.languages.extend("javascript", {
+          "class-name": {
+            pattern:
+              /(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,
+            lookbehind: !0,
+            greedy: !0,
+            inside: null,
+          },
+          builtin:
+            /\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/,
+        })),
+          e.languages.typescript.keyword.push(
+            /\b(?:abstract|declare|is|keyof|readonly|require)\b/,
+            /\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,
+            /\btype\b(?=\s*(?:[\{*]|$))/,
+          ),
+          delete e.languages.typescript.parameter,
+          delete e.languages.typescript["literal-property"]);
+        var s = e.languages.extend("typescript", {});
+        (delete s["class-name"],
+          (e.languages.typescript["class-name"].inside = s),
+          e.languages.insertBefore("typescript", "function", {
+            decorator: {
+              pattern: /@[$\w\xA0-\uFFFF]+/,
+              inside: {
+                at: { pattern: /^@/, alias: "operator" },
+                function: /^[\s\S]+/,
+              },
+            },
+            "generic-function": {
+              pattern:
+                /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,
+              greedy: !0,
+              inside: {
+                function:
+                  /^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,
+                generic: {
+                  pattern: /<[\s\S]+/,
+                  alias: "class-name",
+                  inside: s,
+                },
+              },
+            },
+          }),
+          (e.languages.ts = e.languages.typescript));
+      })(Prism);
+      !(function (e) {
+        var a = e.util.clone(e.languages.typescript);
+        ((e.languages.tsx = e.languages.extend("jsx", a)),
+          delete e.languages.tsx.parameter,
+          delete e.languages.tsx["literal-property"]);
+        var t = e.languages.tsx.tag;
+        ((t.pattern = RegExp(
+          "(^|[^\\w$]|(?=</))(?:" + t.pattern.source + ")",
+          t.pattern.flags,
+        )),
+          (t.lookbehind = !0));
+      })(Prism);
+      !(function () {
+        if ("undefined" != typeof Prism && "undefined" != typeof document) {
+          Element.prototype.matches ||
+            (Element.prototype.matches =
+              Element.prototype.msMatchesSelector ||
+              Element.prototype.webkitMatchesSelector);
+          var t = {
+              js: "javascript",
+              py: "python",
+              rb: "ruby",
+              ps1: "powershell",
+              psm1: "powershell",
+              sh: "bash",
+              bat: "batch",
+              h: "c",
+              tex: "latex",
+            },
+            e = "data-src-status",
+            i =
+              'pre[data-src]:not([data-src-status="loaded"]):not([data-src-status="loading"])';
+          (Prism.hooks.add("before-highlightall", function (t) {
+            t.selector += ", " + i;
+          }),
+            Prism.hooks.add("before-sanity-check", function (a) {
+              var n = a.element;
+              if (n.matches(i)) {
+                ((a.code = ""), n.setAttribute(e, "loading"));
+                var s = n.appendChild(document.createElement("CODE"));
+                s.textContent = "Loading…";
+                var r = n.getAttribute("data-src"),
+                  l = a.language;
+                if ("none" === l) {
+                  var o = (/\.(\w+)$/.exec(r) || [, "none"])[1];
+                  l = t[o] || o;
+                }
+                (Prism.util.setLanguage(s, l), Prism.util.setLanguage(n, l));
+                var h = Prism.plugins.autoloader;
+                (h && h.loadLanguages(l),
+                  (function (t, i, a) {
+                    var r = new XMLHttpRequest();
+                    (r.open("GET", t, !0),
+                      (r.onreadystatechange = function () {
+                        4 == r.readyState &&
+                          (r.status < 400 && r.responseText
+                            ? (function (t) {
+                                n.setAttribute(e, "loaded");
+                                var i = (function (t) {
+                                  var e =
+                                    /^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(
+                                      t || "",
+                                    );
+                                  if (e) {
+                                    var i = Number(e[1]),
+                                      a = e[2],
+                                      n = e[3];
+                                    return a
+                                      ? n
+                                        ? [i, Number(n)]
+                                        : [i, void 0]
+                                      : [i, i];
+                                  }
+                                })(n.getAttribute("data-range"));
+                                if (i) {
+                                  var a = t.split(/\r\n?|\n/g),
+                                    r = i[0],
+                                    l = null == i[1] ? a.length : i[1];
+                                  (r < 0 && (r += a.length),
+                                    (r = Math.max(
+                                      0,
+                                      Math.min(r - 1, a.length),
+                                    )),
+                                    l < 0 && (l += a.length),
+                                    (l = Math.max(0, Math.min(l, a.length))),
+                                    (t = a.slice(r, l).join("\n")),
+                                    n.hasAttribute("data-start") ||
+                                      n.setAttribute(
+                                        "data-start",
+                                        String(r + 1),
+                                      ));
+                                }
+                                ((s.textContent = t),
+                                  Prism.highlightElement(s));
+                              })(r.responseText)
+                            : r.status >= 400
+                              ? a(
+                                  "✖ Error " +
+                                    r.status +
+                                    " while fetching file: " +
+                                    r.statusText,
+                                )
+                              : a("✖ Error: File does not exist or is empty"));
+                      }),
+                      r.send(null));
+                  })(r, 0, function (t) {
+                    (n.setAttribute(e, "failed"), (s.textContent = t));
+                  }));
+              }
+            }),
+            (Prism.plugins.fileHighlight = {
+              highlight: function (t) {
+                for (
+                  var e, a = (t || document).querySelectorAll(i), n = 0;
+                  (e = a[n++]);
+                )
+                  Prism.highlightElement(e);
+              },
+            }));
+          var a = !1;
+          Prism.fileHighlight = function () {
+            (a ||
+              (console.warn(
+                "Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead.",
+              ),
+              (a = !0)),
+              Prism.plugins.fileHighlight.highlight.apply(this, arguments));
+          };
+        }
+      })();
+    </script>
+    <style>
+      pre[class*="language-"],
+      code[class*="language-"] {
+        color: #24292f;
+        font-size: 13px;
+        text-shadow: none;
+        font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+        direction: ltr;
+        text-align: left;
+        white-space: pre;
+        word-spacing: normal;
+        word-break: normal;
+        line-height: 1.5;
+        -moz-tab-size: 4;
+        -o-tab-size: 4;
+        tab-size: 4;
+        -webkit-hyphens: none;
+        -moz-hyphens: none;
+        -ms-hyphens: none;
+        hyphens: none;
+      }
+      pre[class*="language-"]::selection,
+      code[class*="language-"]::selection,
+      pre[class*="language-"]::mozselection,
+      code[class*="language-"]::mozselection {
+        text-shadow: none;
+        background: #9fc6e9;
+      }
+      @media print {
+        pre[class*="language-"],
+        code[class*="language-"] {
+          text-shadow: none;
+        }
+      }
+      pre[class*="language-"] {
+        padding: 1.5em;
+        margin: 0;
+        overflow: auto;
+        width: 100%;
+      }
+      :not(pre) > code[class*="language-"] {
+        padding: 0.1em 0.3em;
+        border-radius: 0.3em;
+        color: #24292f;
+        background: #eff1f3;
+      }
+      pre[data-line] {
+        position: relative;
+      }
+      pre[class*="language-"] > code[class*="language-"] {
+        position: relative;
+        z-index: 1;
+      }
+      .line-highlight {
+        position: absolute;
+        left: 0;
+        right: 0;
+        padding: inherit 0;
+        margin-top: 1em;
+        background: #fff8c5;
+        box-shadow: inset 5px 0 0 #eed888;
+        z-index: 0;
+        pointer-events: none;
+        line-height: inherit;
+        white-space: pre;
+      }
+      .namespace {
+        opacity: 0.7;
+      }
+      .token.comment,
+      .token.prolog,
+      .token.doctype,
+      .token.cdata {
+        color: #6e7781;
+      }
+      .token.punctuation {
+        color: #24292f;
+      }
+      .token.property,
+      .token.tag,
+      .token.boolean,
+      .token.number,
+      .token.constant,
+      .token.symbol,
+      .token.deleted {
+        color: #0550ae;
+      }
+      .token.selector,
+      .token.attr-name,
+      .token.string,
+      .token.char,
+      .token.builtin,
+      .token.inserted {
+        color: #0a3069;
+      }
+      .token.operator,
+      .token.entity,
+      .token.url,
+      .language-css .token.string,
+      .style .token.string {
+        color: #0550ae;
+      }
+      .token.atrule,
+      .token.attr-value,
+      .token.keyword {
+        color: #cf222e;
+      }
+      .token.function {
+        color: #8250df;
+      }
+      .token.regex,
+      .token.important,
+      .token.variable {
+        color: #0a3069;
+      }
+      .token.important,
+      .token.bold {
+        font-weight: bold;
+      }
+      .token.italic {
+        font-style: italic;
+      }
+      .token.entity {
+        cursor: help;
+      }
+      .ContentSnippet-module--content-snippet {
+        height: 100%;
+      }
+      .CodeSnippet-module--snippets-wrap {
+        border-radius: 4px;
+        display: flex;
+      }
+      .CodeSnippet-module--snippets-multilang
+        .CodeSnippet-module--snippets-wrap {
+        display: none;
+        width: 100%;
+        outline: 0;
+      }
+      .CodeSnippet-module--snippets-multilang
+        .CodeSnippet-module--snippets-wrap[active] {
+        display: flex;
+      }
+      .ContentSnippet-module--code-snippet {
+        background-color: #f6f8fa;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+      }
+      .CodeSnippet-module--snippets-multilang {
+        display: flex;
+        height: 100%;
+        width: 100%;
+        overflow: auto;
+      }
+      .CodeSnippet-module--header {
+        align-items: center;
+        border-bottom: 1px solid rgba(, 29, 28, 29, 0.13);
+        box-sizing: border-box;
+        display: flex;
+        height: 48px;
+        justify-content: space-between;
+        padding: 0 18px;
+        background-color: #fff;
+      }
+      .CodeSnippet-module--header-title {
+        color: #778589;
+        flex-grow: 0;
+        font-family:
+          Graphik Web,
+          Helvetica Neue,
+          Helvetica,
+          Arial,
+          Verdana,
+          sans-serif;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 15px;
+        margin-right: 8px;
+        margin-top: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .CodeSnippet-module--header-buttons {
+        display: inline-flex;
+        flex-grow: 1;
+        justify-content: flex-end;
+      }
+      .CodeSnippet-module--header--single {
+        position: absolute;
+        right: 0;
+        background: transparent;
+        border: none;
+        height: 26px;
+        padding: 4px 4px 0;
+      }
+      .CodeSnippet-module--header--single .CodeSnippet-module--copy-wrap {
+        margin-left: 6px;
+      }
+      .CodeSnippet-module--header--multilang .CodeSnippet-module--language {
+        cursor: pointer;
+      }
+      .CodeSnippet-module--copy-wrap {
+        display: flex;
+        margin-left: 15px;
+      }
+      .CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet {
+        background: transparent;
+        border: 0;
+        color: #778589;
+        cursor: pointer;
+        outline: none;
+        padding: 0;
+        transition: all 0.2s ease-in-out;
+      }
+      .CodeSnippet-module--copy-wrap
+        .CodeSnippet-module--copy-snippet-icon-wrap {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+      }
+      .CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet:hover,
+      .CodeSnippet-module--copy-wrap .CodeSnippet-module--copy-snippet:focus {
+        color: #f50157;
+      }
+      .CodeSnippet-module--copy-wrap
+        .CodeSnippet-module--copy-snippet
+        .CodeSnippet-module--icon-check {
+        display: none;
+        padding: 6px 3px !important;
+      }
+      .CodeSnippet-module--copy-wrap
+        .CodeSnippet-module--copy-snippet
+        .CodeSnippet-module--icon-check
+        path {
+        fill: #f50157;
+      }
+      .CodeSnippet-module--copy-wrap svg {
+        padding-top: 0 !important;
+      }
+      .CodeSnippet-module--language {
+        color: #778589;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 14px;
+        font-weight: 500;
+        margin-left: 15px;
+        line-height: 48px;
+        max-width: 200px;
+        text-align: center;
+        transition: color 0.2s;
+        position: relative;
+      }
+      .CodeSnippet-module--language:after {
+        border-radius: 0;
+        border-top: 2px solid transparent;
+        bottom: 0;
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+      }
+      .CodeSnippet-module--language:focus,
+      .CodeSnippet-module--language:hover {
+        border-color: #778589;
+      }
+      .CodeSnippet-module--language[active] {
+        color: inherit;
+      }
+      .CodeSnippet-module--language[active]:after {
+        border-color: #f50157;
+      }
+    </style>
+    <style>
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          Segoe UI,
+          Roboto,
+          Helvetica Neue,
+          Arial,
+          Noto Sans,
+          sans-serif,
+          Apple Color Emoji,
+          Segoe UI Emoji,
+          Segoe UI Symbol,
+          Noto Color Emoji;
+      }
+
+      iframe {
+        border: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      #mapContainer {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 0;
+        order: 1;
+        height: 50vh;
+        position: relative;
+      }
+
+      #snippetsContainer {
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        flex-grow: 1;
+        flex-basis: 0;
+        order: 2;
+        position: relative;
+        z-index: 1;
+        overflow: hidden;
+        height: 50vh;
+        box-sizing: border-box;
+        border: 1px solid rgba(29, 28, 29, 0.13);
+        border-left: none;
+        border-bottom: none;
+      }
+
+      #main {
+        display: flex;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        flex-direction: column;
+      }
+
+      @media screen and (min-width: 1024px) {
+        #main {
+          flex-direction: row;
+          height: 100%;
+        }
+
+        #mapContainer {
+          flex-basis: 50vw;
+          order: 2;
+          position: relative;
+          height: 100%;
+        }
+
+        #snippetsContainer {
+          flex-basis: 50vw;
+          order: 1;
+          -webkit-box-flex: 0;
+          flex-grow: 0;
+          height: 100%;
+        }
+      }
+    </style>
+    <meta
+      name="description"
+      content="Highlight code for Woosmap Map JS API samples."
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+  </head>
+  <body>
+    <div id="main" class="content">
+      <div id="snippetsContainer">
+        <div class="ContentSnippet-module--content-snippet">
+          <div class="ContentSnippet-module--code-snippet">
+            <div
+              class="CodeSnippet-module--header CodeSnippet-module--header--multilang"
+            >
+              <div class="CodeSnippet-module--header-buttons">
+                <div
+                  role="tab"
+                  data-tab-lang="typescript"
+                  class="CodeSnippet-module--language"
+                  id="settings-typescript"
+                  active=""
+                >
+                  <div
+                    class="CodeSnippet-module--language-selector"
+                    role="button"
+                  >
+                    TypeScript
+                  </div>
+                </div>
+
+                <div
+                  role="tab"
+                  data-tab-lang="javascript"
+                  class="CodeSnippet-module--language"
+                  id="settings-javascript"
+                >
+                  <div
+                    class="CodeSnippet-module--language-selector"
+                    role="button"
+                  >
+                    JavaScript
+                  </div>
+                </div>
+
+                <div
+                  role="tab"
+                  data-tab-lang="css"
+                  class="CodeSnippet-module--language"
+                  id="settings-css"
+                >
+                  <div
+                    class="CodeSnippet-module--language-selector"
+                    role="button"
+                  >
+                    CSS
+                  </div>
+                </div>
+                <div
+                  role="tab"
+                  data-tab-lang="html"
+                  class="CodeSnippet-module--language"
+                  id="settings-html"
+                >
+                  <div
+                    class="CodeSnippet-module--language-selector"
+                    role="button"
+                  >
+                    HTML
+                  </div>
+                </div>
+                <div class="CodeSnippet-module--copy-wrap">
+                  <button class="CodeSnippet-module--copy-snippet" title="Copy">
+                    <span class="CodeSnippet-module--copy-snippet-icon-wrap">
+                      <svg
+                        class="CodeSnippet-module--icon-copy"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        height="24"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="m18.6 7.494-.625-.112a20.62 20.62 0 0 0-2.261-.264V4.982A2.328 2.328 0 0 0 13.8 2.688l-.626-.113a20.28 20.28 0 0 0-7.188 0l-.624.113A2.327 2.327 0 0 0 3.44 4.982v8.885a2.331 2.331 0 0 0 2.742 2.295 19.243 19.243 0 0 1 2.065-.244v2.756a2.329 2.329 0 0 0 2.742 2.294 19.142 19.142 0 0 1 6.793 0 2.33 2.33 0 0 0 2.742-2.294V9.789A2.33 2.33 0 0 0 18.6 7.494zM5.985 15.059a1.211 1.211 0 0 1-1.425-1.192V4.982a1.209 1.209 0 0 1 1-1.192l.624-.112a19.142 19.142 0 0 1 6.793 0l.625.112a1.211 1.211 0 0 1 1 1.192v8.885a1.213 1.213 0 0 1-1.426 1.192 20.358 20.358 0 0 0-4.293-.29.54.54 0 0 0-.072-.014.54.54 0 0 0-.113.023 20.3 20.3 0 0 0-2.713.281zM19.4 18.674a1.211 1.211 0 0 1-1.425 1.192 20.275 20.275 0 0 0-7.187 0A1.222 1.222 0 0 1 9.8 19.6a1.209 1.209 0 0 1-.434-.929v-2.803a19.126 19.126 0 0 1 3.608.294 2.409 2.409 0 0 0 .413.036 2.332 2.332 0 0 0 2.33-2.331V8.24a19.561 19.561 0 0 1 2.064.245l.625.112a1.209 1.209 0 0 1 1 1.192z"
+                        ></path>
+                      </svg>
+                      <svg
+                        class="CodeSnippet-module--icon-check"
+                        viewBox="0 0 13 9"
+                        fill="none"
+                      >
+                        <path
+                          fill-rule="evenodd"
+                          clip-rule="evenodd"
+                          d="M12.026 0.188287C12.2771 0.439342 12.2771 0.846374 12.026 1.09743L4.31172 8.81172C4.06067 9.06276 3.65363 9.06276 3.40258 8.81172L0.188287 5.59743C-0.0627622 5.3464 -0.0627622 4.93934 0.188287 4.6883C0.439342 4.43726 0.846374 4.43726 1.09743 4.6883L3.85715 7.44803L11.1169 0.188287C11.3679 -0.0627622 11.775 -0.0627622 12.026 0.188287Z"
+                          fill="currentColor"
+                        ></path>
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="CodeSnippet-module--snippets-multilang">
+              <div
+                class="CodeSnippet-module--snippets-wrap"
+                data-snippet-lang="typescript"
+                active
+              >
+                <pre data-src="./index.ts"></pre>
+              </div>
+              <div
+                class="CodeSnippet-module--snippets-wrap"
+                data-snippet-lang="javascript"
+              >
+                <pre data-src="./index.js"></pre>
+              </div>
+              <div
+                class="CodeSnippet-module--snippets-wrap"
+                data-snippet-lang="css"
+              >
+                <pre data-src="./style.css"></pre>
+              </div>
+              <div
+                class="CodeSnippet-module--snippets-wrap"
+                data-snippet-lang="html"
+              >
+                <pre data-src="./index.html"></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="mapContainer">
+        <iframe
+          id="iframe"
+          title="Map Type Hybrid"
+          src="../iframe/index.html"
+          allow="geolocation"
+        ></iframe>
+      </div>
+    </div>
+    <script src="https://developers.woosmap.com/assets/js/copy_snippet.js"></script>
+  </body>
+</html>
diff --git a/dist/samples/map-type-hybrid/highlight/index.html b/dist/samples/map-type-hybrid/highlight/index.html
new file mode 100644
index 00000000..4d2187b6
--- /dev/null
+++ b/dist/samples/map-type-hybrid/highlight/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Map Type Hybrid</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8" />
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+  </head>
+  <body>
+    <!--The div element for the map -->
+    <div id="map"></div>
+
+    <script
+      src="https://sdk.woosmap.com/map/map.js?key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&callback=initMap"
+      defer
+    ></script>
+  </body>
+</html>
diff --git a/dist/samples/map-type-hybrid/highlight/index.js b/dist/samples/map-type-hybrid/highlight/index.js
new file mode 100644
index 00000000..5c50575c
--- /dev/null
+++ b/dist/samples/map-type-hybrid/highlight/index.js
@@ -0,0 +1,23 @@
+// Initialize and add the map with hybrid (satellite) map type
+let map;
+
+function initMap() {
+  const position = {
+    lat: 48.8584,
+    lng: 2.2945,
+  };
+
+  // The map, initialized with hybrid satellite view
+  map = new woosmap.map.Map(document.getElementById("map"), {
+    zoom: 16,
+    center: position,
+    mapTypeId: woosmap.map.MapTypeId.HYBRID,
+    mapTypeControl: true,
+  });
+  // Listen for map type changes via the built-in control
+  map.addListener("mapTypeId_changed", () => {
+    console.log("Map type switched to:", map.getMapTypeId());
+  });
+}
+
+window.initMap = initMap;
diff --git a/dist/samples/map-type-hybrid/highlight/index.ts b/dist/samples/map-type-hybrid/highlight/index.ts
new file mode 100644
index 00000000..b0de25bd
--- /dev/null
+++ b/dist/samples/map-type-hybrid/highlight/index.ts
@@ -0,0 +1,31 @@
+// Initialize and add the map with hybrid (satellite) map type
+let map: woosmap.map.Map;
+
+function initMap(): void {
+  const position: woosmap.map.LatLngLiteral = {
+    lat: 48.8584,
+    lng: 2.2945,
+  };
+
+  // The map, initialized with hybrid satellite view
+  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+    zoom: 16,
+    center: position,
+    mapTypeId: woosmap.map.MapTypeId.HYBRID,
+    mapTypeControl: true,
+  });
+
+  // Listen for map type changes via the built-in control
+  map.addListener("mapTypeId_changed", () => {
+    console.log("Map type switched to:", map.getMapTypeId());
+  });
+}
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+
+export {};
diff --git a/dist/samples/map-type-hybrid/highlight/style.css b/dist/samples/map-type-hybrid/highlight/style.css
new file mode 100644
index 00000000..02dace4d
--- /dev/null
+++ b/dist/samples/map-type-hybrid/highlight/style.css
@@ -0,0 +1,19 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
diff --git a/dist/samples/map-type-hybrid/iframe/index.html b/dist/samples/map-type-hybrid/iframe/index.html
new file mode 100644
index 00000000..f1c04992
--- /dev/null
+++ b/dist/samples/map-type-hybrid/iframe/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Map Type Hybrid</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8" />
+
+    <script type="module" crossorigin>
+      (function () {
+        const o = document.createElement("link").relList;
+        if (o && o.supports && o.supports("modulepreload")) return;
+        for (const e of document.querySelectorAll('link[rel="modulepreload"]'))
+          s(e);
+        new MutationObserver((e) => {
+          for (const t of e)
+            if (t.type === "childList")
+              for (const r of t.addedNodes)
+                r.tagName === "LINK" && r.rel === "modulepreload" && s(r);
+        }).observe(document, { childList: !0, subtree: !0 });
+        function c(e) {
+          const t = {};
+          return (
+            e.integrity && (t.integrity = e.integrity),
+            e.referrerPolicy && (t.referrerPolicy = e.referrerPolicy),
+            e.crossOrigin === "use-credentials"
+              ? (t.credentials = "include")
+              : e.crossOrigin === "anonymous"
+                ? (t.credentials = "omit")
+                : (t.credentials = "same-origin"),
+            t
+          );
+        }
+        function s(e) {
+          if (e.ep) return;
+          e.ep = !0;
+          const t = c(e);
+          fetch(e.href, t);
+        }
+      })();
+      let n;
+      function p() {
+        const i = { lat: 48.8584, lng: 2.2945 };
+        ((n = new woosmap.map.Map(document.getElementById("map"), {
+          zoom: 16,
+          center: i,
+          mapTypeId: woosmap.map.MapTypeId.HYBRID,
+          mapTypeControl: !0,
+        })),
+          n.addListener("mapTypeId_changed", () => {
+            console.log("Map type switched to:", n.getMapTypeId());
+          }));
+      }
+      window.initMap = p;
+    </script>
+    <style>
+      #map {
+        height: 100%;
+      }
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          Segoe UI,
+          Roboto,
+          Helvetica Neue,
+          Arial,
+          Noto Sans,
+          sans-serif,
+          Apple Color Emoji,
+          Segoe UI Emoji,
+          Segoe UI Symbol,
+          Noto Color Emoji;
+      }
+    </style>
+  </head>
+  <body>
+    <!--The div element for the map -->
+    <div id="map"></div>
+
+    <script
+      src="https://sdk.woosmap.com/map/map.js?key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&callback=initMap"
+      defer
+    ></script>
+  </body>
+</html>
diff --git a/dist/samples/map-type-hybrid/jsfiddle/demo.css b/dist/samples/map-type-hybrid/jsfiddle/demo.css
new file mode 100644
index 00000000..02dace4d
--- /dev/null
+++ b/dist/samples/map-type-hybrid/jsfiddle/demo.css
@@ -0,0 +1,19 @@
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+  height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
diff --git a/dist/samples/map-type-hybrid/jsfiddle/demo.details b/dist/samples/map-type-hybrid/jsfiddle/demo.details
new file mode 100644
index 00000000..ec540d85
--- /dev/null
+++ b/dist/samples/map-type-hybrid/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: Map Type Hybrid
+authors:
+  - Woosmap
+tags:
+  - woosmap
+load_type: h
+description: Sample code for Woosmap Map JavaScript API
diff --git a/dist/samples/map-type-hybrid/jsfiddle/demo.html b/dist/samples/map-type-hybrid/jsfiddle/demo.html
new file mode 100644
index 00000000..aa92bf06
--- /dev/null
+++ b/dist/samples/map-type-hybrid/jsfiddle/demo.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Map Type Hybrid</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8" />
+
+    <!-- jsFiddle will insert css and js -->
+  </head>
+  <body>
+    <!--The div element for the map -->
+    <div id="map"></div>
+
+    <script
+      src="https://sdk.woosmap.com/map/map.js?key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&callback=initMap"
+      defer
+    ></script>
+  </body>
+</html>
diff --git a/dist/samples/map-type-hybrid/jsfiddle/demo.js b/dist/samples/map-type-hybrid/jsfiddle/demo.js
new file mode 100644
index 00000000..5c50575c
--- /dev/null
+++ b/dist/samples/map-type-hybrid/jsfiddle/demo.js
@@ -0,0 +1,23 @@
+// Initialize and add the map with hybrid (satellite) map type
+let map;
+
+function initMap() {
+  const position = {
+    lat: 48.8584,
+    lng: 2.2945,
+  };
+
+  // The map, initialized with hybrid satellite view
+  map = new woosmap.map.Map(document.getElementById("map"), {
+    zoom: 16,
+    center: position,
+    mapTypeId: woosmap.map.MapTypeId.HYBRID,
+    mapTypeControl: true,
+  });
+  // Listen for map type changes via the built-in control
+  map.addListener("mapTypeId_changed", () => {
+    console.log("Map type switched to:", map.getMapTypeId());
+  });
+}
+
+window.initMap = initMap;
diff --git a/package-lock.json b/package-lock.json
index 164dc915..bd2020d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "@playwright/test": "^1.57.0",
         "@types/geojson": "^7946.0.16",
         "@types/supercluster": "^7.1.3",
-        "@types/woosmap.map": "^1.4.23",
+        "@types/woosmap.map": "^1.4.24",
         "@typescript-eslint/eslint-plugin": "^8.52.0",
         "@typescript-eslint/parser": "^8.15.0",
         "chalk": "^5.6.2",
@@ -2620,9 +2620,9 @@
       }
     },
     "node_modules/@types/woosmap.map": {
-      "version": "1.4.23",
-      "resolved": "https://registry.npmjs.org/@types/woosmap.map/-/woosmap.map-1.4.23.tgz",
-      "integrity": "sha512-/gNmRBiZlBakvKua8q60DmR/h3y7phN6CZrsJEAVY/8cJQy2Rtb9LH2ye/WLJwp1oFRwDMAltqI85VDjVWNq7g==",
+      "version": "1.4.24",
+      "resolved": "https://registry.npmjs.org/@types/woosmap.map/-/woosmap.map-1.4.24.tgz",
+      "integrity": "sha512-l8Lzza5E7rFsmwijzwOKr/Gko8QlAq6jnJjW+4/3mIjzUZgBxyLYfNMLjPJRwoWQF7Ix71+8fyQUbxlxKl4FpQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 07a16a83..e345eb16 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "@playwright/test": "^1.57.0",
     "@types/geojson": "^7946.0.16",
     "@types/supercluster": "^7.1.3",
-    "@types/woosmap.map": "^1.4.23",
+    "@types/woosmap.map": "^1.4.24",
     "@typescript-eslint/eslint-plugin": "^8.52.0",
     "@typescript-eslint/parser": "^8.15.0",
     "chalk": "^5.6.2",
diff --git a/samples/map-type-hybrid/index.njk b/samples/map-type-hybrid/index.njk
new file mode 100644
index 00000000..f2ff4535
--- /dev/null
+++ b/samples/map-type-hybrid/index.njk
@@ -0,0 +1,5 @@
+{% extends '../../src/_includes/layout.njk' %}
+{% block html %}
+    <!--The div element for the map -->
+    <div id="map"></div>
+{% endblock %}
diff --git a/samples/map-type-hybrid/index.ts b/samples/map-type-hybrid/index.ts
new file mode 100644
index 00000000..24715217
--- /dev/null
+++ b/samples/map-type-hybrid/index.ts
@@ -0,0 +1,33 @@
+// [START woosmap_map_type_hybrid]
+// Initialize and add the map with hybrid (satellite) map type
+let map: woosmap.map.Map;
+
+function initMap(): void {
+  const position: woosmap.map.LatLngLiteral = {
+    lat: 48.8584,
+    lng: 2.2945,
+  };
+
+  // The map, initialized with hybrid satellite view
+  map = new woosmap.map.Map(document.getElementById("map") as HTMLElement, {
+    zoom: 16,
+    center: position,
+    mapTypeId: woosmap.map.MapTypeId.HYBRID,
+    mapTypeControl: true,
+  });
+
+  // Listen for map type changes via the built-in control
+  map.addListener("mapTypeId_changed", () => {
+    console.log("Map type switched to:", map.getMapTypeId());
+  });
+}
+
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
+// [END woosmap_map_type_hybrid]
+
+export {};
diff --git a/samples/map-type-hybrid/map-type-hybrid.json b/samples/map-type-hybrid/map-type-hybrid.json
new file mode 100644
index 00000000..8e18c873
--- /dev/null
+++ b/samples/map-type-hybrid/map-type-hybrid.json
@@ -0,0 +1,14 @@
+{
+  "title": "Map Type Hybrid",
+  "description": "Initialize a map with the hybrid satellite view and use the built-in map type control to switch between roadmap and satellite.",
+  "category": "Map Basics",
+  "callback": "initMap",
+  "tag": "map_type_hybrid",
+  "name": "map-type-hybrid",
+  "pagination": {
+    "data": "mode",
+    "size": 1,
+    "alias": "mode"
+  },
+  "permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
+}
diff --git a/samples/map-type-hybrid/style.scss b/samples/map-type-hybrid/style.scss
new file mode 100644
index 00000000..d96fcb03
--- /dev/null
+++ b/samples/map-type-hybrid/style.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
+
+/* [START woosmap_map_type_hybrid] */
+@include meta.load-css("../../shared/scss/_default.scss");
+
+/* [END woosmap_map_type_hybrid] */