Component live demo
You can extend this HTML element with generic attributes like aria-label
…
Keywords:
- astro
- astro-component
- leaflet
- map
- media
- openstreetmap
- maptiler
- native
- interactive
- vanilla
- javascript
🚀 Astro — Media map embed
Embed an interactive map in your webpage.
Uses Leaflet.js under the hood.
📦 Installation
pnpm i @julian_cataldo/astro-media-map leaflet🛠 Usage
Note
Only one map per page for now
---
import MediaMap from '@julian_cataldo/astro-media-map/MediaMap.astro';
// ...
---<!-- ... -->
<body>
<!-- Place component inside BODY tag -->
<MediaMap
x={43.389636 /* Required */}
y={5.3964332 /* Required */}
z={11}
height={'25rem' /* Required */}
width={'25rem'}
attribution={true}
/>
<!-- ... -->
</body>To do
- Multiple maps per page
TypeScript API
Extends: astroHTML.JSX.HTMLAttributes
name
type
required
default
x
number
true
43.389636
y
number
true
5.3964332
z
number
false
10
height
string
true
'12rem'
width
string
false
'100%'
attribution
boolean
false
true
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.11.2 (2022-07-24)
Note: Version bump only for package @julian_cataldo/astro-media-map
0.11.1 (2022-07-18)
Note: Version bump only for package @julian_cataldo/astro-media-map
0.11.0 (2022-06-28)
Features
0.10.7 (2022-06-26)
Note: Version bump only for package @julian_cataldo/astro-media-map
0.10.6 (2022-06-25)
Note: Version bump only for package @julian_cataldo/astro-media-map
0.10.5 (2022-06-22)
Note: Version bump only for package @julian_cataldo/astro-media-map
0.10.4 (2022-06-22)
Note: Version bump only for package @julian_cataldo/astro-media-map
0.10.3 (2022-06-21)
Note: Version bump only for package @julian_cataldo/astro-media-map
0.10.2 (2022-06-20)
Note: Version bump only for package @julian_cataldo/astro-media-map
0.10.1 (2022-06-20)
Note: Version bump only for package @julian_cataldo/astro-media-map
0.10.0 (2022-06-20)
Features
- init media map component (7587473)
...