Astro Leaflet is the native Astro component for leaflet. leaflet is used to display maps, such as google maps or openstreetmap, along with markers, lines,...
Get the latest version from NPM:
$ npm install astro-leaflet
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.
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
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-leafletcomponents <ControlLayer>, <LayerGroup>, <BaseLayer> and <Overlay>
Main component to create a leaflet map. Check following examples (code is provided):
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
tileByNameis not provided, this is the url of the main tile layer. Default is the one of openstreetmap when neithertileByNamenortileLayeris provided. tileLayerOptions: Leaflet options to set the attribution,...mapOptions: Leaflet optionssetViewOptions: Leaflet optionscenter: array of latitude and longitude. Default is centered on south europezoom: a number for the zoom. Default is 2, that is a far viewmarkers: an array ofAstroLeafletMarkerType
Basic example to display google satellite images:
<Leaflet options={{ tileByName: 'Google' }} />
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:
OSMGoogle: default is satelliteGoogle&type=satelliteGoogle&type=streetGoogle&type=hybridGoogle&type=terrainGoogle&type=hybrid&extra=transit,bike- The language can also be provided adding
&lang=xx, such as for exampleGoogle&type=street&lang=en
- Michelin: default is map
Michelin&mapMichelin&label
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:
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:
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:
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
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:
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:
Please check the online doc for a fullset of examples.
Full code is provided.
Astro-leaflet is released under the MIT license.
Astro-leaflet is using leaflet. leaflet is a BSD-2-Clause license software
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'],
}
},
...
});