mirror of
https://github.com/Leaflet/Leaflet.git
synced 2025-12-08 21:26:14 +00:00
7ac98758d4
Signed-off-by: Jon Koops <jonkoops@gmail.com> Co-authored-by: Florian Bischof <design.falke@gmail.com>
185 lines
4.5 KiB
HTML
185 lines
4.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Leaflet debug page - Opacity</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
|
|
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
|
<link rel="stylesheet" href="../css/screen.css" />
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"leaflet": "../../dist/leaflet-src.js"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.map-container {
|
|
float: left;
|
|
position: relative;
|
|
width: 32%;
|
|
font-size: 12px;
|
|
font-family: sans-serif;
|
|
height: 340px;
|
|
margin-bottom: 15px;
|
|
background-color: #eee;
|
|
margin-right: 1%;
|
|
}
|
|
|
|
.map {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 280px;
|
|
bottom: 0px;
|
|
}
|
|
</style>
|
|
<p>These should all render identically.</p>
|
|
<div class="map-container">
|
|
CASE 1: no opacity set on any layers
|
|
<br />
|
|
<div id="map1" class="map"></div>
|
|
</div>
|
|
<div class="map-container">
|
|
CASE 2: opacity set to .99 on overlays but not on basemap
|
|
<br />
|
|
<div id="map2" class="map"></div>
|
|
</div>
|
|
<div class="map-container">
|
|
CASE 3: opacity set on overlays but not on basemap, zIndex option set to 0 on basemap
|
|
<br />
|
|
<div id="map3" class="map"></div>
|
|
</div>
|
|
<div class="map-container">
|
|
CASE 4: opacity set to .99 on overlays but set to 1 on basemap
|
|
<br />
|
|
<div id="map4" class="map"></div>
|
|
</div>
|
|
<div class="map-container">
|
|
CASE 5: opacity set to .99 on all layers
|
|
<br />
|
|
<div id="map5" class="map"></div>
|
|
</div>
|
|
<div class="map-container">
|
|
CASE 6: opacity set to .99 on 1st and 3rd layers and 1 on middle layer
|
|
<br />
|
|
<div id="map6" class="map"></div>
|
|
</div>
|
|
<script type="module">
|
|
import {Map, TileLayer} from 'leaflet';
|
|
|
|
const mapopts = {
|
|
center: [35, -122],
|
|
zoom : 5
|
|
};
|
|
|
|
const map1 = new Map('map1', mapopts);
|
|
const map2 = new Map('map2', mapopts);
|
|
const map3 = new Map('map3', mapopts);
|
|
const map4 = new Map('map4', mapopts);
|
|
const map5 = new Map('map5', mapopts);
|
|
const map6 = new Map('map6', mapopts);
|
|
|
|
// CASE 1: no opacity set on any layers
|
|
// OSM Basemap
|
|
const osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
|
|
const eezsUrl = 'https://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png';
|
|
const mpasUrl = 'https://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png';
|
|
|
|
new TileLayer(osmUrl, {maxZoom: 18, attribution: ''}).addTo(map1);
|
|
|
|
// EEZs / Nations
|
|
new TileLayer(eezsUrl, {
|
|
tms: true
|
|
}).addTo(map1);
|
|
|
|
// Marine Protected Areas overlay
|
|
new TileLayer(mpasUrl, {
|
|
tms: false
|
|
}).addTo(map1);
|
|
|
|
// CASE 2: opacity set on overlays but not on basemap
|
|
// OSM Basemap
|
|
new TileLayer(osmUrl, {maxZoom: 18, attribution: ''}).addTo(map2);
|
|
|
|
// EEZs / Nations
|
|
new TileLayer(eezsUrl, {
|
|
tms: true,
|
|
opacity: 0.99
|
|
}).addTo(map2);
|
|
|
|
// Marine Protected Areas overlay
|
|
new TileLayer(mpasUrl, {
|
|
tms: false,
|
|
opacity: 0.99
|
|
}).addTo(map2);
|
|
|
|
|
|
// CASE 3: opacity set on overlays but not on basemap, zIndex option set to 0 on basemap
|
|
// OSM Basemap
|
|
new TileLayer(osmUrl, {maxZoom: 18, zIndex: 0}).addTo(map3);
|
|
|
|
// EEZs / Nations
|
|
new TileLayer(eezsUrl, {
|
|
tms: true,
|
|
opacity: 0.99
|
|
}).addTo(map3);
|
|
|
|
// Marine Protected Areas overlay
|
|
new TileLayer(mpasUrl, {
|
|
tms: false,
|
|
opacity: 0.99
|
|
}).addTo(map3);
|
|
|
|
// CASE 4: opacity set on overlays but set to 1 on basemap
|
|
// OSM Basemap
|
|
new TileLayer(osmUrl, {maxZoom: 18}).addTo(map4);
|
|
|
|
// EEZs / Nations
|
|
new TileLayer(eezsUrl, {
|
|
tms: true,
|
|
opacity: 0.99
|
|
}).addTo(map4);
|
|
|
|
// Marine Protected Areas overlay
|
|
new TileLayer(mpasUrl, {
|
|
tms: false,
|
|
opacity: 0.99
|
|
}).addTo(map4);
|
|
|
|
// CASE 5: opacity set to .5 on all layers
|
|
// OSM Basemap
|
|
new TileLayer(osmUrl, {maxZoom: 18, attribution: '', opacity: 0.99}).addTo(map5);
|
|
|
|
// EEZs / Nations
|
|
new TileLayer(eezsUrl, {
|
|
tms: true,
|
|
opacity: 0.99
|
|
}).addTo(map5);
|
|
|
|
// Marine Protected Areas overlay
|
|
new TileLayer(mpasUrl, {
|
|
tms: false,
|
|
opacity: 0.99
|
|
}).addTo(map5);
|
|
|
|
// CASE 6: opacity set to .5 on 1st and 3rd layers and 1 on middle layer
|
|
// OSM Basemap
|
|
new TileLayer(osmUrl, {maxZoom: 18, attribution: '', opacity: 0.99}).addTo(map6);
|
|
|
|
// EEZs / Nations
|
|
new TileLayer(eezsUrl, {
|
|
tms: true,
|
|
opacity: 1
|
|
}).addTo(map6);
|
|
|
|
// Marine Protected Areas overlay
|
|
new TileLayer(mpasUrl, {
|
|
tms: false,
|
|
opacity: 0.99
|
|
}).addTo(map6);
|
|
</script>
|
|
</body>
|
|
</html>
|