Creating an Astro Component template for Web Maps

https://Astro.build is a great start for creating web sites. This project allows you to bring Leaflet & MapLibre maps directly into Astro.

Demo

Test

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

Astro Component

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

Architecture

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

Develop

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

Leaflet with Astro

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"
/>

MapLibre with Astro

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 with Astro

<Mapbox
  container="mapboxmap"
  latitude={latitude}
  longitude={longitude}
  zoom={zoom}
  mapstyle={mapstyle}
  interactive="false"
/>

MapKit with Astro

• Use either zoom or cameradistance. If both are given, then zoom 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"
/>

How to Replicate

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.

Leaflet dependencies

# done for you, left here for replication notes
# pnpm install leaflet --workspace-root
# pnpm install @types/leaflet --save-dev --workspace-root

MapLibre dependencies

# done for you, left here for replication notes
# pnpm install maplibre-gl --workspace-root

Mapbox dependencies

# done for you, left here for replication notes
# pnpm install mapbox-gl --workspace-root

MapKit dependencies

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

🧞 Commands

All commands are run from the root of the project, from a terminal: