astro-leaflet

Install

npm install astro-leaflet

Read the full doc on Github

Leaflet documentation can be found on leafletjs.com

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 <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 © 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
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',
},
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>