astro-geo-map
v2.0.0
Published
Embed an interactive map in your webpage. Using Leaflet.js under the hood.
Downloads
69
Maintainers
julian.cataldoReadme
🚀 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 [email protected].
To do
- [ ] SSR rendered placeholder, for when JS is unavailable
LIVE DEMO 🎭 DOCUMENTATION WEBSITE ⎋
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.