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 2 commits
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
14 changes: 14 additions & 0 deletions docs/examples/_overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Overview

[Use leaflet render raster map](./leaflet.xyz.3857.md)

<iframe src="../index.leaflet.xyz.3857.html" height="500px" width="100%" scrolling="no"></iframe>

Wentao-Kuang marked this conversation as resolved.
Show resolved Hide resolved

[Use Maplibre adjust opacity of the map](./maplibre.opacity.3857.md)

<iframe src="../index.maplibre.opacity.3857.html" height="500px" width="100%" scrolling="no"></iframe>

[Use Maplibre to load vector tiles](./maplibre.vector.3857.md)

<iframe src="../index.maplibre.vector.3857.html" height="500px" width="100%" scrolling="no"></iframe>
38 changes: 38 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,38 @@
<!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>
Wentao-Kuang marked this conversation as resolved.
Show resolved Hide resolved
<style>
html,
body {
height: 100%;
margin: 0;
}
</style>
</head>

<body>
<div id="map" style="width: 100%; height: 500px;"></div>
<script>
const startPos = [-40.5, 173];
const startZoom = 6;

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

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>
209 changes: 209 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,209 @@
<!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" />
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
<script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
Wentao-Kuang marked this conversation as resolved.
Show resolved Hide resolved
<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>
// vector layers
const styleUrl =
'https://basemaps.linz.govt.nz/v1/tiles/topographic/WebMercatorQuad/style/topographic.json?api=d01hep5551e30kxb7w85hck49tp';

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

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>
39 changes: 39 additions & 0 deletions docs/examples/index.maplibre.vector.3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<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/[email protected]/dist/maplibre-gl.css' />
<script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const startPos = [173, -40.5];
const startZoom = 6;

// vector layers
const style =
'https://basemaps.linz.govt.nz/v1/tiles/topographic/WebMercatorQuad/style/topographic.json?api=d01hep5551e30kxb7w85hck49tp';
var map = new maplibregl.Map({
container: 'map', // container id
style: style, // style URL
center: startPos, // starting position [lng, lat]
zoom: startZoom, // starting zoom
});
</script>
</body>
</html>
9 changes: 9 additions & 0 deletions docs/examples/leaflet.xyz.3857.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# Leaflet Raster Map

Use leaflet render raster map
Wentao-Kuang marked this conversation as resolved.
Show resolved Hide resolved

<iframe src="../index.leaflet.xyz.3857.html" height="500px" width="100%" scrolling="no"></iframe>

```html
--8<-- "examples/index.leaflet.xyz.3857.html"
```
9 changes: 9 additions & 0 deletions docs/examples/maplibre.opacity.3857.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# Maplibre Opacity Slider

Use Maplibre adjust opacity of the map

<iframe src="../index.maplibre.opacity.3857.html" height="500px" width="100%" scrolling="no"></iframe>

```html
--8<-- "examples/index.maplibre.opacity.3857.html"
```
9 changes: 9 additions & 0 deletions docs/examples/maplibre.vector.3857.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# Maplibre Vector Map

Use Maplibre to load vector tiles

<iframe src="../index.maplibre.vector.3857.html" height="500px" width="100%" scrolling="no"></iframe>

```html
--8<-- "examples/index.maplibre.vector.3857.html"
```
7 changes: 5 additions & 2 deletions mkdocs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ theme:

features:
- navigation.indexes
- content.code.copy

extra_css:
- "index.css"
Expand All @@ -49,7 +50,9 @@ markdown_extensions:
# Additional syntax highlighting
- pymdownx.inlinehilite
# Copy / paste to code blocks
Wentao-Kuang marked this conversation as resolved.
Show resolved Hide resolved
- pymdownx.snippets
- pymdownx.snippets:
base_path: 'docs'
check_paths: true

# Adds inline notes with `!!! note`
#
Expand All @@ -70,4 +73,4 @@ markdown_extensions:
extra:
analytics:
provider: google
property: !ENV [GOOGLE_ANALYTICS]
property: !ENV [GOOGLE_ANALYTICS]
Loading