___________________________________

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

`jsx
---
import { Leaflet } from "astro-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
\, \, \ and \




___________________________________

Components:

\

Main component to create a leaflet map.
Check following examples (code is provided):
* Minimal usage of ``
* Google Earth and markers


Usage:
`


`

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`



Basic example to display google satellite images:

`

`

$3

This parameter is used in `` and ``.
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`




___________________________________

\

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 `` slot.

Usage:
`
urlTemplate='url of the tiles to overlay
options={{ leaflet options of tileLayer() }}>
`

Full example can be found at:
* NYC Marathon




___________________________________

\

Components to draw polyline overlays on a map.
Must be implemented in the `` slot.


Usage:
`
latlngs={array of LatLngTuple[]}
options={{ leaflet options of polyline() }}>
`

Full example can be found at:
* NYC Marathon





___________________________________

\

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.

`

`

Full example can be found at:
* NYC Marathon





___________________________________

\

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:

`
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:
* `\`:
Leaflet Quick Start Guide
* `\`:
Leaflet Quick Start Guide,
Layer Groups and Layers Control
* `\`:
Leaflet Quick Start Guide
* `\`:
Interactive Choropleth Map,




* `\`:
Interactive Choropleth Map,
* `\`:
Layer Groups and Layers Control
* `\`:
Layer Groups and Layers Control
* `\`:
Layer Groups and Layers Control
* `\`:
Layer Groups and Layers Control




* `\`:
Leaflet Quick Start Guide,
Layer Groups and Layers Control

* `\`:
Layer Groups and Layers Control
* `\`:
Leaflet on Mobile,




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


___________________________________

\

Create a custom icon to be displayed in markers.
Must be implemented before the `` slot.

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

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



`

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

`js
export default defineConfig({
...
vite: {
optimizeDeps: {
include: ['astro-leaflet > leaflet'],
}
},
...
});
``

According to vite
> CommonJS dependencies should not be excluded from optimization. If an ESM dependency is
> excluded from optimization, but has a nested CommonJS dependency, the CommonJS dependency
> should be added to optimizeDeps.include.

Leaflet 2.x will be ESM. It is still in alpha release at the time of writing, so
astro-leaflet is using 1.9 version which is CommonJS.