cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
fix-gaps-in-tiles
Leaflet/debug/map/opacity.html

198 lines
5.0 KiB
HTML
Raw Permalink Normal View History

Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
<style>
.mapcontainer {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
float:left;
position: relative;
width: 32%;
font-size: 12px;
font-family: sans-serif;
height: 340px;
margin-bottom: 15px;
background-color: #eee;
margin-right: 1%;
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}
.map {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
position: absolute;
width: 100%;
height: 280px;
bottom: 0px;
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}
</style>
</head>
<body>
<p>These should all render identically.</p>
<div class="mapcontainer">
CASE 1: no opacity set on any layers
<br />
<div id="map1" class="map"></div>
</div>
<div class="mapcontainer">
CASE 2: opacity set to .99 on overlays but not on basemap
<br />
<div id="map2" class="map"></div>
</div>
<div class="mapcontainer">
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="mapcontainer">
CASE 4: opacity set to .99 on overlays but set to 1 on basemap
<br />
<div id="map4" class="map"></div>
</div>
<div class="mapcontainer">
CASE 5: opacity set to .99 on all layers
<br />
<div id="map5" class="map"></div>
</div>
<div class="mapcontainer">
CASE 6: opacity set to .99 on 1st and 3rd layers and 1 on middle layer
<br />
<div id="map6" class="map"></div>
</div>
type attribute not required in HTML5
2017-02-04 23:17:51 +08:00
<script>
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
var mapopts = {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
center: [35, -122],
zoom : 5
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
};
var map1 = L.map('map1', mapopts);
var map2 = L.map('map2', mapopts);
var map3 = L.map('map3', mapopts);
var map4 = L.map('map4', mapopts);
var map5 = L.map('map5', mapopts);
var map6 = L.map('map6', mapopts);
/**********
CASE 1: no opacity set on any layers
**********/
// OSM Basemap
Use https everywhere for OSM links (#6082) * Use https everywhere for OSM tile URLs Use https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png instead of http://{s}.tile.osm.org/{z}/{x}/{y}.png http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png * Use https everywhere for OSM attribution link Use https://www.openstreetmap.org/copyright instead of http://www.openstreetmap.org/copyright http://osm.org/copyright
2018-03-12 15:46:20 +08:00
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
Remove cloudmade tilesets
2014-03-04 23:54:41 +08:00
var osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: ''}).addTo(map1);
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
// EEZs / Nations
correct TileLayer constructors in debug (#4498)
2016-04-25 14:43:01 +08:00
var eez1 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
tms: true
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}).addTo(map1);
// Marine Protected Areas overlay
correct TileLayer constructors in debug (#4498)
2016-04-25 14:43:01 +08:00
var mpa1 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
tms: false
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}).addTo(map1);
/**********
CASE 2: opacity set on overlays but not on basemap
**********/
// OSM Basemap
Remove cloudmade tilesets
2014-03-04 23:54:41 +08:00
var osm2 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: ''}).addTo(map2);
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
// EEZs / Nations
correct TileLayer constructors in debug (#4498)
2016-04-25 14:43:01 +08:00
var eez2 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
tms: true,
opacity: 0.99
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}).addTo(map2);
// Marine Protected Areas overlay
correct TileLayer constructors in debug (#4498)
2016-04-25 14:43:01 +08:00
var mpa2 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
tms: false,
opacity: 0.99
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}).addTo(map2);
/**********
CASE 3: opacity set on overlays but not on basemap, zIndex option set to 0 on basemap
**********/
// OSM Basemap
Remove cloudmade tilesets
2014-03-04 23:54:41 +08:00
var osm3 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: '', zIndex: 0}).addTo(map3);
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
// EEZs / Nations
correct TileLayer constructors in debug (#4498)
2016-04-25 14:43:01 +08:00
var eez3 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
tms: true,
opacity: 0.99
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}).addTo(map3);
// Marine Protected Areas overlay
correct TileLayer constructors in debug (#4498)
2016-04-25 14:43:01 +08:00
var mpa3 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
tms: false,
opacity: 0.99
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}).addTo(map3);
/**********
CASE 4: opacity set on overlays but set to 1 on basemap
**********/
// OSM Basemap
Remove cloudmade tilesets
2014-03-04 23:54:41 +08:00
var osm4 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}).addTo(map4);
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
// EEZs / Nations
correct TileLayer constructors in debug (#4498)
2016-04-25 14:43:01 +08:00
var eez4 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
tms: true,
opacity: 0.99
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}).addTo(map4);
// Marine Protected Areas overlay
correct TileLayer constructors in debug (#4498)
2016-04-25 14:43:01 +08:00
var mpa4 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
tms: false,
opacity: 0.99
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}).addTo(map4);
/**********
CASE 5: opacity set to .5 on all layers
**********/
// OSM Basemap
Remove cloudmade tilesets
2014-03-04 23:54:41 +08:00
var osm5 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: '', opacity: 0.99}).addTo(map5);
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
// EEZs / Nations
correct TileLayer constructors in debug (#4498)
2016-04-25 14:43:01 +08:00
var eez5 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
tms: true,
opacity: 0.99
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}).addTo(map5);
// Marine Protected Areas overlay
correct TileLayer constructors in debug (#4498)
2016-04-25 14:43:01 +08:00
var mpa5 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
tms: false,
opacity: 0.99
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}).addTo(map5);
/**********
CASE 6: opacity set to .5 on 1st and 3rd layers and 1 on middle layer
**********/
// OSM Basemap
Remove cloudmade tilesets
2014-03-04 23:54:41 +08:00
var osm6 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: '', opacity: 0.99}).addTo(map6);
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
// EEZs / Nations
correct TileLayer constructors in debug (#4498)
2016-04-25 14:43:01 +08:00
var eez6 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
tms: true,
opacity: 1
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}).addTo(map6);
// Marine Protected Areas overlay
correct TileLayer constructors in debug (#4498)
2016-04-25 14:43:01 +08:00
var mpa6 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
Various debug fixes (#4515) * various debug fixes * fix mixed spaces and tabs
2016-04-29 17:35:50 +08:00
tms: false,
opacity: 0.99
Replace explicit z-index with DOM reordering Setting an explicit z-index interacts badly with tile layers which have an opacity less than 1, and therefore create a stacking context. Fixes #1790.
2013-06-28 21:55:17 +08:00
}).addTo(map6);
</script>
</body>
</html>
Reference in New Issue Copy Permalink