Skip to content
astro-dev

astro-leaflet

The Astro component for leaflet
Display tile maps, with markers, lines,...
Enjoy Openstreet, Google maps,...
astro-leaflet astro-leaflet leaflet

Install

Terminal window
npm install astro-leaflet

Read the full doc on Github

Leaflet documentation can be found on leafletjs.com

In case of any problem (map not displayed,…), please refer to the Troubleshooting section

Examples

Minimal

Here is a minimal map from openstreetmap, in a single line component call: <Leaflet />

Full code

Code Snippet

---
import { Leaflet } from "astro-leaflet";
---
<Leaflet />

Google Map with Markers

An hybrid map (satellite, with country names, towns…) from Google is displayed, along with 2 markers (default leaflet marker on Paris, and custom marker on New York).

The hybrid map is selected using (please check following section to list and display possible values of tileByName)

<Leaflet options={{ tileByName: 'Google&type=hybrid', }}/>

which is the same as

<Leaflet options={{
  tileLayer: 'https://{s}.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}',
  tileLayerOptions: {
    subdomains: [ 'mt0', 'mt1', 'mt2', 'mt3' ],
    attribution: 'Map data &copy; Google',
  },
}}/>

The custom icon is created using the following, along with the definition of the css class myicon-name

<CreateLeafletIcon name='myicon-name' options={{className:"leaflet-icon-myicon", iconSize: [20,20]}}/>

And the markers are added using <Leaflet/> markers

markers = [
  { latlng: [48.8575299,2.3509908],  options: {title: 'Paris'} },
  { latlng: [40.7194951,-73.9985291], options: {title: 'New York', }, astroIconName:'myicon-name'}
]

Full code

Code Snippet

---
import { Leaflet, CreateLeafletIcon } from "astro-leaflet";
---
<CreateLeafletIcon name='myicon-name' options={{className:"leaflet-icon-myicon", iconSize: [20,20]}}/>
<Leaflet
tileByName: 'Google&type=hybrid',
markers: {[
  { latlng: [48.8575299,2.3509908], options: {title: 'Paris'}},
  { latlng: [40.7194951,-73.9985291], options: {title: 'New York', }, astroIconName:'myicon-name'}
]}
/>


<style is:global>
/* class definition used to define the custom icon */
.leaflet-icon-myicon {
  background:red;
  border:5px solid rgba(255,255,255,0.5);
  border-radius:50%;
}
</style>

Select Layer

Here is the map friendly name list to be given in tileByName0 argument of LeafLet and TileLayer components. Click on the name to see how it renders, its description as well as the parameters to drive it, and how to call it in astro-leaflet.

<Leaflet options={{ tileByName: "" }} />

NYC Marathon

This demonstrates:

  • Google satellite images as the main layer, and labels from Michelin displayed on it using <TileLayer> inside <LeafLet>
  • A polyline trace - the track of the New York City Marathon - displayed using <Polyline>
  • Automatic centering of the map using <FitBounds /> inside <Polyline>

Full code

Code Snippet

---
import { Leaflet, TileLayer, Polyline, FitBounds} from "astro-leaflet";
import type { LatLngTuple } from 'leaflet'


// load marathon data: list of [lat lng]
import data from './new-york-city-marathon.json'
---


<Leaflet options={{ options={{tileByName:'Google'}} }}>
<TileLayer
  tileByName='Michelin&type=label',
  options={{ ... }} />
<Polyline latlngs={data as LatLngTuple[]} options={{color: 'red', weight: 4,}} >
  <FitBounds />
</Polyline>
</Leaflet>

Image Overlay

Work in Progress

Full code

Code Snippet

Work in Progress

Leaflet Quick Start Guide

Leaflet Tutorial implemented with astro-leaflet. This will quickly get you started on Leaflet basics, including setting up a Leaflet map, working with markers, polylines and popups, and dealing with events.

Full code

Highlights:

  • \<Leaflet> is used with
    • id="map-quick-start" to style the height of the map in the \<style is:global> section
    • in order to not use a default height, style="" is provided. This is because a default map size is provided when neither style nor class is given.
    • center and zoom are provided
    • Note that it is not necessary to provide the tile url address as the default tiles comes from openstreetmap
  • \<Marker>, \<Circle> and \<Polygon> are given along with \<Popup>
  • The standalone \<Popup> is given with latlng.

Dealing with event must be performed in the \<script> part:

  • when load event is fired, we are ensured all leaflet elements are created, including the map. The map can be retrieved using its id by calling
        const map = getMapFromId('map-quick-start')
  • the event and popup can then be created using standard leaflet js code

Leaflet on Mobile

Leaflet Tutorial implemented with astro-leaflet. Create a map tuned, and how to easily detect and use the current user location

Full code

Highlights:

  • \<Leaflet> with an id to be able to get the associated map into the script part
  • /<FitWorld> and /<Locate> inside \<Leaflet>
  • Events are dealt in the \<script> part:
    • get the map
    • catch locationfound and locationerror
    • draw marker and circle around the found position

Interactive Choropleth Map

Leaflet Tutorial implemented with astro-leaflet. This is a case study of creating a colorful interactive choropleth map of US States Population Density with the help of GeoJSON and some custom controls (that will hopefully convince all the remaining major news and government websites that do not use Leaflet yet to start doing so).

Full code

US Population Density

Hover over a state
0–10
10–20
20–50
50–100
100–200
200–500
500–1000
1000+

Highlights:

  • \<GeoJson> to have US states overlayed on the map
  • \<Control> to display legend, and information on the hovered state
  • the script part contains:
    • style of hovered states
    • events to update the information on the hovered state, as well as another style for the hovered states

Layer Groups and Layers Control

Leaflet Tutorial implemented with astro-leaflet. It will show you how to group several layers into one, and how to use the layers control to allow users to easily switch different layers on your map

Full code

Highlights:

  • \<Leaflet> with noDefault={true} so that no default layer is added onto the map
  • \<ControlLayer> to select the layers to be displayed, and switch from one to another
  • \<BaseLayer> to add a \<TileLayer> onto the control as a checkbox
  • \<LayerGroup> to group \<Marker>, to be able to select them all in once
  • \<Overlay> to add a \<LayerGroup> onto the control as a radio

Troubleshooting

Map not displayed

If the map is not displayed, and you have the following error in the console

Uncaught SyntaxError: The requested module '/node_modules/leaflet/dist/leaflet-src.js?v=c7414b9d' does not provide an export named 'layerGroup' (at layergroup.ts?v=c7414b9d:1:10)

or

SyntaxError: Importing binding name 'default' cannot be resolved by star

then you have to add the following inside astro.config.mjs:

export default defineConfig({
  ...
  vite: {
    optimizeDeps: {
      include: ['leaflet'],
    }
  },
  ...
});

Test Your Url

Provide your favorite tile url, and see how it renders.