fix(maps): fix inline svg urls (#1324)

* fix(maps): fix inline svg urls * chore: format file
baloise · Feb 6, 2024 · 57f2433 · 57f2433
1 parent 8480c46
commit 57f2433
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 16 deletions.
diff --git a/.changeset/silent-horses-learn.md b/.changeset/silent-horses-learn.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+**maps**: fix image inline svg urls for the legacy marker api.
diff --git a/packages/components/src/test/maps.html b/packages/components/src/test/maps.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <style>
+      #map {
+        height: 100%;
+      }
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+    <script>
+      var exports = {}
+    </script>
+    <script src="https://unpkg.com/@googlemaps/[email protected]/dist/index.min.js"></script>
+    <script module src="/assets/maps.js"></script>
+  </head>
+
+  <body>
+    <div id="map"></div>
+    <script>
+      const position = { lat: -25.344, lng: 131.031 }
+
+      const mapOptions = {
+        mapId: 'DEMO_MAP_ID',
+        center: position,
+        zoom: 4,
+        styles: exports.balMapTypeStyles,
+      }
+
+      const loader = new google.maps.plugins.loader.Loader({
+        apiKey: '--your-api-key--',
+        version: 'weekly',
+        libraries: ['places'],
+      })
+
+      let map
+      loader.importLibrary('maps').then(({ Map }) => {
+        map = new Map(document.getElementById('map'), mapOptions)
+
+        loader.importLibrary('marker').then(({ AdvancedMarkerElement, Marker }) => {
+          // Legacy
+          new Marker({
+            map,
+            position: { lat: -33.8688, lng: 151.2093 },
+            title: 'Sydney',
+            icon: {
+              url: exports.balMapMarkerDefault,
+            },
+          })
+
+          const parser = new DOMParser()
+          const pinSvgString = exports.balMapMarkerDefault.replace('data:image/svg+xml;utf-8, ', '')
+          const pinSvg = parser.parseFromString(pinSvgString, 'image/svg+xml').documentElement
+          new AdvancedMarkerElement({
+            map,
+            position,
+            title: 'Uluru',
+            content: pinSvg,
+          })
+        })
+      })
+    </script>
+  </body>
+</html>
diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
@@ -93,6 +93,10 @@ export const config: Config = {
           src: '../../css/css/theme-compact.css',
           dest: 'assets/theme-compact.css',
         },
+        {
+          src: '../../maps/dist/index.js',
+          dest: 'assets/maps.js',
+        },
         { src: '../../css/css/baloise-design-system.css', dest: 'assets/baloise-design-system.css', warn: true },
         { src: '../../fonts/lib', dest: 'assets/fonts', warn: true },
       ],

diff --git a/packages/maps/scripts/build.mjs b/packages/maps/scripts/build.mjs
@@ -62,12 +62,7 @@ async function optimizeSvg() {
 
 async function optimizeIcon(input) {
   const svg = await svgo.optimize(input, {
-    plugins: [
-      {
-        name: 'preset-default',
-        active: false,
-      },
-    ],
+    plugins: [],
   })
   return svg.data
 }