README.md in jekyll-maplibre-1.0.pre.alpha.1 vs README.md in jekyll-maplibre-1.0.0.pre.beta.1
- old
+ new
@@ -25,11 +25,11 @@
- jekyll-maplibre
```
3. Also prepare configuration specific for `jekyll-maplibre` in your site's `_config.yml`:
-```
+```yml
maplibre:
width: 600
height: 400
zoom: 10
pmtiles: true
@@ -54,11 +54,11 @@
# - "https://klokantech.github.io/naturalearthtiles/tiles/natural_earth_2_shaded_relief.raster/{z}/{x}/{y}.png"
```
4. Prepare assets to display maps with MapLibre GL JS:
-The required assets depend on your specific map configuration. With cloud hosting (untested), it may be sufficient to only configure the `style` property above.
+The required assets depend on your specific map configuration. With cloud hosting, it is sufficient to only configure the `style` property above.
For self-hosted maps, you need to host and configure the following resources:
- **The source.** PMTiles covering the map area you need. Use `pmtiles convert input.mbtiles output.pmtiles` to convert your mbtiles from e.g. <https://data.maptiler.com/downloads/planet/>. More on `pmtiles` and extraction of custom areas at <https://docs.protomaps.com/guide/getting-started>.
- **The glyphs.** Font files in pbf format when using vector sources. Check out <https://github.com/openmaptiles/fonts/releases>.
@@ -108,16 +108,34 @@
- [fonts](https://github.com/maputnik/osm-liberty/tree/gh-pages/sprites) (the v2.0 zip)
- [maplibre-gl.js](https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js)
- [maplibre-gl.css](https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css)
- [OSM-Liberty-layers.json extracted from OSM Liberty style.json](https://github.com/maputnik/osm-liberty/blob/f2c798e80dc11d47613e3b093881b4d37a5fde8e/style.json)
+Those files are distributed as part of the [assets on Github](https://github.com/rriemann/jekyll-maplibre/releases/tag/1.0-alpha.1).
+
+It is also possible to self-host everything except the openmaptiles source and link the latter to mbtiles in the cloud, i.e.:
+
+~~~yml
+maplibre:
+ sources:
+ openmaptiles:
+ type: vector
+ url: https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=[REPLACE WITH OWN API KEY]
+ attribution: © <a href='https://openstreetmap.org'>OpenStreetMap contributors</a>
+ ...
+~~~
+
5. Load MapLibre GL JS CSS in `<head>`
The file `maplibre-gl.css` should be linked in your `<head>` or included in another css file.
Many Jeyll templates provide for a file `_includes/my-head.html` or `_includes/custom-head.html` (check the docs). If so, add a line such as `<link href="/assets/maps/maplibre-gl.css" rel="stylesheet">`.
+6. Check your Content Security Policy (CSP) headers
+
+Read more about CSP here: <https://maplibre.org/maplibre-gl-js/docs/#csp-directives>
+
## Usage
### MapLibre Tag
```
@@ -143,10 +161,12 @@
```
{% maplibre id="custom-id" width="100%" height="200" class="custom-class" style="clear: both;" zoom="10" center="4.300,50.800" description="<a href='#'>Popup Link</a>" 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
@@ -239,14 +259,10 @@
### Marker Cluster
Clusters are enabled by default. Use the flag `no_cluster` in the tag to disable clusters.
-## Examples
-
-Want to see Jekyll MapLibre in action? Check out [Demo Page](https://ayastreb.me/jekyll-maps/#examples)!
-
## 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'`)
@@ -260,9 +276,10 @@
- implement random SVG markers, see: <https://github.com/maplibre/maplibre-gl-js/discussions/3243>, <https://github.com/rbrundritt/maplibre-gl-svg/>
- 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 `\<!--more--\>`
## Similar Software
- <https://github.com/ayastreb/jekyll-maps/>
- <https://github.com/matthewowen/jekyll-mapping>