🚀  Astro — Geographical map embed (Leaflet)

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

Components

Keywords:

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

Component live demo

Geographical map Geographical map Geographical map Geographical map

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 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 ⎋

Live demo website

code.juliancataldo.com

Other projects:

🔗  JulianCataldo.com

TypeScript API

Extends: MapOptions

name
type
required
default
ssr
boolean
false
true
htmlAttributes
astroHTML.JSX.HTMLAttributes
false
{}
address
string
false
null
height
string
false
'25rem'
width
string
false
'25rem'
'http://{s}.tile.osm.org/{z}/{x}/{y}.png'

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

2.0.0 (2022-11-19)

⚠ BREAKING CHANGES

  • use web component, generate ssr image

Features

  • get coordinates from address thanks to api (7a2a54a)
  • sensical unique file names based on settings (35f7ba4)
  • use web component, generate ssr image (6d9f23d)

Bug Fixes

  • vite css import bug + tidy deps + css scope (f19e6bb)

1.0.6 (2022-10-18)

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

1.0.5 (2022-10-18)

Bug Fixes

  • note + vite config for client side js error (3a5c6d5)

1.0.4 (2022-10-17)

Bug Fixes

  • remove leaflet dep. causing rollup bug (24f718f)

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
change-case
Blake Embrey
MIT
https://github.com/blakeembrey/change-case/tree/master/packages/camel-case#readme
leaflet
-
BSD-2-Clause
https://leafletjs.com/
puppeteer
The Chromium Authors
Apache-2.0
https://github.com/puppeteer/puppeteer/tree/main/packages/puppeteer

⚠️  Having an issue? / 🗣   Wanna share feedback or suggestion?

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