## Usage
### MapLibre Tag
```
{% maplibre %}
```
The following optional attributes are supported:
- id
- width
- height
- class
- style
- zoom
- center
- description
- latitude
- longitude
The flag `no_cluster` can be used to disable clustering of points.
Example with all attributes and flags:
```
{% maplibre id="custom-id" width="100%" height="200" class="custom-class" style="clear: both;" zoom="10" center="4.300,50.800" description="Popup Link" longitude="4.300" latitude="50.800" no_cluster %}
```
**Hint:** Icons/sprites work with the dev server only with `localhost` but not with `127.0.0.1`!
### Data Source
Jekyll MapLibre offers several ways to add markers to the map. While in principle MapLibre GL JS allows to add all kinds of data other than markers to the map, more configuration must be added to the style definition.
#### Location data in the tag attributes
Example:
```
{% maplibre longitude="4.300" latitude="50.800" %}
```
#### Location data in the YAML frontmatter
```yml
location:
latitude: 50.800
longitude: 4.300
```
#### GeoJSON data in the YAML frontmatter
The `geojson` attribute in the YAML frontmatter supports (a) individual GeoJSON features or (b) collections of features.
Individual feature:
```
geojson:
type: Feature
properties:
description: |
A Little Night MusicThe Arlington Players' production of Stephen Sondheim's A Little Night Music comes to the Kogod Cradle at The Mead Center for American Theater (1101 6th Street SW) this weekend and next. 8:00 p.m.
geometry:
type: Point
coordinates: [4.300, 50.800]
```
Collection of features:
```
geojson:
type: FeatureCollection
features:
-
type: Feature
properties:
description: "A Little Night MusicThe Arlington Players' production of Stephen Sondheim's A Little Night Music comes to the Kogod Cradle at The Mead Center for American Theater (1101 6th Street SW) this weekend and next. 8:00 p.m.
\n"
geometry:
type: Point
coordinates: [4.376, - 50.83012]
-
type: Feature
...
```
#### GeoJSON data in a JSON file
The `geojson` attribute in the YAML frontmatter can also contain a URL with `.json` extension.
Example:
```
geojson: /post-locations.json`
```
The linked file can be a static file on the same host or another server. If the data source points to a generated file capturing the `location` attribute of posts, Jekyll MapLibre can display maps with post markers.
Example for `/post-locations.json`:
```
{% assign posts = site.posts | where_exp:"location", "location != nil" %}
{
"type": "FeatureCollection",
"features": [
{% for post in posts limit:20 %}
{
"type": "Feature",
"properties": {
"description": "{{post.title}}
{{post.description}}
"
},
"geometry": {
"type": "Point",
"coordinates": {{post.location | jsonify }}
}
}{% unless forloop.last %},{% endif %}
{% endfor %}
]
}
```
With `where` and `where_exp` (see [documentation](https://jekyllrb.com/docs/liquid/filters/)), Jekyll permits to implement various filters.
### Marker Cluster
Clusters are enabled by default. Use the flag `no_cluster` in the tag to disable clusters.
## Contributing
1. Fork it (https://github.com/rriemann/jekyll-maplibre/fork)
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request
## TODOs
The following issues and limitation require contribution:
- implement random SVG markers, see: ,
- implement more than one map tag per page
- add more examples on how to generate geojson data from Jekyll collections/data.
- Jekyll-Maps has spec tests (still in this repo) – make them work again with Jekyll MapLibre
- add flag to switch popups to open by default (without click to open)
- fix bug: `Liquid Exception: stack level too deep in [your file].md/#excerpt` (current work around, use maplibre tags only after the excerpt `\