Demo

Installation

Get the latest version from NPM:

$ npm install astro-leaflet

Want to help?

Please open an issue to ask for:

• bug fix
• add a new feature, part of leaflet, but not implemented in astro-leaflet yet
• having your favorite tile url be part of a friendly name. This helps everyone quickly chosing the right map.

Contributions and Pull Request are welcome.

Usage

Here is a minimal example that is using openstreetmap

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

In case no map is displayed, or in case of any problem, please refer to the Troubleshooting section

Tutorials

astro-dev provides different ways of using astro-leaflet

Leaflet tutorials is a great way to learn Leaflet. Here is a list of the leaflet tutorials implemented with astro-leaflet.

• Layer Groups and Layers Control: A tutorial on how to manage groups of layers and use the layer switching control. It demontrates how to use astro-leaflet components <ControlLayer>, <LayerGroup>, <BaseLayer> and <Overlay>

Components:

<LeafLet>

Main component to create a leaflet map. Check following examples (code is provided):

• Minimal usage of <Leaflet>
• Google Earth and markers

Usage:

<Leaflet options={{...}}>
</leaflet>

with the following option properties:

• tileByName: friendly name of the layer to display. Check astro-dev for an interactive description and display of implemented human friendly name. Section tileByName gives more details on this parameter, and its possible values
• tileLayer: if tileByName is not provided, this is the url of the main tile layer. Default is the one of openstreetmap when neither tileByName nor tileLayer is provided.
• tileLayerOptions: Leaflet options to set the attribution,...
• mapOptions: Leaflet options
• setViewOptions: Leaflet options
• center: array of latitude and longitude. Default is centered on south europe
• zoom: a number for the zoom. Default is 2, that is a far view
• markers: an array of AstroLeafletMarkerType

<Leaflet options={{ tileByName: 'Google' }} />

tileByName

This parameter is used in <LeafLet> and <TileLayer>. This is a friendly name to infer url address of the layer, as well as the associated options, such as subdomains,...

Please check astro-dev to list friendly names, and preview the result in Leaflet.

Here is a non-exhaustive list:

• OSM
• Google: default is satellite
  • Google&type=satellite
  • Google&type=street
  • Google&type=hybrid
  • Google&type=terrain
  • Google&type=hybrid&extra=transit,bike
  • The language can also be provided adding &lang=xx, such as for example Google&type=street&lang=en
• Michelin: default is map
  • Michelin&map
  • Michelin&label

<TileLayer>

Component to add a layer on top of the main layer. This can be usefull for example to display labels on top of satellite images. Must be implemented in the <Leaflet> slot.

Usage:

<TileLayer
  urlTemplate='url of the tiles to overlay
  options={{ leaflet options of tileLayer() }}>

Full example can be found at:

• NYC Marathon

<Polyline>

Components to draw polyline overlays on a map. Must be implemented in the <Leaflet> slot.

Usage:

<Polyline
  latlngs={array of LatLngTuple[]}
  options={{  leaflet options of polyline() }}>

Full example can be found at:

• NYC Marathon

<FitBounds>

Components to automatically center the map on elements of the map, such as the points of a polyline. Must be in the slot of the element to center to.

<FitBounds/>

Full example can be found at:

• NYC Marathon

<ImageOverlay>

Components to load and display a single image over specific bounds of the map.

• imageUrl: URL of the image
• bounds: geographical bounds it is tied to
• options: optional leaflet options of the ImageOverlay: opacity,...

Example:

<ImageOverlay
  imageUrl="https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
  bounds={[[40.712216, -74.22655], [40.773941, -74.12544]]}
  options={{opacity:0.5}}
/>

Full example can be found at astro-dev#ImageOverlay

API

For each astro-leaflet components, there is a link to the full demo and code:

• \<Circle>: Leaflet Quick Start Guide
• \<Marker>: Leaflet Quick Start Guide, Layer Groups and Layers Control
• \<Polygon>: Leaflet Quick Start Guide
• \<GeoJson>: Interactive Choropleth Map,

• \<ControlLayer>: Interactive Choropleth Map,
• \<ControlLayer>: Layer Groups and Layers Control
• \<LayerGroup>: Layer Groups and Layers Control
• \<BaseLayer>: Layer Groups and Layers Control
• \<Overlay>: Layer Groups and Layers Control

• \<Popup>: Leaflet Quick Start Guide, Layer Groups and Layers Control

• \<FitBounds>: Layer Groups and Layers Control

• \<FitWorld>: Leaflet on Mobile,

• Dealing with events:
  • Leaflet Quick Start Guide,
  • Leaflet on Mobile,
  • Interactive Choropleth Map,

<CreateLeafletIcon>

Create a custom icon to be displayed in markers. Must be implemented before the <Leaflet> slot.

Note that only divicons are supported for the time-being.

Usage:

<CreateLeafletIcon
  name='name of the icon to be used in markers'
  options={{
    className:"leaflet-icon-myicon",
    iconSize: [20,20]
    ...
  }}/>
<Leaflet options={options}/>

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

Full example can be found at:

• Google Earth and markers

Complex Examples

Please check the online doc for a fullset of examples.

Full code is provided.

License

Astro-leaflet is released under the MIT license.

Astro-leaflet is using leaflet. leaflet is a BSD-2-Clause license software

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'],
    }
  },
  ...
});