Skip to content
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

docs: Add Maplibre and leaflet examples into basemaps documents. BM-918 #3005

Merged
merged 3 commits into from
Nov 14, 2023
Merged

docs: Add Maplibre and leaflet examples into basemaps documents. BM-918 #3005

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d1c1df2
Add Maplibre and leaflet examples into basemaps documents
Wentao-Kuang Nov 12, 2023
b258603
Add overview page, and update unpkg to latest versions.
Wentao-Kuang Nov 13, 2023
812e0e6
Add SRIs and formatting files.
Wentao-Kuang Nov 13, 2023
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
40 changes: 40 additions & 0 deletions docs/examples/index.leaflet.xyz.3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Leaflet WGS84 Basemaps Demo</title>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>

<body>
<div id="map" style="width: 100%; height: 500px;"></div>
<script>
const apiKey = 'd01hep5551e30kxb7w85hck49tp';

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

const url = 'https://basemaps.linz.govt.nz/v1/tiles/aerial/EPSG:3857/{z}/{x}/{y}.webp?api='+apiKey;

const tiles = L.tileLayer(url, {
attribution: '<a href="https://www.linz.govt.nz/data/linz-data/linz-basemaps/data-attribution">LINZ CC BY 4.0 © Imagery Basemap contributors</a>'
});

L.map('map')
.addLayer(tiles)
.setView(startPos, startZoom);

</script>
</body>
</html>
108 changes: 108 additions & 0 deletions docs/examples/index.maplibre.compare.3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html>
<head>
<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"
Wentao-Kuang marked this conversation as resolved.
Show resolved Hide resolved
integrity="sha384-jzJlE25T0D6awCZu40rkb9hFa6fxUC8/IN9wKY49uH9k/PP5efecoiru/RGCszy2"
crossorigin="anonymous"
></script>
<script
src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"
integrity="sha384-YAsv3Nk7n9hAR/gbvgvtGvq2TV1hvEpFks3bGIs451f9D0jSn070rHje6Swuo7bL"
crossorigin="anonymous"
></script>
<link href="https://unpkg.com/[email protected]/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
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css"
type="text/css"
/>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}

body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="comparison-container"></div>
<div id="raster" class="map"></div>
<div id="vector" class="map"></div>
</div>
<script>
const apiKey = 'd01hep5551e30kxb7w85hck49tp';

// vector layers
const styleUrl =
'https://basemaps.linz.govt.nz/v1/tiles/topographic/EPSG:3857/style/topographic.json?api=' + apiKey;

// Raster layers
const url = 'https://basemaps.linz.govt.nz/v1/tiles/aerial/EPSG:3857/{z}/{x}/{y}.webp?api=' + apiKey;

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

var raster = new maplibregl.Map({
container: 'raster', // Container ID
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tiles: [url],
tileSize: 256,
},
},
layers: [
{
id: 'LINZ Raster Basemaps',
type: 'raster',
source: 'raster-tiles',
},
],
},
center: startPos,
zoom: startZoom,
});

var vector = new maplibregl.Map({
container: 'vector', // Container ID
style: styleUrl,
center: startPos,
zoom: startZoom,
});

// A selector or reference to HTML element
var container = '#comparison-container';

new mapboxgl.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
});
</script>
</body>
</html>
215 changes: 215 additions & 0 deletions docs/examples/index.maplibre.opacity.3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
<!DOCTYPE html>
<html>
<head>
<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/[email protected]/dist/maplibre-gl.js"
Wentao-Kuang marked this conversation as resolved.
Show resolved Hide resolved
integrity="sha384-YAsv3Nk7n9hAR/gbvgvtGvq2TV1hvEpFks3bGIs451f9D0jSn070rHje6Swuo7bL"
crossorigin="anonymous"
></script>
<link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}

body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}

.map-overlay {
font: bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
width: 25%;
top: 0;
left: 0;
padding: 10px;
}

.map-overlay .map-overlay-inner {
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
}

.map-overlay label {
display: block;
margin: 0 0 10px;
}

.map-overlay input {
background-color: transparent;
display: inline-block;
width: 100%;
position: relative;
margin: 0;
cursor: ew-resize;
}
</style>
</head>
<body>
<div id="raster" class="map"></div>
<div id="vector" class="map"></div>

<div class="map-overlay top">
<div class="map-overlay-inner">
<label>Layer opacity: <span id="slider-value">100%</span></label>
<input id="slider" type="range" min="0" max="100" step="0" value="100" />
</div>
</div>

<script>
const apiKey = 'd01hep5551e30kxb7w85hck49tp';

// vector layers
const styleUrl =
'https://basemaps.linz.govt.nz/v1/tiles/topographic/EPSG:3857/style/topographic.json?api=' + apiKey;

// Raster layers
const url = 'https://basemaps.linz.govt.nz/v1/tiles/aerial/EPSG:3857/{z}/{x}/{y}.webp?api=' + apiKey;

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

var raster = new maplibregl.Map({
container: 'raster', // Container ID
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tiles: [url],
tileSize: 256,
},
},
layers: [
{
id: 'LINZ Raster Basemaps',
type: 'raster',
source: 'raster-tiles',
},
],
},
center: startPos,
zoom: startZoom,
});

var vector = new maplibregl.Map({
container: 'vector', // Container ID
style: styleUrl,
center: startPos,
zoom: startZoom,
});

var slider = document.getElementById('slider');
var sliderValue = document.getElementById('slider-value');

vector.on('load', function () {
slider.addEventListener('input', function (e) {
var vectorMap = document.querySelector('#vector');
vectorMap.style.opacity = parseInt(e.target.value, 10) / 100;
sliderValue.textContent = e.target.value + '%';
});
});

// Copyright (c) 2016, Mapbox
Wentao-Kuang marked this conversation as resolved.
Show resolved Hide resolved
// https://github.com/mapbox/mapbox-gl-sync-move
function moveToMapPosition(master, clones) {
let center = master.getCenter();
let zoom = master.getZoom();
let bearing = master.getBearing();
let pitch = master.getPitch();

clones.forEach(function (clone) {
clone.jumpTo({
center: center,
zoom: zoom,
bearing: bearing,
pitch: pitch,
});
});
}

// Sync movements of two maps.
//
// All interactions that result in movement end up firing
// a "move" event. The trick here, though, is to
// ensure that movements don't cycle from one map
// to the other and back again, because such a cycle
// - could cause an infinite loop
// - prematurely halts prolonged movements like
// double-click zooming, box-zooming, and flying
function syncMaps() {
let maps;
let argLen = arguments.length;
if (argLen === 1) {
maps = arguments[0];
} else {
maps = [];
for (let i = 0; i < argLen; i++) {
maps.push(arguments[i]);
}
}

// Create all the movement functions, because if they're created every time
// they wouldn't be the same and couldn't be removed.
let fns = [];
maps.forEach(function (map, index) {
fns[index] = sync.bind(
null,
map,
maps.filter(function (o, i) {
return i !== index;
}),
);
});

function on() {
maps.forEach(function (map, index) {
map.on('move', fns[index]);
});
}

function off() {
maps.forEach(function (map, index) {
map.off('move', fns[index]);
});
}

// When one map moves, we turn off the movement listeners
// on all the maps, move it, then turn the listeners on again
function sync(master, clones) {
off();
moveToMapPosition(master, clones);
on();
}

on();
return function () {
off();
fns = [];
maps = [];
};
}

syncMaps(raster, vector);
</script>
</body>
</html>
Loading
Loading