Use leaflet from package

Author: ChristineTham

src/components/map.astro

@@ -1,26 +1,27 @@
 ---
+import 'leaflet/dist/leaflet.css'
 export interface Props {
   loc: [number, number]
   zoom: number
 }
 
 const { loc, zoom } = Astro.props
 ---
-<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
-integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
-crossorigin=""/>
-<script
-  is:inline
-  src="https://unpkg.com/[email protected]/dist/leaflet.js"
-  integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
-  crossorigin=""
-></script>
+
 <div id="map" class="mb-3 h-96"></div>
+<script is:inline>
+var myloc, myzoom
+</script>
 <script define:vars={{ loc, zoom }}>
-  var map = L.map('map').setView(loc, zoom)
+  myloc = loc
+  myzoom = zoom
+</script>
+<script>
+  import L from 'leaflet/dist/leaflet.js'
+  var map = L.map('map').setView(myloc, myzoom)
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 19,
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
   }).addTo(map)
-  L.marker(loc).addTo(map)
+  L.marker(myloc).addTo(map)
 </script>

src/layouts/base.astro

@@ -57,16 +57,6 @@ const { frontmatter } = Astro.props
           mermaid.initialize({startOnLoad:true});
         </script>
       }
-      {frontmatter.extra?.includes('map') &&
-      <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
-        integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
-        crossorigin=""/>
-      <script
-        src="https://unpkg.com/[email protected]/dist/leaflet.js"
-        integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
-        crossorigin=""
-      ></script>
-      }
       <Header />
       <slot />
       <Footer />

src/pages/blog/2022-08-23-sample-mdx-post.mdx

@@ -11,7 +11,6 @@ categories:
 tags:
   - mdx
   - sample
-extra: ['map']
 ---  
 import Map from '../../components/map.astro'
 

src/pages/contact.astro

@@ -12,7 +12,6 @@ const frontmatter = {
   coverSVG: '../svg/undraw/undraw_contact_us.svg',
   socialImage: '../images/undraw/undraw_contact_us.png',
   publishDate: SiteMetadata.buildTime,
-  extra: ['map']
 }
 ---