Skip to content

docs: update the MapLibre GL JS examples to 6.16 #3671

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blacha merged 3 commits into from
Oct 28, 2026
Merged

docs: update the MapLibre GL JS examples to 6.16 #3671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
82bc692
docs: update the MapLibre GL JS examples to 6.16
birkskyum Oct 27, 2026
2aa339a
docs: check the integrity of MapLibre GL JS in the examples
birkskyum Oct 28, 2026
5c1454d
docs: check the integrity of MapLibre GL JS in the user guide examples
birkskyum Oct 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 14 additions & 7 deletions docs/examples/index.maplibre.opacity.3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,7 @@
<meta charset="utf-8" />
<title>Adjust a layer's opacity</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.css" />
<script
src="https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.js"
integrity="sha384-EYXW8ZhnlWPofZd2XtrFMKIJZXd8x1vTls280ww621jL26+4304H6YXxvU6RcKYd"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css" />
<style>
body {
margin: 0;
Expand Down Expand Up @@ -80,7 +75,19 @@
</div>
</div>

<script>
<script type="importmap">
{
"imports": {
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs"
},
"integrity": {
"https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs": "sha384-uLwQnFL74rrONqIWx/ubL4wcAtA2h08tbMDZd9U4KbQ7GhaA7S1XKepHU89UkU7C"
}
}
</script>
<script type="module">
import * as maplibregl from 'maplibre-gl';

// vector layers
const styleUrl =
'https://basemaps.linz.govt.nz/v1/tiles/topographic/WebMercatorQuad/style/topographic.json?api=d01hep5551e30kxb7w85hck49tp';
Expand Down
21 changes: 14 additions & 7 deletions docs/examples/index.maplibre.vector.3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,7 @@
<meta charset="utf-8" />
<title>Maplibre WGS84 Topographic Vector Basemaps Demo</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.css" />
<script
src="https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.js"
integrity="sha384-EYXW8ZhnlWPofZd2XtrFMKIJZXd8x1vTls280ww621jL26+4304H6YXxvU6RcKYd"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css" />
<style>
body {
margin: 0;
Expand All @@ -27,7 +22,19 @@

<body>
<div id="map"></div>
<script>
<script type="importmap">
{
"imports": {
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs"
},
"integrity": {
"https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs": "sha384-uLwQnFL74rrONqIWx/ubL4wcAtA2h08tbMDZd9U4KbQ7GhaA7S1XKepHU89UkU7C"
}
}
</script>
<script type="module">
import * as maplibregl from 'maplibre-gl';

const startPos = [173, -40.5];
const startZoom = 6;

Expand Down
17 changes: 14 additions & 3 deletions docs/user-guide/working-with-vector-tiles/styling/index.maplibre.vector.3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css" rel="stylesheet" />
<link href="https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
Expand All @@ -17,7 +16,19 @@

<body>
<div id="map"></div>
<script>
<script type="importmap">
{
"imports": {
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs"
},
"integrity": {
"https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs": "sha384-uLwQnFL74rrONqIWx/ubL4wcAtA2h08tbMDZd9U4KbQ7GhaA7S1XKepHU89UkU7C"
}
}
</script>
<script type="module">
Comment thread
birkskyum marked this conversation as resolved.
Resolved
import * as maplibregl from 'maplibre-gl';

const map = new maplibregl.Map({
container: 'map',

Expand Down
17 changes: 14 additions & 3 deletions docs/user-guide/working-with-vector-tiles/usage/index.maplibre.vector.3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css" rel="stylesheet" />
<link href="https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
Expand All @@ -15,7 +14,19 @@
</head>
<body>
<div id="map"></div>
<script>
<script type="importmap">
{
"imports": {
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs"
},
"integrity": {
"https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs": "sha384-uLwQnFL74rrONqIWx/ubL4wcAtA2h08tbMDZd9U4KbQ7GhaA7S1XKepHU89UkU7C"
}
}
</script>
<script type="module">
Comment thread
birkskyum marked this conversation as resolved.
Resolved
import * as maplibregl from 'maplibre-gl';

const map = new maplibregl.Map({
container: 'map',
style: 'https://basemaps.linz.govt.nz/v1/styles/topolite-v2.json?api=c01jwykec5weqkbr50vc30xwzgs',
Expand Down
42 changes: 24 additions & 18 deletions packages/landing/static/examples/index.maplibre.compare.3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,10 @@
<meta charset="utf-8" />
<title>Maplibre WGS84 Swipe between raster and vector maps Demo</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script
src="https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.js"
integrity="sha384-jzJlE25T0D6awCZu40rkb9hFa6fxUC8/IN9wKY49uH9k/PP5efecoiru/RGCszy2"
crossorigin="anonymous"
></script>
<script
src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"
integrity="sha384-YAsv3Nk7n9hAR/gbvgvtGvq2TV1hvEpFks3bGIs451f9D0jSn070rHje6Swuo7bL"
crossorigin="anonymous"
></script>
<link href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css" rel="stylesheet" />
<script
src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.js"
integrity="sha384-4vY2uVrBcMvF9vEZC0sp2hF66Ux2LY8PbIv23Mx1LQ1J+WyNUajJwqfiWVAIBUGA"
crossorigin="anonymous"
></script>
<link href="https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css"
href="https://unpkg.com/@maplibre/maplibre-gl-compare@0.5.0/dist/maplibre-gl-compare.css"
type="text/css"
/>
<style>
Expand Down Expand Up @@ -53,7 +38,28 @@
<div id="raster" class="map"></div>
<div id="vector" class="map"></div>
</div>
<!-- The compare plugin is a classic script that adds Compare to a global maplibregl object. -->
<script>
window.maplibregl = {};
</script>
<script
src="https://unpkg.com/@maplibre/maplibre-gl-compare@0.5.0/dist/maplibre-gl-compare.js"
integrity="sha384-PbnOMeczeF8frBARf822XaLnOV2gX5rZUyrdmvX9W2asT2JXwHMMxrMoXde4xPlX"
crossorigin="anonymous"
></script>
<script type="importmap">
{
"imports": {
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs"
},
"integrity": {
"https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs": "sha384-uLwQnFL74rrONqIWx/ubL4wcAtA2h08tbMDZd9U4KbQ7GhaA7S1XKepHU89UkU7C"
}
}
</script>
<script type="module">
import * as maplibregl from 'maplibre-gl';

const apiKey = localStorage.getItem('api-key');
if (!apiKey) {
throw new Error('Missing api-key in localStorage');
Expand Down Expand Up @@ -102,7 +108,7 @@
// A selector or reference to HTML element
var container = '#comparison-container';

new mapboxgl.Compare(raster, vector, container, {
new window.maplibregl.Compare(raster, vector, container, {
mousemove: true, // Optional. Set to true to enable swiping during cursor movement.
orientation: 'vertical', // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical
});
Expand Down
21 changes: 14 additions & 7 deletions packages/landing/static/examples/index.maplibre.elevation.3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,7 @@
<meta charset="utf-8" />
<title>Maplibre Elevation With Terrain-rgb Demo</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script
src="https://unpkg.com/maplibre-gl@4.0.1/dist/maplibre-gl.js"
integrity="sha384-QjD9FqfhisGHV+cOv+EZTmWGaKkTJgx6gRP7pgmyQns3aWACZb18pTpxTmRRAaDF"
crossorigin="anonymous"
></script>
<link href="https://unpkg.com/maplibre-gl@4.0.1/dist/maplibre-gl.css" rel="stylesheet" />
<link href="https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
Expand All @@ -27,7 +22,19 @@

<body>
<div id="map"></div>
<script>
<script type="importmap">
{
"imports": {
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs"
},
"integrity": {
"https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs": "sha384-uLwQnFL74rrONqIWx/ubL4wcAtA2h08tbMDZd9U4KbQ7GhaA7S1XKepHU89UkU7C"
}
}
</script>
<script type="module">
import * as maplibregl from 'maplibre-gl';

const apiKey = localStorage.getItem('api-key');
if (apiKey == null) throw new Error('Missing api-key in localStorage');

Expand Down
21 changes: 14 additions & 7 deletions packages/landing/static/examples/index.maplibre.opacity.3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,7 @@
<meta charset="utf-8" />
<title>Adjust a layer's opacity</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script
src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"
integrity="sha384-YAsv3Nk7n9hAR/gbvgvtGvq2TV1hvEpFks3bGIs451f9D0jSn070rHje6Swuo7bL"
crossorigin="anonymous"
></script>
<link href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css" rel="stylesheet" />
<link href="https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
Expand Down Expand Up @@ -79,7 +74,19 @@
</div>
</div>

<script>
<script type="importmap">
{
"imports": {
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs"
},
"integrity": {
"https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs": "sha384-uLwQnFL74rrONqIWx/ubL4wcAtA2h08tbMDZd9U4KbQ7GhaA7S1XKepHU89UkU7C"
}
}
</script>
<script type="module">
import * as maplibregl from 'maplibre-gl';

const apiKey = localStorage.getItem('api-key');
if (!apiKey) {
throw new Error('Missing api-key in localStorage');
Expand Down
21 changes: 14 additions & 7 deletions packages/landing/static/examples/index.maplibre.vector.3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,7 @@
<meta charset="utf-8" />
<title>Maplibre WGS84 Topographic Vector Basemaps Demo</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script
src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"
integrity="sha384-YAsv3Nk7n9hAR/gbvgvtGvq2TV1hvEpFks3bGIs451f9D0jSn070rHje6Swuo7bL"
crossorigin="anonymous"
></script>
<link href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css" rel="stylesheet" />
<link href="https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
Expand All @@ -25,7 +20,19 @@
</head>
<body>
<div id="map"></div>
<script>
<script type="importmap">
{
"imports": {
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs"
},
"integrity": {
"https://unpkg.com/maplibre-gl@6.16.0/dist/maplibre-gl.mjs": "sha384-uLwQnFL74rrONqIWx/ubL4wcAtA2h08tbMDZd9U4KbQ7GhaA7S1XKepHU89UkU7C"
}
}
</script>
<script type="module">
import * as maplibregl from 'maplibre-gl';

const apiKey = localStorage.getItem('api-key');
if (!apiKey) {
throw new Error('Missing api-key in localStorage');
Expand Down
Loading