Astro-geo-map NPM

🚀 Astro — Geographical map embed (Leaflet)

Embed interactive geographical maps in your webpage.
Using Leaflet.js under the hood.

📦 Installation

pnpm i astro-geo-map

# Optional
pnpm i -D @types/leaflet

🛠 Usage

---
import { GeoMap } from 'astro-geo-map';
// ...
---

<!-- ... -->
<body>
  <!-- Place component inside `BODY` tag -->

  <GeoMap
    x={43.389636 /* Required */}
    y={5.3964332 /* Required */}
    z={11}
    height={'25rem' /* Required */}
    width={'25rem'}
    attribution={true}
  />

  <!-- ... -->
</body>

Vite client-side fix

You might want to add this to your astro.config:

export default defineConfig({
  /* ... */
  vite: { optimizeDeps: { include: ['leaflet'] } },
});

So client-side, third-party JS will be loaded properly, instead of getting this error:

SyntaxError: Importing binding name 'default' cannot be resolved by star

If dependency issues persists, try installing leaflet@1.9.0.

To do

SSR rendered placeholder, for when JS is unavailable

LIVE DEMO 🎭 DOCUMENTATION WEBSITE ⎋

code.juliancataldo.com

Other projects:

astro-content: A text based, structured content manager, for edition and consumption.
remark-lint-frontmatter-schema: Validate your Markdown frontmatter data against a JSON schema.
retext-case-police: Check popular names casing. Example: ⚠️ github → ✅ GitHub.

🔗 JulianCataldo.com