Introduction
Previously, I have developed a webmap with Mapbox GL JS version 1.x and its plugings. These years, because the MapLibre GL JS is growing, I would like to try to make a web map with MapLibre and its plugins. I took note of my work for our future reference.
My environment
- Windows 10
- PowerShell (PSVersion 5.1.190041.1682)
Implementation of plugins
For testing purpose, I created a GitHub repository and tested plugins.
For easy implementation and demonstration purpose, I try NOT using "import", and I did not use webpack to complie javascripts at this stage. So you can easily follow the each procedure written in this memo.
Preparation 1: Creating GitHub repository
For this work, I have created https://github.com/ubukawa/libre-plugin as a working repository. My docker does not start these days, so I decided to use my PowerShell for running command, and to use GitHub page for web hosting, rather than using local hosting with nodejs or budo.
Preparation 2: Preparing MapLibre GL JS
I made a docs directory for web hosting, and downloaded the latest MapLibre GL JS and its license in it with the following command.
mkdir docs
cd docs
mkdir maplibre-gl@2.4.0
cd maplibre-gl@2.4.0
curl.exe -O https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js
curl.exe -O https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js.map
curl.exe -O https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css
curl.exe -O https://github.com/maplibre/maplibre-gl-js/blob/v2.4.0/LICENSE.txt
cd ..
Preparing the styles
This time, for testing map, I decided to use some exisitng styles from my past tests. I wanted to try with the style switcher, so I copied two styles.
curl.exe -O https://ubukawa.github.io/plugs/std.json
curl.exe -O https://ubukawa.github.io/plugs/std-photo.json
Preparation 3: Enabling GitHub page
Now, the docs directory works for the GitHub page. (I changed the setting as below.)
Preparation 4: Making a simle map by MapLibre
I made a simple html to host a simple web map.
Demo: https://ubukawa.github.io/libre-plugin/map01.html
HTML: https://github.com/ubukawa/libre-plugin/blob/main/docs/map01.html
Plugin 1: Adding maplibre-gl-export
By using this plugin, we can export the map as an image. I think this plugin is relased from watergis and its latest version is v.1.3.6 as of 2 September 2022.
https://github.com/watergis/maplibre-gl-export/releases/tag/v1.3.6
We can just add css and js in the header, and add a MapLibreExportControl as map.addContorol.
...
<html>
<head>
...
<link href='https://watergis.github.io/maplibre-gl-export/maplibre-gl-export.css' rel='stylesheet' />
<script src="https://watergis.github.io/maplibre-gl-export/maplibre-gl-export.js"></script>
</head>
<body>
...
<script>
...
map.addControl(new MaplibreExportControl({
PageSize: Size.A4,
PageOrientation: PageOrientation.Portrait,
Format: Format.PNG,
DPI: DPI[96],
//Crosshair: true,
PrintableArea: true,
Local: 'en'
}), 'top-right');
</script>
</body>
</html>
You can see the html example here:
Demo: https://ubukawa.github.io/libre-plugin/map02.html
HTML: https://github.com/ubukawa/libre-plugin/blob/main/docs/map02.html
Please be advised that the maplibre-gl-export (as of v.1.3.6) does not work well with MapLibre 3D terrain.
Plugin 2: Adding a style switcher
This is a function to switch the base map, or I mean switching the style of the base map.
There is a famous style switcher, el/style-switcher, developed for Mapbox GL JS, and the earlier version of MapLibre GL JS can use it. However, the latest version of MapLibre GL JS may not be able to use it. (Please see the following issues.)
As the el's style switcher does not support for the later version of MapLibre after 1.14. I explored how we can realise it. Then, I find that there are some examples of achieving this style switcher function using javascript (see below). MapTiler also provides a good examples.
From above examples, I think the following implementation is similar to el/style-switcher, so I will go with it.
I made a html. I added javascrips and style in the header for MapLibreStyleSwitcherControl, and added a variable "styles" and MapLibreStyleSwitcherControl in the script at the body. You can see it from the below URL:
Demo: https://ubukawa.github.io/libre-plugin/map03.html
HTML: https://github.com/ubukawa/libre-plugin/blob/main/docs/map03.html
Plugin 3: Legend Control
This plugin is also from watergis. We can control the legend, and turn on/off some layers ("style layers") with this plugin (note: I specified some raster and hillshade layers in the above figure, but this plugin would work well with vector layers.). https://github.com/watergis/mapbox-gl-legend
I added the following two lines in the header.
<link href='https://watergis.github.io/maplibre-gl-legend/maplibre-gl-legend.css' rel='stylesheet' />
<script src="https://watergis.github.io/maplibre-gl-legend/maplibre-gl-legend.js"></script>
And, I added the followings in the body script.
// for legend control
const targets = {
'Geology': 'Geological map',
'hills': 'Hillshade',
};
map.addControl(new MaplibreLegendControl(targets, {
showDefault: false,
showCheckbox: true,
onlyRendered: true,
reverseOrder: true
}), 'top-left');
Demo1: https://ubukawa.github.io/libre-plugin/map04.html
Demo2: https://ubukawa.github.io/libre-plugin/map04-a.html
HTML: https://github.com/ubukawa/libre-plugin/blob/main/docs/map04.html
Instead of using "targets", we can show the all layers with a line like map.addControl(new MaplibreLegendControl({}, {reverseOrder: false}), 'bottom-left');
A basemap can contain a lot of style layers. So, to show all layer is sometimes difficult.
(FYI) Area Switcher, and other
Another my favorite plugin for Mapbox GL JS is "area switcher" by watergis. Using the area switcher, we can jump into the specified areas. However, it seems that there is no such plugin available for MapLibre GL JS as of 2 September 2022. So, I gave up installing such function in my map with MapLibre for the time being.
https://github.com/watergis/mapbox-gl-area-switcher
If you are interested in, you can refer to the plugin lists by Mapbox and MapLibre:
You can also read my previous memo below(use translator APP if necessary).
Summary
Thus, I have demonstrated how we can add several plugins for MapLibre GL JS.
I just introduced some of my favorite plugins, and this memo dose not cover all plugins.
To reduce the number of referenced script files, you can use module bundlers such as webpack (nodejs/npm).
References
- MapLibre GL JS https://github.com/maplibre/maplibre-gl-js
- My test repository for this test https://github.com/ubukawa/libre-plugin
The URLs of the other sources, such as the source of plugins, are written in each chapter.
Acknowledgement
Special thanks to those who worked hard to develop these wonderful plugins. In particular, I learned a lot from the work by watergis and Mr. Jin Igarashi. Thank you.