{"id":14845438,"url":"https://github.com/roblabs/maps-withastro","last_synced_at":"2025-06-26T00:06:47.533Z","repository":{"id":224432485,"uuid":"660207743","full_name":"roblabs/maps-withastro","owner":"roblabs","description":"Bring Leaflet \u0026 MapLibre maps directly into Astro","archived":false,"fork":false,"pushed_at":"2024-04-17T22:45:48.000Z","size":1018,"stargazers_count":24,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-19T06:13:36.649Z","etag":null,"topics":["astro","mapbox","mapkit-js","maplibre"],"latest_commit_sha":null,"homepage":"https://maps-withastro.RobLabs.com","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/roblabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-06-29T13:39:20.000Z","updated_at":"2025-06-13T19:11:32.000Z","dependencies_parsed_at":"2025-04-12T20:13:13.934Z","dependency_job_id":null,"html_url":"https://github.com/roblabs/maps-withastro","commit_stats":null,"previous_names":["roblabs/maps-withastro"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/roblabs/maps-withastro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roblabs%2Fmaps-withastro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roblabs%2Fmaps-withastro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roblabs%2Fmaps-withastro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roblabs%2Fmaps-withastro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/roblabs","download_url":"https://codeload.github.com/roblabs/maps-withastro/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roblabs%2Fmaps-withastro/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261973726,"owners_count":23238585,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","mapbox","mapkit-js","maplibre"],"created_at":"2024-09-19T13:00:31.940Z","updated_at":"2025-06-26T00:06:46.963Z","avatar_url":"https://github.com/roblabs.png","language":"Astro","funding_links":[],"categories":["Bindings"],"sub_categories":["JavaScript"],"readme":"[![vscode.dev](https://img.shields.io/badge/Open_in_vscode.dev-Repo-blue)][vscode.dev] \n![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/roblabs/maps-withastro/deploy.yml)\n\n# Creating an Astro Component template for Web Maps\n\nhttps://Astro.build is a great start for creating web sites.  This project allows you to bring Leaflet \u0026 MapLibre maps directly into Astro.\n\n# Demo\n\n[![maps-withastro.RobLabs.com](https://img.shields.io/badge/🎲_🎲-Live_Demo-green)][maps-withastro.RobLabs.com]\n\n## Test\n\nThe 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\n\nWe followed these notes to add `test/` in the root of this project.  The Demo project supports Astro \u0026 MDX examples of displaying a map.\n\n    ├── test\n    │   ├── public\n    │   │   ├── favicon.svg\n    │   │   └── jwt\n    │   ├── src\n    │   │   └── pages\n    │   │       ├── index.astro\n    │   │       └── mapkit.mdx\n\n## Astro Component\n\nTo 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.\n\n```bash\npnpm create astro@latest maps-withastro -- --template component\n```\n\n```bash\n# done for you, left here for replication notes\n# pnpm create astro@latest demo -- --template minimal\n```\n\nAstro + Leaflet, MapLibre or Mapbox\n\n![alt text](demo-leaflet-maplibre-mapbox.png)\n\n---\n\nAstro + MapKit\n\n![alt text](demo-mapkit.png)\n\n## Architecture\n\nThe 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`.  \n\n```JavaScript\n// Copyright (c) 2022 Hello Tham Pty Ltd.  https://github.com/hellotham/hello-astro \n// SPDX-License-Identifier: MIT\n```\n\n## Develop\n\nTo do local development, change the dependency to the local workspace.\n\n```json\n\"maps-withastro\": \"workspace:*\"\n```\n\nSee https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset\n \n### Leaflet with Astro\n\nSee [demo/src/pages/index.astro](demo/src/pages/index.astro).\n\n```jsx\nimport { Leaflet } from 'maps-withastro';\n---\n\u003cLeaflet\n  container=\"leafletmap\"\n  latitude={32.795595}\n  longitude={-117.259191}\n  zoom={10}\n  tileLayer=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n  attribution=\"© \u003ca href='https://www.openstreetmap.org/copyright'\u003eOpenStreetMap\u003c/a\u003e contributors\"\n  containerstyle=\"width: 312px; height: 256px\"\n/\u003e\n```\n\n### MapLibre with Astro\n\n```jsx\nimport { MapLibre } from 'maps-withastro';\n---\n\u003cMapLibre\n  container=\"maplibremap\"\n  latitude=\"32.795595\"\n  longitude=\"-117.259191\"\n  zoom=\"3\"\n  interactive=\"true\"\n  mapstyle=\"https://demotiles.maplibre.org/style.json\"\n  containerstyle=\"width: 312px; height: 256px\"\n/\u003e\n```\n\n### Mapbox with Astro\n\n```jsx\n\u003cMapbox\n  container=\"mapboxmap\"\n  latitude={latitude}\n  longitude={longitude}\n  zoom={zoom}\n  mapstyle={mapstyle}\n  interactive=\"false\"\n/\u003e\n```\n\n### MapKit with Astro\n\n* Use either `zoom` or `cameradistance`.  If both are given, then `zoom` is preferred.\n* Pass in JSON Web Token as either a URL or string\n  * jwt=\"http://localhost:3141/jwt\"\n  * jwt=\"eyJhxGciO....\"\n\n```jsx\nimport { MapKit } from 'maps-withastro';\n---\n\u003cMapKit\n  container=\"mapkitmap\"\n  containerstyle=\"width: 512px; height: 512px\"\n  latitude={32.795595}\n  longitude={-117.259191}\n  cameradistance={10000}\n  zoom={10}\n  interactive=\"false\"\n  maptype=\"MutedStandard\"\n  showstileinfo=\"true\"\n  jwt=\"http://localhost:3141/jwt\"\n/\u003e\n```\n\n# How to Replicate\n\nHere are the steps taken to create this repo containing the Maps with Astro components. See https://docs.astro.build/en/reference/publish-to-npm\n\nYou can make use of these notes if you want to extend the Map components with Astro beyond Leaflet or MapLibre.\n\n### Leaflet dependencies\n\n```bash\n# done for you, left here for replication notes\n# pnpm install leaflet --workspace-root\n# pnpm install @types/leaflet --save-dev --workspace-root\n```\n\n### MapLibre dependencies\n\n```bash\n# done for you, left here for replication notes\n# pnpm install maplibre-gl --workspace-root\n```\n\n### Mapbox dependencies\n\n```bash\n# done for you, left here for replication notes\n# pnpm install mapbox-gl --workspace-root\n```\n\n### MapKit dependencies\n\nFor detailed information on the required fields for the JWT header and payload, see [Creating and Using Tokens with MapKit JS](https://developer.apple.com/documentation/mapkitjs/creating_and_using_tokens_with_mapkit_js).  The [MapKit JS Dashboard](https://maps.developer.apple.com/token-maker) also has a tool called *Create a Token*.\n\n```bash\n# done for you, left here for replication notes\n# pnpm install @types/apple-mapkit-js-browser --save-dev --workspace-root\n```\n\n## 🧞 Commands\n\nAll commands are run from the root of the project, from a terminal:\n\n| Command                    | Action                                           |\n| :------------------------- | :----------------------------------------------- |\n| `npm link`                 | Registers this package locally. for use with `./test` |\n| `pnpm link maps-withastro` | Run in the `test/` Astro project to install your components |\n| `npm publish`              | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser) |\n\n\n\u003c!-- Markdown Reference-style Links\n* The title attribute will be used as `alt` in the HTML anchor\n* Example\n  [link identifier]: URL \"title attribute for the link\"\n--\u003e\n\n[vscode.dev]: https://vscode.dev/github/roblabs/maps-withastro \"A lightweight version of VS Code running fully in the browser.\"\n\n[maps-withastro.RobLabs.com]: https://maps-withastro.RobLabs.com \"🎲 🎲 Live_Demo\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froblabs%2Fmaps-withastro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froblabs%2Fmaps-withastro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froblabs%2Fmaps-withastro/lists"}