https://Astro.build is a great start for creating web sites. This project allows you to bring Leaflet & MapLibre maps directly into Astro.
The Astro Docs has a section on creating a test
directory for testing and demonstrating the component. See https://docs.astro.build/en/reference/publish-to-npm/#creating-a-package
We followed these notes to add test/
in the root of this project. The Demo project supports Astro & MDX examples of displaying a map.
├── test
│ ├── public
│ │ ├── favicon.svg
│ │ └── jwt
│ ├── src
│ │ └── pages
│ │ ├── index.astro
│ │ └── mapkit.mdx
To create the template, we started with the official Astro template component
and started this project called maps-withastro
. See https://github.com/withastro/astro/tree/main/examples/component.
pnpm create astro@latest maps-withastro -- --template component
# done for you, left here for replication notes
# pnpm create astro@latest demo -- --template minimal
Astro + Leaflet, MapLibre or Mapbox
Astro + MapKit
The architecture is to pass in Astro properties via an HTMLElement dataset property. The pattern for the Leaflet map example is from an Astro project called hello-astro
.
// Copyright (c) 2022 Hello Tham Pty Ltd. https://github.com/hellotham/hello-astro
// SPDX-License-Identifier: MIT
To do local development, change the dependency to the local workspace.
"maps-withastro": "workspace:*"
See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
See demo/src/pages/index.astro.
import { Leaflet } from 'maps-withastro';
---
<Leaflet
container="leafletmap"
latitude={32.795595}
longitude={-117.259191}
zoom={10}
tileLayer="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution="© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
containerstyle="width: 312px; height: 256px"
/>
import { MapLibre } from 'maps-withastro';
---
<MapLibre
container="maplibremap"
latitude="32.795595"
longitude="-117.259191"
zoom="3"
interactive="true"
mapstyle="https://demotiles.maplibre.org/style.json"
containerstyle="width: 312px; height: 256px"
/>
<Mapbox
container="mapboxmap"
latitude={latitude}
longitude={longitude}
zoom={zoom}
mapstyle={mapstyle}
interactive="false"
/>
- Use either
zoom
orcameradistance
. If both are given, thenzoom
is preferred. - Pass in JSON Web Token as either a URL or string
- jwt="http://localhost:3141/jwt"
- jwt="eyJhxGciO...."
import { MapKit } from 'maps-withastro';
---
<MapKit
container="mapkitmap"
containerstyle="width: 512px; height: 512px"
latitude={32.795595}
longitude={-117.259191}
cameradistance={10000}
zoom={10}
interactive="false"
maptype="MutedStandard"
showstileinfo="true"
jwt="http://localhost:3141/jwt"
/>
Here are the steps taken to create this repo containing the Maps with Astro components. See https://docs.astro.build/en/reference/publish-to-npm
You can make use of these notes if you want to extend the Map components with Astro beyond Leaflet or MapLibre.
# done for you, left here for replication notes
# pnpm install leaflet --workspace-root
# pnpm install @types/leaflet --save-dev --workspace-root
# done for you, left here for replication notes
# pnpm install maplibre-gl --workspace-root
# done for you, left here for replication notes
# pnpm install mapbox-gl --workspace-root
For detailed information on the required fields for the JWT header and payload, see Creating and Using Tokens with MapKit JS. The MapKit JS Dashboard also has a tool called Create a Token.
# done for you, left here for replication notes
# pnpm install @types/apple-mapkit-js-browser --save-dev --workspace-root
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
npm link |
Registers this package locally. for use with ./test |
pnpm link maps-withastro |
Run in the test/ Astro project to install your components |
npm publish |
Publishes this package to NPM. Requires you to be logged in |