πŸš€Β Β Astro β€” Geographical map embed (Leaflet)


Embed an interactive map in your webpage. Using Leaflet.js under the hood.

Keywords:

  • astro
  • astro-component
  • leaflet
  • geographical
  • location
  • map
  • media
  • openstreetmap
  • maptiler
  • native
  • interactive
  • vanilla
  • javascript

Component live demo


You can extend this HTML element with generic attributes like aria-label …

πŸš€Β Β Astro β€” Geographical map embed (Leaflet)

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

πŸ“¦Β Β Installation

pnpm i leaflet 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>

To do

  • Multiple maps per page
  • SSR rendered placeholder, for when JS is unavailable

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.

1.0.3 (2022-10-17)

Note: Version bump only for package astro-geo-map

1.0.2 (2022-10-17)

Bug Fixes

  • remove package prefix, simplify import method (73bd31b)

0.12.2 (2022-09-22)

Note: Version bump only for package @julian_cataldo/astro-media-map

0.12.1 (2022-08-22)

Note: Version bump only for package @julian_cataldo/astro-media-map

0.12.0 (2022-08-21)

Features

  • support multiple leaflet map embed per page (295ea80)

Bug Fixes

  • remove unused id attribute (9a528cc)

0.11.5 (2022-08-20)

Note: Version bump only for package @julian_cataldo/astro-media-map

0.11.4 (2022-07-31)

Note: Version bump only for package @julian_cataldo/astro-media-map

0.11.3 (2022-07-30)

Bug Fixes

  • workaround for define:vars breaking render (c57e799)

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

  • better defaults for media map (e198a36)
  • better defaults properties (cc55aec)

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)
...

Licenses

Package
Author
License
URL
leaflet
-
BSD-2-Clause

⚠️  Having an issue? / πŸ—£   Wanna share feedback or suggestion?

✍️  Open an Issue or a Pull Request   on GitHub -or-   Contact me   on my Website.